|
|
@ -1,4 +1,3 @@ |
|
|
|
|
|
|
|
|
|
|
|
<div class="content"> |
|
|
|
<div class="content"> |
|
|
|
<!-- <button mat-button style="position: absolute;left: 50%;top: 0;z-index: 999;" (click)="createimg()">生成图片</button> --> |
|
|
|
<!-- <button mat-button style="position: absolute;left: 50%;top: 0;z-index: 999;" (click)="createimg()">生成图片</button> --> |
|
|
|
<div id="map"></div> |
|
|
|
<div id="map"></div> |
|
|
@ -27,31 +26,39 @@ |
|
|
|
<div class="routeHeader"> |
|
|
|
<div class="routeHeader"> |
|
|
|
<label style="bottom: 13px; left: 38px;" class="routeGISPublicIcon" (click)='clearGISRoute()'>清除路线</label> |
|
|
|
<label style="bottom: 13px; left: 38px;" class="routeGISPublicIcon" (click)='clearGISRoute()'>清除路线</label> |
|
|
|
<label style="bottom: 13px; left: 275px;" class="routeGISPublicIcon" (click)='queryGISRoute()'>查询</label> |
|
|
|
<label style="bottom: 13px; left: 275px;" class="routeGISPublicIcon" (click)='queryGISRoute()'>查询</label> |
|
|
|
<label style="top: 0px; right: 5px; font-size: 19px;" class="routeGISPublicIcon" (click)='closeRouteGIS()' title="关闭">×</label> |
|
|
|
<label style="top: 0px; right: 5px; font-size: 19px;" class="routeGISPublicIcon" (click)='closeRouteGIS()' |
|
|
|
|
|
|
|
title="关闭">×</label> |
|
|
|
<div class="routeLeft" (click)='exchangeGISRoute()'><mat-icon>import_export</mat-icon></div> |
|
|
|
<div class="routeLeft" (click)='exchangeGISRoute()'><mat-icon>import_export</mat-icon></div> |
|
|
|
<div class="routeContent" style="margin-top: -14px;"> |
|
|
|
<div class="routeContent" style="margin-top: -14px;"> |
|
|
|
<div class="routeEveryRow"> |
|
|
|
<div class="routeEveryRow"> |
|
|
|
<label class="routeText">起</label> |
|
|
|
<label class="routeText">起</label> |
|
|
|
<input type="text" list="start" [(ngModel)]="routeStart" (ngModelChange)="routeChange(0)"> |
|
|
|
<input nz-input [(ngModel)]="routeStart" (ngModelChange)="routeChange(0)" [nzAutocomplete]="auto" /> |
|
|
|
<datalist id="start"> |
|
|
|
<nz-autocomplete nzBackfill #auto> |
|
|
|
<option *ngFor="let item of routeStartList" value="{{item.district}} {{item.name}}"> |
|
|
|
<nz-auto-option *ngFor="let item of routeStartList" [nzValue]="item.district +' ' +item.name"> |
|
|
|
</datalist> |
|
|
|
{{item.district}} {{item.name}} |
|
|
|
<label class="routeClear" *ngIf="routeStart" (click)='deleteSearchGIS(0)'><mat-icon>highlight_off</mat-icon></label> |
|
|
|
</nz-auto-option> |
|
|
|
|
|
|
|
</nz-autocomplete> |
|
|
|
|
|
|
|
<label class="routeClear" *ngIf="routeStart" |
|
|
|
|
|
|
|
(click)='deleteSearchGIS(0)'><mat-icon>highlight_off</mat-icon></label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="routeEveryRow"> |
|
|
|
<div class="routeEveryRow"> |
|
|
|
<label class="routeText">终</label> |
|
|
|
<label class="routeText">终</label> |
|
|
|
<input type="text" list="end" [(ngModel)]="routeEnd" (ngModelChange)="routeChange(1)"> |
|
|
|
<input nz-input [(ngModel)]="routeEnd" (ngModelChange)="routeChange(1)" [nzAutocomplete]="auto2" /> |
|
|
|
<datalist id="end"> |
|
|
|
<nz-autocomplete nzBackfill #auto2> |
|
|
|
<option *ngFor="let item of routeEndList" value="{{item.district}} {{item.name}}"> |
|
|
|
<nz-auto-option *ngFor="let item of routeEndList" [nzValue]="item.district +' ' +item.name"> |
|
|
|
</datalist> |
|
|
|
{{item.district}} {{item.name}} |
|
|
|
<label class="routeClear" *ngIf="routeEnd" (click)='deleteSearchGIS(1)'><mat-icon>highlight_off</mat-icon></label> |
|
|
|
</nz-auto-option> |
|
|
|
|
|
|
|
</nz-autocomplete> |
|
|
|
|
|
|
|
<label class="routeClear" *ngIf="routeEnd" |
|
|
|
|
|
|
|
(click)='deleteSearchGIS(1)'><mat-icon>highlight_off</mat-icon></label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="routeCenter" *ngIf="routes.steps.length"> |
|
|
|
<div class="routeCenter" *ngIf="routes.steps.length"> |
|
|
|
<div style="text-align: center;"> |
|
|
|
<div style="text-align: center;"> |
|
|
|
<button class="routeType" [ngClass]="{'selectRouteType': selectType}" (click)='toggleRoute(true)'>推荐方案</button> |
|
|
|
<button class="routeType" [ngClass]="{'selectRouteType': selectType}" (click)='toggleRoute(true)'>推荐方案</button> |
|
|
|
<button class="routeType" [ngClass]="{'selectRouteType': !selectType}" (click)='toggleRoute(false)'>躲避拥堵</button> |
|
|
|
<button class="routeType" [ngClass]="{'selectRouteType': !selectType}" |
|
|
|
|
|
|
|
(click)='toggleRoute(false)'>躲避拥堵</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="routeTypeExplain" style="text-align: center; font-weight: 550;"> |
|
|
|
<div class="routeTypeExplain" style="text-align: center; font-weight: 550;"> |
|
|
|
<label>约{{ routes.time / 60 | number:'0.0-0' }}分钟</label> |
|
|
|
<label>约{{ routes.time / 60 | number:'0.0-0' }}分钟</label> |
|
|
@ -64,7 +71,8 @@ |
|
|
|
<div class="routeCenterTB" title="{{routeStart}}"> |
|
|
|
<div class="routeCenterTB" title="{{routeStart}}"> |
|
|
|
<p style="background-color: #0080FF;">起</p><label style="font-weight: 550;">{{routeStart}}</label> |
|
|
|
<p style="background-color: #0080FF;">起</p><label style="font-weight: 550;">{{routeStart}}</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="routeCenterTB" *ngFor="let item of routes.steps" style="border-bottom: 1px solid rgb(223, 212, 212);" title="{{item.instruction}}"> |
|
|
|
<div class="routeCenterTB" *ngFor="let item of routes.steps" style="border-bottom: 1px solid rgb(223, 212, 212);" |
|
|
|
|
|
|
|
title="{{item.instruction}}"> |
|
|
|
<p class="orientation" *ngIf="item.orientation == '西'">←</p> |
|
|
|
<p class="orientation" *ngIf="item.orientation == '西'">←</p> |
|
|
|
<p class="orientation" *ngIf="item.orientation == '北'">↑</p> |
|
|
|
<p class="orientation" *ngIf="item.orientation == '北'">↑</p> |
|
|
|
<p class="orientation" *ngIf="item.orientation == '东'">→</p> |
|
|
|
<p class="orientation" *ngIf="item.orientation == '东'">→</p> |
|
|
@ -86,15 +94,19 @@ |
|
|
|
<div class="leftDiv" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}"> |
|
|
|
<div class="leftDiv" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}"> |
|
|
|
<app-left-working style="width: 100%;height: 100%;" (onCustomEvent)="closeDiv()" #appLeft></app-left-working> |
|
|
|
<app-left-working style="width: 100%;height: 100%;" (onCustomEvent)="closeDiv()" #appLeft></app-left-working> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img *ngIf="showLeftDiv" id="leftHide" class="leftHide publicButton" title="隐藏" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}" (click)='toggleLeft(false)' src="../../../assets//images/showhide.png" alt=""> |
|
|
|
<img *ngIf="showLeftDiv" id="leftHide" class="leftHide publicButton" title="隐藏" |
|
|
|
<img class="leftShow publicButton" title="显示" *ngIf="!leftDivState && showLeftDiv" (click)='toggleLeft(true)' src="../../../assets//images/showhide.png" alt=""> |
|
|
|
[ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}" (click)='toggleLeft(false)' |
|
|
|
|
|
|
|
src="../../../assets//images/showhide.png" alt=""> |
|
|
|
|
|
|
|
<img class="leftShow publicButton" title="显示" *ngIf="!leftDivState && showLeftDiv" (click)='toggleLeft(true)' |
|
|
|
|
|
|
|
src="../../../assets//images/showhide.png" alt=""> |
|
|
|
<!-- 左侧 --> |
|
|
|
<!-- 左侧 --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 右上角 --> |
|
|
|
<!-- 右上角 --> |
|
|
|
<div class="rightTopBox"> |
|
|
|
<div class="rightTopBox"> |
|
|
|
<!-- <button (click)="setMaxZoom()">设置聚合范围</button> --> |
|
|
|
<!-- <button (click)="setMaxZoom()">设置聚合范围</button> --> |
|
|
|
<div class="topbox"> |
|
|
|
<div class="topbox"> |
|
|
|
<div (click)="clickTitle(key)" *ngFor="let item of titleList;let key = index" class="titleItem" [ngClass]="{'selectedItem': key == selectedTitle}"> |
|
|
|
<div (click)="clickTitle(key)" *ngFor="let item of titleList;let key = index" class="titleItem" |
|
|
|
|
|
|
|
[ngClass]="{'selectedItem': key == selectedTitle}"> |
|
|
|
<img [src]="item.iconImg" alt=""> |
|
|
|
<img [src]="item.iconImg" alt=""> |
|
|
|
<span>{{item.name}}</span> |
|
|
|
<span>{{item.name}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -104,7 +116,8 @@ |
|
|
|
<div *ngIf="selectedTitle == 0" class="keyUnitBox"> |
|
|
|
<div *ngIf="selectedTitle == 0" class="keyUnitBox"> |
|
|
|
<form [formGroup]="keyUnitForm" class="inputList" (submit)='ketUnitSubmit(keyUnitForm.value)'> |
|
|
|
<form [formGroup]="keyUnitForm" class="inputList" (submit)='ketUnitSubmit(keyUnitForm.value)'> |
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
|
|
<mat-checkbox color="primary" formControlName="allSelectedUnit" (change)="selectedAllUnit($event)">全选</mat-checkbox> |
|
|
|
<mat-checkbox color="primary" formControlName="allSelectedUnit" |
|
|
|
|
|
|
|
(change)="selectedAllUnit($event)">全选</mat-checkbox> |
|
|
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
|
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="inputItem"> |
|
|
|
<div class="inputItem"> |
|
|
@ -141,7 +154,8 @@ |
|
|
|
<div *ngIf="selectedTitle == 1" class="waterBox"> |
|
|
|
<div *ngIf="selectedTitle == 1" class="waterBox"> |
|
|
|
<form [formGroup]="watertForm" class="inputList" (submit)='waterSubmit(watertForm.value)'> |
|
|
|
<form [formGroup]="watertForm" class="inputList" (submit)='waterSubmit(watertForm.value)'> |
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
|
|
<mat-checkbox color="primary" formControlName="allSelectedWater" (change)="selectedAllWater($event)">全选</mat-checkbox> |
|
|
|
<mat-checkbox color="primary" formControlName="allSelectedWater" |
|
|
|
|
|
|
|
(change)="selectedAllWater($event)">全选</mat-checkbox> |
|
|
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
|
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="inputItem"> |
|
|
|
<div class="inputItem"> |
|
|
@ -178,7 +192,8 @@ |
|
|
|
<div *ngIf="selectedTitle == 2" class="fireForceBox"> |
|
|
|
<div *ngIf="selectedTitle == 2" class="fireForceBox"> |
|
|
|
<form [formGroup]="fireForceForm" class="inputList" (submit)='fireForceSubmit(fireForceForm.value)'> |
|
|
|
<form [formGroup]="fireForceForm" class="inputList" (submit)='fireForceSubmit(fireForceForm.value)'> |
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
|
|
<mat-checkbox color="primary" formControlName="allSelectedFireForce" (change)="selectedAllFireForce($event)">全选</mat-checkbox> |
|
|
|
<mat-checkbox color="primary" formControlName="allSelectedFireForce" |
|
|
|
|
|
|
|
(change)="selectedAllFireForce($event)">全选</mat-checkbox> |
|
|
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
|
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="inputItem"> |
|
|
|
<div class="inputItem"> |
|
|
@ -215,11 +230,13 @@ |
|
|
|
<div *ngIf="selectedTitle == 3" class="linkageForcesBox"> |
|
|
|
<div *ngIf="selectedTitle == 3" class="linkageForcesBox"> |
|
|
|
<form [formGroup]="linkageForcesForm" class="inputList" (submit)='linkageForcesSubmit(linkageForcesForm.value)'> |
|
|
|
<form [formGroup]="linkageForcesForm" class="inputList" (submit)='linkageForcesSubmit(linkageForcesForm.value)'> |
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
|
|
<mat-checkbox color="primary" formControlName="allSelectedLinkageForces" (change)="selectedAllLinkageForces($event)">全选</mat-checkbox> |
|
|
|
<mat-checkbox color="primary" formControlName="allSelectedLinkageForces" |
|
|
|
|
|
|
|
(change)="selectedAllLinkageForces($event)">全选</mat-checkbox> |
|
|
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
|
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="inputItem"> |
|
|
|
<div class="inputItem"> |
|
|
|
<mat-checkbox *ngFor="let linkage of linkageForces.controls;let i = index" color="primary" [formControl]="linkage"> |
|
|
|
<mat-checkbox *ngFor="let linkage of linkageForces.controls;let i = index" color="primary" |
|
|
|
|
|
|
|
[formControl]="linkage"> |
|
|
|
{{linkageForcesList[i].name}} |
|
|
|
{{linkageForcesList[i].name}} |
|
|
|
</mat-checkbox> |
|
|
|
</mat-checkbox> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -251,8 +268,10 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div *ngIf="selectedTitle == 4" class="distanceBox"> |
|
|
|
<div *ngIf="selectedTitle == 4" class="distanceBox"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<input type="radio" name='func' [(ngModel)]="checkRadio" value='rule' (click)="measure('rule')" checked><span class="input-text" style="margin-right: 15px;"> 距离测量</span> |
|
|
|
<input type="radio" name='func' [(ngModel)]="checkRadio" value='rule' (click)="measure('rule')" checked><span |
|
|
|
<input type="radio" name='func' [(ngModel)]="checkRadio" value='measureArea' (click)="measure('measureArea')"><span class="input-text"> 面积测量</span> |
|
|
|
class="input-text" style="margin-right: 15px;"> 距离测量</span> |
|
|
|
|
|
|
|
<input type="radio" name='func' [(ngModel)]="checkRadio" value='measureArea' |
|
|
|
|
|
|
|
(click)="measure('measureArea')"><span class="input-text"> 面积测量</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button class="clearbutton" (click)="clearnAll()">清除</button> |
|
|
|
<button class="clearbutton" (click)="clearnAll()">清除</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -260,8 +279,10 @@ |
|
|
|
<div class="topbox"> |
|
|
|
<div class="topbox"> |
|
|
|
<span>图层</span> |
|
|
|
<span>图层</span> |
|
|
|
<div style="display: flex;align-items: center;"> |
|
|
|
<div style="display: flex;align-items: center;"> |
|
|
|
<mat-slide-toggle [(ngModel)]="satelliteModel" (change)='satelliteChange($event)' color="primary" labelPosition='before' style="margin-right: 25px;">卫星图层</mat-slide-toggle> |
|
|
|
<mat-slide-toggle [(ngModel)]="satelliteModel" (change)='satelliteChange($event)' color="primary" |
|
|
|
<mat-slide-toggle [(ngModel)]="loadModel" (change)='loadChange($event)' color="primary" labelPosition='before'>路网图层</mat-slide-toggle> |
|
|
|
labelPosition='before' style="margin-right: 25px;">卫星图层</mat-slide-toggle> |
|
|
|
|
|
|
|
<mat-slide-toggle [(ngModel)]="loadModel" (change)='loadChange($event)' color="primary" |
|
|
|
|
|
|
|
labelPosition='before'>路网图层</mat-slide-toggle> |
|
|
|
<mat-icon (click)="closertdiv()" style="margin-left: 10px;">clear</mat-icon> |
|
|
|
<mat-icon (click)="closertdiv()" style="margin-left: 10px;">clear</mat-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -283,5 +304,3 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 右上角 --> |
|
|
|
<!-- 右上角 --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|