You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
285 lines
15 KiB
285 lines
15 KiB
|
|
<div class="content"> |
|
<!-- <button mat-button style="position: absolute;left: 50%;top: 0;z-index: 999;" (click)="createimg()">生成图片</button> --> |
|
<div id="map"></div> |
|
<div id="container" style="height: 100%;"></div> |
|
<!-- 左上搜索框 --> |
|
<div class="searchInput"> |
|
<div style="height: 36px; overflow: hidden; position: relative;"> |
|
<input type="text" [(ngModel)]="searchText" placeholder="请输入地址"> |
|
<!-- *ngIf="searchText || allCompany.length" --> |
|
<label class="clearIcon" title="清除" (click)='clear()'>×</label> |
|
<button (click)='search()'><mat-icon>search</mat-icon></button> |
|
</div> |
|
<div class="searchDataDiv"> |
|
<div class="searchCompany" *ngFor="let item of allCompany" (click)='selectCompany(item)'> |
|
<p class="overflowText" title="{{item.name}}">{{item.name?item.name : '暂无单位名称'}}</p> |
|
<p class="overflowText" title="{{item.address}}">{{item.address?item.address : '暂无单位地址'}}</p> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 左上搜索框 --> |
|
|
|
<!-- 导航路线 --> |
|
<div class="routeGIS" *ngIf="isShowRouteGIS"> |
|
<div class="routeHeader"> |
|
<label style="bottom: 13px; left: 38px;" class="routeGISPublicIcon" (click)='clearGISRoute()'>清除路线</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> |
|
<div class="routeLeft" (click)='exchangeGISRoute()'><mat-icon>import_export</mat-icon></div> |
|
<div class="routeContent" style="margin-top: -14px;"> |
|
<div class="routeEveryRow"> |
|
<label class="routeText">起</label> |
|
<input type="text" list="start" [(ngModel)]="routeStart" (ngModelChange)="routeChange(0)"> |
|
<datalist id="start"> |
|
<option *ngFor="let item of routeStartList" value="{{item.district}} {{item.name}}"> |
|
</datalist> |
|
<label class="routeClear" *ngIf="routeStart" (click)='deleteSearchGIS(0)'><mat-icon>highlight_off</mat-icon></label> |
|
</div> |
|
<div class="routeEveryRow"> |
|
<label class="routeText">终</label> |
|
<input type="text" list="end" [(ngModel)]="routeEnd" (ngModelChange)="routeChange(1)"> |
|
<datalist id="end"> |
|
<option *ngFor="let item of routeEndList" value="{{item.district}} {{item.name}}"> |
|
</datalist> |
|
<label class="routeClear" *ngIf="routeEnd" (click)='deleteSearchGIS(1)'><mat-icon>highlight_off</mat-icon></label> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="routeCenter" *ngIf="routes.steps.length"> |
|
<div style="text-align: center;"> |
|
<button class="routeType" [ngClass]="{'selectRouteType': selectType}" (click)='toggleRoute(true)'>推荐方案</button> |
|
<button class="routeType" [ngClass]="{'selectRouteType': !selectType}" (click)='toggleRoute(false)'>躲避拥堵</button> |
|
</div> |
|
<div class="routeTypeExplain" style="text-align: center; font-weight: 550;"> |
|
<label>约{{ routes.time / 60 | number:'0.0-0' }}分钟</label> |
|
<label>{{ routes.distance / 1000 | number:'0.1-1' }}公里</label> |
|
</div> |
|
<div class="routeTypeExplain" style="color: rgb(176, 180, 184); margin-top: -10px;"> |
|
<label>途径</label> |
|
<span *ngFor="let item of routes.steps">{{item.road? item.road + '>' : null}}</span> |
|
</div> |
|
<div class="routeCenterTB" title="{{routeStart}}"> |
|
<p style="background-color: #0080FF;">起</p><label style="font-weight: 550;">{{routeStart}}</label> |
|
</div> |
|
<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> |
|
<p class="orientation" *ngIf="item.orientation == '东北'">↗</p> |
|
<p class="orientation" *ngIf="item.orientation == '东南'">↘</p> |
|
<label>{{item.instruction}}</label> |
|
</div> |
|
<div class="routeCenterTB" title="{{routeEnd}}"> |
|
<p style="background-color: rgb(250, 21, 21);">终</p><label style="font-weight: 550;">{{routeEnd}}</label> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 导航路线 --> |
|
|
|
<!-- 左侧 --> |
|
<div class="leftDiv" [ngClass]="{'leftDivShow': leftDivState,'leftDivHide': !leftDivState}"> |
|
<app-left-working style="width: 100%;height: 100%;" (onCustomEvent)="closeDiv()" #appLeft></app-left-working> |
|
</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 class="leftShow publicButton" title="显示" *ngIf="!leftDivState && showLeftDiv" (click)='toggleLeft(true)' src="../../../assets//images/showhide.png" alt=""> |
|
<!-- 左侧 --> |
|
|
|
<!-- 右上角 --> |
|
<div class="rightTopBox"> |
|
<!-- <button (click)="setMaxZoom()">设置聚合范围</button> --> |
|
<div class="topbox"> |
|
<div (click)="clickTitle(key)" *ngFor="let item of titleList;let key = index" class="titleItem" [ngClass]="{'selectedItem': key == selectedTitle}"> |
|
<img [src]="item.iconImg" alt=""> |
|
<span>{{item.name}}</span> |
|
</div> |
|
</div> |
|
|
|
<div class="contantbox"> |
|
<div *ngIf="selectedTitle == 0" class="keyUnitBox"> |
|
<form [formGroup]="keyUnitForm" class="inputList" (submit)='ketUnitSubmit(keyUnitForm.value)'> |
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
<mat-checkbox color="primary" formControlName="allSelectedUnit" (change)="selectedAllUnit($event)">全选</mat-checkbox> |
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
</div> |
|
<div class="inputItem"> |
|
<mat-checkbox *ngFor="let unit of units.controls;let i = index" color="primary" [formControl]="unit"> |
|
{{keyUnitList[i].name}} |
|
</mat-checkbox> |
|
</div> |
|
<div class="btnbox"> |
|
<div> |
|
<span>显示范围 : </span> |
|
<mat-form-field> |
|
<select matNativeControl formControlName="areaUnit" [(ngModel)]="unitAreaDefault"> |
|
<option value="-1">全部</option> |
|
<option value="0">当前视野范围</option> |
|
<option value="200">200米</option> |
|
<option value="500">500米</option> |
|
<option value="1000">1000米</option> |
|
<option value="1500">1500米</option> |
|
<option value="2000">2000米</option> |
|
<option value="2500">2500米</option> |
|
<option value="3000">3000米</option> |
|
<option value="4000">4000米</option> |
|
<option value="5000">5000米</option> |
|
</select> |
|
</mat-form-field> |
|
</div> |
|
|
|
<button class="submit" id="submit">确定</button> |
|
<button class="cancel" type="button" (click)="resetUnit()">取消显示</button> |
|
</div> |
|
|
|
</form> |
|
</div> |
|
<div *ngIf="selectedTitle == 1" class="waterBox"> |
|
<form [formGroup]="watertForm" class="inputList" (submit)='waterSubmit(watertForm.value)'> |
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
<mat-checkbox color="primary" formControlName="allSelectedWater" (change)="selectedAllWater($event)">全选</mat-checkbox> |
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
</div> |
|
<div class="inputItem"> |
|
<mat-checkbox *ngFor="let water of waters.controls;let i = index" color="primary" [formControl]="water"> |
|
{{waterList[i].name}} |
|
</mat-checkbox> |
|
</div> |
|
<div class="btnbox"> |
|
<div> |
|
<span>显示范围 : </span> |
|
<mat-form-field> |
|
<select matNativeControl formControlName="areaWater" [(ngModel)]="waterAreaDefault"> |
|
<option value="-1">全部</option> |
|
<option value="0">当前视野范围</option> |
|
<option value="200">200米</option> |
|
<option value="500">500米</option> |
|
<option value="1000">1000米</option> |
|
<option value="1500">1500米</option> |
|
<option value="2000">2000米</option> |
|
<option value="2500">2500米</option> |
|
<option value="3000">3000米</option> |
|
<option value="4000">4000米</option> |
|
<option value="5000">5000米</option> |
|
</select> |
|
</mat-form-field> |
|
</div> |
|
|
|
<button class="submit" id="submit2">确定</button> |
|
<button class="cancel" type="button" (click)="resetWater()">取消显示</button> |
|
</div> |
|
|
|
</form> |
|
</div> |
|
<div *ngIf="selectedTitle == 2" class="fireForceBox"> |
|
<form [formGroup]="fireForceForm" class="inputList" (submit)='fireForceSubmit(fireForceForm.value)'> |
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
<mat-checkbox color="primary" formControlName="allSelectedFireForce" (change)="selectedAllFireForce($event)">全选</mat-checkbox> |
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
</div> |
|
<div class="inputItem"> |
|
<mat-checkbox *ngFor="let fire of fireForce.controls;let i = index" color="primary" [formControl]="fire"> |
|
{{fireForceList[i].name}} |
|
</mat-checkbox> |
|
</div> |
|
<div class="btnbox"> |
|
<div> |
|
<span>显示范围 : </span> |
|
<mat-form-field> |
|
<select matNativeControl formControlName="areaFireForce" [(ngModel)]="fireForceAreaDefault"> |
|
<option value="-1">全部</option> |
|
<option value="0">当前视野范围</option> |
|
<option value="200">200米</option> |
|
<option value="500">500米</option> |
|
<option value="1000">1000米</option> |
|
<option value="1500">1500米</option> |
|
<option value="2000">2000米</option> |
|
<option value="2500">2500米</option> |
|
<option value="3000">3000米</option> |
|
<option value="4000">4000米</option> |
|
<option value="5000">5000米</option> |
|
</select> |
|
</mat-form-field> |
|
</div> |
|
|
|
<button class="submit" id="submit3">确定</button> |
|
<button class="cancel" type="button" (click)="resetFireForce()">取消显示</button> |
|
</div> |
|
|
|
</form> |
|
</div> |
|
<div *ngIf="selectedTitle == 3" class="linkageForcesBox"> |
|
<form [formGroup]="linkageForcesForm" class="inputList" (submit)='linkageForcesSubmit(linkageForcesForm.value)'> |
|
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|
<mat-checkbox color="primary" formControlName="allSelectedLinkageForces" (change)="selectedAllLinkageForces($event)">全选</mat-checkbox> |
|
<mat-icon (click)="closertdiv()">clear</mat-icon> |
|
</div> |
|
<div class="inputItem"> |
|
<mat-checkbox *ngFor="let linkage of linkageForces.controls;let i = index" color="primary" [formControl]="linkage"> |
|
{{linkageForcesList[i].name}} |
|
</mat-checkbox> |
|
</div> |
|
<div class="btnbox"> |
|
<div> |
|
<span>显示范围 : </span> |
|
<mat-form-field> |
|
<select matNativeControl formControlName="areaLinkageForces" [(ngModel)]="linkageForcesAreaDefault"> |
|
<option value="-1">全部</option> |
|
<option value="0">当前视野范围</option> |
|
<option value="200">200米</option> |
|
<option value="500">500米</option> |
|
<option value="1000">1000米</option> |
|
<option value="1500">1500米</option> |
|
<option value="2000">2000米</option> |
|
<option value="2500">2500米</option> |
|
<option value="3000">3000米</option> |
|
<option value="4000">4000米</option> |
|
<option value="5000">5000米</option> |
|
</select> |
|
</mat-form-field> |
|
</div> |
|
|
|
<button class="submit" id="submit4">确定</button> |
|
<button class="cancel" type="button" (click)="resetLinkageForces()">取消显示</button> |
|
</div> |
|
|
|
</form> |
|
</div> |
|
<div *ngIf="selectedTitle == 4" class="distanceBox"> |
|
<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='measureArea' (click)="measure('measureArea')"><span class="input-text"> 面积测量</span> |
|
</div> |
|
<button class="clearbutton" (click)="clearnAll()">清除</button> |
|
</div> |
|
<div *ngIf="selectedTitle == 5" class="coverageBox"> |
|
<div class="topbox"> |
|
<span>图层</span> |
|
<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)]="loadModel" (change)='loadChange($event)' color="primary" labelPosition='before'>路网图层</mat-slide-toggle> |
|
<mat-icon (click)="closertdiv()" style="margin-left: 10px;">clear</mat-icon> |
|
</div> |
|
</div> |
|
<div class="contantbox"> |
|
<div [ngClass]="{'selectedPattern': mapPattern}"> |
|
<img src="../../../assets/images/2D.jpg" alt="" (click)="mapPatternChange('2D')"> |
|
<span> 2D </span> |
|
</div> |
|
<div [ngClass]="{'selectedPattern': !mapPattern}"> |
|
<img src="../../../assets/images/3D.jpg" alt="" (click)="mapPatternChange('3D')"> |
|
<span> 3D </span> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
|
|
</div> |
|
</div> |
|
<!-- 右上角 --> |
|
</div> |
|
|
|
|
|
|