ShangHaiYuan-AnXin/src/app/gis-management/gis-labeling/gis-labeling.component.html

<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;">&nbsp;距离测量</span>
            <input type="radio" name='func' [(ngModel)]="checkRadio" value='measureArea' (click)="measure('measureArea')"><span class="input-text"> &nbsp;面积测量</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>