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

import { HttpClient } from '@angular/common/http';
import { Component, OnInit ,Renderer2,ElementRef, Inject, NgZone, ViewChild } from '@angular/core';
import { FormBuilder,FormGroup, FormControl  } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
declare var AMap: any;
declare var QRCode: any;

@Component({
  selector: 'app-gis-labeling',
  templateUrl: './gis-labeling.component.html',
  styleUrls: ['./gis-labeling.component.scss']
})
export class GisLabelingComponent implements OnInit {

  constructor(private  elementRef: ElementRef,public renderer2: Renderer2,private http:HttpClient,public snackBar: MatSnackBar,public dialog: MatDialog,public _ngZone:NgZone,private fb: FormBuilder) { }
 
  //右上角div
  selectedTitle:number 
  titleList = [ {name:'重点单位',iconImg:'/assets/images/uniticon.png'},
                {name:'水源',iconImg:'/assets/images/watericon.png'},
                {name:'消防力量',iconImg:'/assets/images/xfll.png'},
                {name:'联动力量',iconImg:'/assets/images/ldll.png'},
                {name:'测量工具',iconImg:'/assets/images/distanceicon.png'},
                {name:'图层选择',iconImg:'/assets/images/coverageicon.png'}
              ]
  keyUnitList:any = []
  waterList = [ 
    {id:'0',name:'消火栓',selected:false},
    {id:'1',name:'消防水池',selected:false},
    {id:'2',name:'天然水源',selected:false},
  ]
  fireForceList = [
    {id:'0',name:'总队',selected:false},
    {id:'1',name:'支队',selected:false},
    {id:'2',name:'大队',selected:false},
    {id:'3',name:'中队(消防站)',selected:false},
    {id:'4',name:'其他消防队伍',selected:false}
  ]
  linkageForcesList = [
    {id:'0',name:'安监',selected:false},
    {id:'1',name:'电力局',selected:false},
    {id:'2',name:'公安',selected:false},
    {id:'3',name:'海事',selected:false},
    {id:'4',name:'环保局',selected:false},
    {id:'5',name:'交通',selected:false},
    {id:'6',name:'民政',selected:false},
    {id:'7',name:'气象局',selected:false},
    {id:'8',name:'燃气局',selected:false},
    {id:'9',name:'市政',selected:false},
    {id:'10',name:'水利',selected:false},
    {id:'11',name:'通信',selected:false},
    {id:'12',name:'医疗',selected:false},
    {id:'13',name:'应急管理',selected:false},
    {id:'14',name:'住建',selected:false}
  ]
  keyUnitForm : FormGroup//gis右上角重点单位表单
  watertForm : FormGroup//gis右上角水源表单
  fireForceForm : FormGroup//gis右上角消防力量表单
  linkageForcesForm : FormGroup//gis右上角联动力量表单

  selectedUnitList:any = []//选择提交的单位
  selectedWaterList:any = []//选择提交的水源
  selectedFireForceList:any = []//选择提交的消防力量
  selectedLinkageForcesList:any = []//选择提交的联动力量

  unitAreaDefault:any = '-1'//默认单位范围
  waterAreaDefault:any = '-1'//默认水源范围
  fireForceAreaDefault:any = '-1'//默认消防力量范围
  linkageForcesAreaDefault:any = '-1'//默认联动力量范围


  //获得单位循环出来的checkbox列表（formControl实例）
  get units():any{
    return this.keyUnitForm.get('units')
  }
  get waters():any{
    return this.watertForm.get('waters')
  }
  get fireForce():any{
    return this.fireForceForm.get('fireForce')
  }
  get linkageForces():any{
    return this.linkageForcesForm.get('linkageForces')
  }

  async getAllBuildingType(){
    let result = await new Promise((result,reject)=>{
      this.http.get('/api/BuildingTypes/Simple').subscribe((data:any) => {
        data.forEach(item => {
          item.selected = false
        })
        this.keyUnitList = data
        result('获取单位类型')
      })
    })
  }
  ngOnInit(): void {
    window.setTimeout(()=>{
      this.mapInit()
    },0)
    let buildingType = this.getAllBuildingType()//获取建筑类型
    Promise.all([buildingType]).then(()=>{
      this.keyUnitForm = this.fb.group({
        units:this.buildUnits(),
        allSelectedUnit:new FormControl(),
        areaUnit:new FormControl()
      })
      this.watertForm = this.fb.group({
        waters:this.waterUnits(),
        allSelectedWater:new FormControl(),
        areaWater:new FormControl()
      })
      this.fireForceForm = this.fb.group({
        fireForce:this.fireForceController(),
        allSelectedFireForce:new FormControl(),
        areaFireForce:new FormControl()
      })
      this.linkageForcesForm = this.fb.group({
        linkageForces:this.linkageForcesController(),
        allSelectedLinkageForces:new FormControl(),
        areaLinkageForces:new FormControl()
      })

      //将选中的push到数组
      this.units.valueChanges.subscribe(values => {
        let selects:string[] = []
        values.forEach((selected:boolean,i:number) => {
          selected === true && selects.push(this.keyUnitList[i].id)
        });
        this.selectedUnitList = selects
      })
      this.waters.valueChanges.subscribe(values => {
        let selects:string[] = []
        values.forEach((selected:boolean,i:number) => {
          selected === true && selects.push(this.waterList[i].id)
        });
        this.selectedWaterList = selects
      })

      this.fireForce.valueChanges.subscribe(values => {
        let selects:string[] = []
        values.forEach((selected:boolean,i:number) => {
          selected === true && selects.push(this.fireForceList[i].id)
        });
        this.selectedFireForceList = selects
      })
      this.linkageForces.valueChanges.subscribe(values => {
        let selects:string[] = []
        values.forEach((selected:boolean,i:number) => {
          selected === true && selects.push(this.linkageForcesList[i].id)
        });
        this.selectedLinkageForcesList = selects
      })
      this.unitSelected()
    })
  }

  //构造重点单位checkbox控制器
  buildUnits() {
    const arr = this.keyUnitList.map(item => {
      return this.fb.control(item.selected);
    });
    return this.fb.array(arr);
  }
  //构造水源checkbox控制器
  waterUnits() {
    const arr = this.waterList.map(item => {
      return this.fb.control(item.selected);
    });
    return this.fb.array(arr);
  }
  //构造消防力量checkbox控制器
  fireForceController() {
    const arr = this.fireForceList.map(item => {
      return this.fb.control(item.selected);
    });
    return this.fb.array(arr);
  }
  //构造联动力量checkbox控制器
  linkageForcesController() {
    const arr = this.linkageForcesList.map(item => {
      return this.fb.control(item.selected);
    });
    return this.fb.array(arr);
  }

  //初始化获取勾选项
  unitSelected(){
    this.keyUnitList.forEach(item => {
      if(item.selected){
        this.selectedUnitList.push(item.name)
      }
    })
    this.waterList.forEach(item => {
      if(item.selected){
        this.selectedWaterList.push(item.name)
      }
    })
    this.fireForceList.forEach(item => {
      if(item.selected){
        this.selectedFireForceList.push(item.name)
      }
    })
    this.linkageForcesList.forEach(item => {
      if(item.selected){
        this.selectedLinkageForcesList.push(item.name)
      }
    })
  }
  //地图范围圆圈---重点单位
  circle = new AMap.Circle({
    center: null,
    radius: 0, //半径
    strokeOpacity: 1, 
    fillOpacity: 0.4,
    strokeStyle: 'dashed',
    strokeDasharray: [10, 10], 
    // 线样式还支持 'dashed'
    fillColor: '#1791fc',
    zIndex: 50,
  })
  //地图范围圆圈---水源
  circleofwater = new AMap.Circle({
    center: null,
    radius: 0, //半径
    strokeOpacity: 1, 
    fillOpacity: 0.4,
    strokeStyle: 'dashed',
    strokeDasharray: [10, 10], 
    // 线样式还支持 'dashed'
    fillColor: '#ee2200',
    zIndex: 50,
  })
  //地图范围圆圈---消防力量
  circleoffireForce = new AMap.Circle({
    center: null,
    radius: 0, //半径
    strokeOpacity: 1, 
    fillOpacity: 0.4,
    strokeStyle: 'dashed',
    strokeDasharray: [10, 10], 
    // 线样式还支持 'dashed'
    fillColor: '#e830cc',
    zIndex: 50,
  })
  //地图范围圆圈---联动力量
  circleoflinkageForces = new AMap.Circle({
    center: null,
    radius: 0, //半径
    strokeOpacity: 1, 
    fillOpacity: 0.4,
    strokeStyle: 'dashed',
    strokeDasharray: [10, 10], 
    // 线样式还支持 'dashed'
    fillColor: '#f6a317',
    zIndex: 50,
  })


  //重点单位提交
  ketUnitSubmit(value){
    if(this.markers.length == 0){
      let paramsdata:any = {
        PageSize:99999,
        BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
      }
      this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
        this.createUnitMarker(data.items)
      })
    }else{
      this.circle.setRadius(Number(this.unitAreaDefault))
      this.circle.setCenter(this.markers[0]._position)
      this.circle.setMap(this.map)
      let Distance
      let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
      if(this.unitAreaDefault == '0'){
        this.circle.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
        Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) 
      }else{
        Distance = Math.abs(lnglat.offset(0, this.unitAreaDefault).lat - this.selectedUnit.location.y) 
      }
      if(this.unitAreaDefault == '-1'){//如果勾选全部
        let paramsdata:any = {
          PageSize:99999,
          BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
        }
        this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
          data.items.forEach((i,index) => {
            if(i.id == this.selectedUnit.id){
              data.items.splice(index,1)
            }
          })
          this.createUnitMarker(data.items)
        })
      }else{
        let paramsdata:any = {
          PageSize:99999,
          Lon : this.selectedUnit.location.x,
          Lat : this.selectedUnit.location.y,
          Distance : Distance,
          BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
        }
        this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
          data.items.forEach((i,index) => {
            if(i.id == this.selectedUnit.id){
              data.items.splice(index,1)
            }
          })
          this.createUnitMarker(data.items)
        })
      }
    }
  } 
  //创建单位markers
  unitCluster:any //重点单位点聚合实例
  createUnitMarker(list){
    let unitMarkerArrcluster = []
    this.unitCluster ? this.unitCluster.setData([]) : null
    list.forEach((item) => {
      let image
      if(item.buildingTypes[0].name.indexOf('高层') != -1){
        image = '/assets/images/Highbuilding.png'
      }else if(item.buildingTypes[0].name.indexOf('化工') != -1){
        image = '/assets/images/Chemicalindustry.png'
      }else if(item.buildingTypes[0].name.indexOf('餐饮') != -1){
        image = '/assets/images/canyin.png'
      }else if(item.buildingTypes[0].name.indexOf('厂房') != -1){
        image = '/assets/images/changfang.png'
      }else if(item.buildingTypes[0].name.indexOf('储罐') != -1){
        image = '/assets/images/chuguanlei.png'
      }else if(item.buildingTypes[0].name.indexOf('地下') != -1){
        image = '/assets/images/dixia.png'
      }else if(item.buildingTypes[0].name.indexOf('古建筑') != -1){
        image = '/assets/images/gujianzhu.png'
      }else if(item.buildingTypes[0].name.indexOf('轨道' || '地铁' || '交通') != -1){
        image = '/assets/images/guidaojiaotong.png'
      }else if(item.buildingTypes[0].name.indexOf('商场' || '超市') != -1){
        image = '/assets/images/shangchangchaoshi.png'
      }else if(item.buildingTypes[0].name.indexOf('隧道') != -1){
        image = '/assets/images/suidao.png'
      }else if(item.buildingTypes[0].name.indexOf('危化品') != -1){
        image = '/assets/images/weihuapin.png'
      }else if(item.buildingTypes[0].name.indexOf('学校' || '教育') != -1){
        image = '/assets/images/xuexiao.png'
      }else if(item.buildingTypes[0].name.indexOf('医院' || '医疗') != -1){
        image = '/assets/images/yiyuan.png'
      }else if(item.buildingTypes[0].name.indexOf('影' || '剧') != -1){
        image = '/assets/images/yingjuyuan.png'
      }else if(item.buildingTypes[0].name.indexOf('娱乐') != -1){
        image = '/assets/images/yule.png'
      }else if(item.buildingTypes[0].name.indexOf('展览' || '景点' || '景区') != -1){
        image = '/assets/images/zhanlanjianzhu.png'
      }else{
        image = '/assets/images/qita.png'
      }
      // 用于点集合的数组
      unitMarkerArrcluster.push({
        lnglat : [item.location.x,item.location.y],
        image : image,
        data : item
      })
    })
    this.map.plugin(["AMap.MarkerClusterer"],() => {
      var gridSize = 60
      var count = unitMarkerArrcluster.length;
      var _renderClusterMarker = function (context) {
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 5px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
      };
      var _renderMarker = (context)=> {
        var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
        var offset = new AMap.Pixel(-15, -15);
        context.marker.setContent(content)
        context.marker.setOffset(offset)
      }
      this.unitCluster = new AMap.MarkerCluster(this.map, unitMarkerArrcluster, {
        gridSize: gridSize, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
      this.unitCluster.on('click',(e)=>{
        if(e.clusterData.length == 1){
          let item = e.clusterData[0].data
          let markerContent = 
          `<div style="font-size: 14px" id="gispopupbox">
            <div style="color: #0080FF;"><span style="margin-left:8px">${item.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${item.address}</label> </div>
            <div style="display: flex; margin-top: 10px;margin-left:8px">
              <div style="width:240px; overflow: hidden;">单位性质: <label style="margin-left: 10px;font-size: 12px;">${item.buildingTypes.length? item.buildingTypes[0].name : "暂无数据"}</label></div>
              <div style="flex: 1; margin-left: 25px;">消防负责人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div>
            </div>
            <div style="display: flex; margin-top: 10px;margin-left:8px"">
              <div style="width:240px; overflow: hidden;">防火级别: <label style="margin-left: 10px;font-size: 12px;">二级</label></div>
              <div style="flex: 1; margin-left: 25px;">消防管理人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div>
            </div>
            <div style="display: flex; margin-top: 10px;margin-left:8px"">
              <div style="width:240px; overflow: hidden;">防火管辖: <label style="margin-left: 10px;font-size: 12px;">${item.organizationName || "暂无数据"}</label></div>
              <div style="flex: 1; margin-left: 25px;">防火监督员: <label style="margin-left: 10px;font-size: 12px;">李四15022215122</label></div>
            </div>
            <div style="display: flex; margin-top: 10px;margin-left:8px"">
              <div style="width:240px; overflow: hidden;">责任队站: <label style="margin-left: 10px;font-size: 12px;">安博消防救援站</label></div>
              <div style="flex: 1; margin-left: 25px;">总建筑面积: <label style="margin-left: 10px;font-size: 12px;">500平方米</label></div>
            </div>
            <div style="display: flex; margin-top: 10px;margin-left:8px"">
              <div style="width:240px; overflow: hidden;">建筑信息分类: <label style="margin-left: 10px;font-size: 12px;">建筑群</label></div>
              <div style="flex: 1; margin-left: 25px;">总占地面积: <label style="margin-left: 10px;font-size: 12px;">600平方米</label></div>
            </div>
            <div style="display: flex; margin-top: 10px;margin-left:8px"">
              <div style="width:240px; overflow: hidden;">值班电话: <label style="margin-left: 10px;font-size: 12px;">${item.phone || "暂无数据"}</label></div>
            </div>
            <div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
              <div class="btn" id="baseInformation"><img src="../../../assets/images/basicinfoicon.png" alt="">基本信息</div>
              <div class="btn" id="route"><img src="../../../assets/images/navicon.png" alt="">导航</div>
              <div class="btn" id="fullViewNavigation"><img src="../../../assets/images/panoramaicon.png" alt="">全景漫游</div>
              <div class="btn" id="threeeScene"><img src="../../../assets/images/3dicon.png" alt="">三维场景</div>
              <div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div>	
              <div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div>
            </div>
          </div>`
          // 创建一个自定义内容的 infowindow 实例
          this.infoWindow = new AMap.InfoWindow({
            position: [item.location.x,item.location.y],
            offset: new AMap.Pixel(0, -30),
            content: markerContent,
          });
          this.infoWindow.open(this.map);
          this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'),'click',(event)=>{ this.baseInformation(item) })//基本信息点击事件
          this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'),'click',(event)=>{ this.route(item) })//导航点击事件
          this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'),'click',(event)=>{ this.fullViewNavigation(item) })//全景漫游点击事件
          this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(item) })//三维场景点击事件
          this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(item) })//查看预案点击事件	
          this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(item) })//分享点击事件
        }
      })
    });
    
  }
  //取消显示单位
  resetUnit(){
    this.keyUnitForm.reset()
    this.keyUnitForm.controls.areaUnit.setValue('-1')
    this.map.remove(this.circle)
    this.unitCluster.setData([])
  }


  //消防力量提交
  fireForceSubmit(value){
    if(this.markers.length == 0){
      let paramsdata:any = {
        PageSize:99999,
        Levels : this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1
      }
      this.http.get("/api/CustomFireForce",{params:paramsdata}).subscribe((data:any) => {
        this.createFireForceMarker(data)
      })
    }else{
      this.circleoffireForce.setRadius(Number(this.fireForceAreaDefault))
      this.circleoffireForce.setCenter(this.markers[0]._position)
      this.circleoffireForce.setMap(this.map)
      let Distance
      let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
      if(this.fireForceAreaDefault == '0'){
        this.circleoffireForce.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
        Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) 
      }else{
        Distance = Math.abs(lnglat.offset(0, this.fireForceAreaDefault).lat - this.selectedUnit.location.y) 
      }
      if(this.fireForceAreaDefault == '-1'){//如果勾选全部
        let paramsdata:any = {
          PageSize:99999,
          Levels : this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1
        }
        this.http.get("/api/CustomFireForce",{params:paramsdata}).subscribe((data:any) => {
          this.createFireForceMarker(data)
        })
      }else{
        let paramsdata:any = {
          PageSize:99999,
          Lon : this.selectedUnit.location.x,
          Lat : this.selectedUnit.location.y,
          Distance : Distance,
          Levels : this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1
        }
        this.http.get("/api/CustomFireForce",{params:paramsdata}).subscribe((data:any) => {
          this.createFireForceMarker(data)
        })
      }
    }
  }
  //创建消防力量markers
  fireForceCluster:any //消防力量点聚合实例
  createFireForceMarker(list){
    let fireForceMarkerArrcluster = []
    this.fireForceCluster ? this.fireForceCluster.setData([]) : null
    list.forEach((item) => {
      let image
      if(item.forceType == 2){
        image = '/assets/fireForcesMarkers/qita.png'
      }else if(item.level == 0){
        image = '/assets/fireForcesMarkers/zongdui.png'
      }else if(item.level == 1){
        image = '/assets/fireForcesMarkers/zhidui.png'
      }else if(item.level == 2){
        image = '/assets/fireForcesMarkers/dadui.png'
      }else if(item.level == 3){
        image = '/assets/fireForcesMarkers/zhongdui.png'
      }
      // 用于点集合的数组
      item.fireForceDetailInfo.location ? 
      fireForceMarkerArrcluster.push({
        lnglat : [item.fireForceDetailInfo.location.x,item.fireForceDetailInfo.location.y],
        image : image,
        data : item
      }) : null
    })
    this.map.plugin(["AMap.MarkerClusterer"],() => {
      var gridSize = 60
      var count = fireForceMarkerArrcluster.length;
      var _renderClusterMarker = function (context) {
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 5px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
      };
      var _renderMarker = (context)=> {
        var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
        var offset = new AMap.Pixel(-15, -15);
        context.marker.setContent(content)
        context.marker.setOffset(offset)
      }
      this.fireForceCluster = new AMap.MarkerCluster(this.map, fireForceMarkerArrcluster, {
        gridSize: gridSize, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
    });
  }
  //取消消防力量
  resetFireForce(){
    this.fireForceForm.reset()
    this.fireForceForm.controls.areaFireForce.setValue('-1')
    this.map.remove(this.circleoffireForce)
    this.fireForceCluster.setData([])
  }




  //联动力量提交
  linkageForcesSubmit(value){
    console.log(this.selectedLinkageForcesList)
    if(this.markers.length == 0){
      let paramsdata:any = {
        PageSize : 999999,
        LinkageForceTypes:this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1
      }
      this.http.get("/api/LinkageForces",{params:paramsdata}).subscribe((data:any) => {
        console.log(data)
        this.createLinkageForcesMarker(data.items)
      })
    }else{
      this.circleoflinkageForces.setRadius(Number(this.linkageForcesAreaDefault))
      this.circleoflinkageForces.setCenter(this.markers[0]._position)
      this.circleoflinkageForces.setMap(this.map)
      let Distance
      let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
      if(this.linkageForcesAreaDefault == '0'){
        this.circleoflinkageForces.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
        Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) 
      }else{
        Distance = Math.abs(lnglat.offset(0, this.linkageForcesAreaDefault).lat - this.selectedUnit.location.y) 
      }
      if(this.linkageForcesAreaDefault == '-1'){//如果勾选全部
        let paramsdata:any = {
          PageSize : 999999,
          LinkageForceTypes:this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1
        }
        this.http.get("/api/LinkageForces",{params:paramsdata}).subscribe((data:any) => {
          this.createLinkageForcesMarker(data.items)
        })
      }else{
        let paramsdata:any = {
          PageSize:99999,
          Lon : this.selectedUnit.location.x,
          Lat : this.selectedUnit.location.y,
          Distance : Distance,
          LinkageForceTypes:this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1
        }
        this.http.get("/api/LinkageForces",{params:paramsdata}).subscribe((data:any) => {
          this.createLinkageForcesMarker(data.items)
        })
      }
    }
  }
  //创建联动力量markers
  linkageForcesCluster:any //联动力量点聚合实例
  createLinkageForcesMarker(list){
    let linkageForcesMarkerArrcluster = []
    this.linkageForcesCluster ? this.linkageForcesCluster.setData([]) : null
    list.forEach((item) => {
      let image
      if(item.linkageForceType == 0){//消火栓
        image = '/assets/linkageForcesMarkers/anjian.png'
      }else if(item.linkageForceType == 1){//消防水池
        image = '/assets/linkageForcesMarkers/dianliju.png'
      }else if(item.linkageForceType == 2){//天然联动力量
        image = '/assets/linkageForcesMarkers/gongan.png'
      }else if(item.linkageForceType == 3){//天然水源
        image = '/assets/linkageForcesMarkers/haishi.png'
      }else if(item.linkageForceType == 4){//天然水源
        image = '/assets/linkageForcesMarkers/huanbaoju.png'
      }else if(item.linkageForceType == 5){//天然水源
        image = '/assets/linkageForcesMarkers/jiaotong.png'
      }else if(item.linkageForceType == 6){//天然水源
        image = '/assets/linkageForcesMarkers/minzheng.png'
      }else if(item.linkageForceType == 7){//天然水源
        image = '/assets/linkageForcesMarkers/qixiangju.png'
      }else if(item.linkageForceType == 8){//天然水源
        image = '/assets/linkageForcesMarkers/ranqiju.png'
      }else if(item.linkageForceType == 9){//天然水源
        image = '/assets/linkageForcesMarkers/shizheng.png'
      }else if(item.linkageForceType == 10){//天然水源
        image = '/assets/linkageForcesMarkers/shuili.png'
      }else if(item.linkageForceType == 11){//天然水源
        image = '/assets/linkageForcesMarkers/tongxin.png'
      }else if(item.linkageForceType == 12){//天然水源
        image = '/assets/linkageForcesMarkers/yiliao.png'
      }else if(item.linkageForceType == 13){//天然水源
        image = '/assets/linkageForcesMarkers/yingjiguanli.png'
      }else if(item.linkageForceType == 14){//天然水源
        image = '/assets/linkageForcesMarkers/zhujian.png'
      }
      // 用于点集合的数组
      if(item.location && item.location.x){
        linkageForcesMarkerArrcluster.push({
          lnglat : [item.location.x,item.location.y],
          image : image,
          data : item
        })
      }
      // 用于点集合的数组
    })
    this.map.plugin(["AMap.MarkerClusterer"],() => {
      var gridSize = 60
      var count = linkageForcesMarkerArrcluster.length;
      var _renderClusterMarker = function (context) {
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 5px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
      };
      var _renderMarker = (context)=> {
        var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
        var offset = new AMap.Pixel(-15, -15);
        context.marker.setContent(content)
        context.marker.setOffset(offset)
      }
      this.linkageForcesCluster = new AMap.MarkerCluster(this.map, linkageForcesMarkerArrcluster, {
        gridSize: gridSize, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
    });
  }
  //取消联动力量
  resetLinkageForces(){
    this.linkageForcesForm.reset()
    this.linkageForcesForm.controls.areaLinkageForces.setValue('-1')
    this.map.remove(this.circleoflinkageForces)
    this.linkageForcesCluster.setData([])
  }





  //水源提交
  waterSubmit(value){
    if(this.markers.length == 0){
      if(this.selectedWaterList.length != 0){//勾选了水源类型
        let paramsdata:any = {
          PageSize:99999,
          WaterSourceTypes : this.selectedWaterList
        }
        this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
          this.createwaterMarker(data.items)
        })
      }else{
        let config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('请勾选想要显示的水源类型','确定',config);
      }  
    }else{
      this.circleofwater.setRadius(Number(this.waterAreaDefault))
      this.circleofwater.setCenter(this.markers[0]._position)
      this.circleofwater.setMap(this.map)
      let Distance
      let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
      
      //如果选择当前的视野范围算出查询半径
      if(this.waterAreaDefault == '0'){
        this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
        Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) 
      }else{
        Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.selectedUnit.location.y) 
      }
      //如果选择全部
      if(this.waterAreaDefault == '-1'){
        if(this.selectedWaterList.length != 0){
          let paramsdata:any = {
            PageSize:99999,
            WaterSourceTypes : this.selectedWaterList
          }
          this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
            this.createwaterMarker(data.items)
          })
        }else{
          let config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('请勾选想要显示的水源类型','确定',config);
        }
       
      }else{
        if(this.selectedWaterList.length != 0){
          let paramsdata:any = {
            PageSize:99999,
            Lon : this.selectedUnit.location.x,
            Lat : this.selectedUnit.location.y,
            Distance : Distance,
            WaterSourceTypes :this.selectedWaterList
          }
          this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
            this.createwaterMarker(data.items)
          })
        }else{
          let config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('请勾选想要显示的水源类型','确定',config);
        }
      }
    }
  }
  //循环渲染出所有水源markers
  waterCluster:any //水源聚合实例
  createwaterMarker(list){
    let waterMarkerArrcluster = []
    this.waterCluster ? this.waterCluster.setData([]) : null
    list.forEach((item) => {
      let image
      if(item.waterSourceType == 0){//消火栓
        image = '/assets/waterMarkers/szxhs.png'
      }else if(item.waterSourceType == 1){//消防水池
        image = '/assets/waterMarkers/fxcsc.png'
      }else if(item.waterSourceType == 2){//天然水源
        image = '/assets/waterMarkers/trsy.png'
      }
      // 用于点集合的数组
      waterMarkerArrcluster.push({
        lnglat : [item.location.x,item.location.y],
        image : image,
        data : item
      })
    })
    this.map.plugin(["AMap.MarkerClusterer"],() => {
      var gridSize = 60
      var count = waterMarkerArrcluster.length;
      var _renderClusterMarker = function (context) {
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 5px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
      };
      var _renderMarker = (context)=> {
        var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
        var offset = new AMap.Pixel(-15, -15);
        context.marker.setContent(content)
        context.marker.setOffset(offset)
      }
      this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, {
        gridSize: gridSize, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
      this.waterCluster.on('click',(e)=>{
        if(e.clusterData.length == 1){
         
        }
      })
    });
    
  }
  //取消显示水源
  resetWater(){
    this.watertForm.reset()
    this.watertForm.controls.areaWater.setValue('-1')
    this.map.remove(this.circleofwater)
    this.waterCluster.setData([])
  }


  //计算两地距离
  Calculationofdistance(bounds){
    let p1 = [bounds.northEast.lng, bounds.northEast.lat];
    let p2 = [bounds.northEast.lng, bounds.southWest.lat];
    // 返回 p1 到 p2 间的地面距离，单位：米
    let dis = AMap.GeometryUtil.distance(p1, p2);
    return dis
  }

  //全选重点单位
  selectedAllUnit(event){
    if(event.checked){
      this.units.controls.forEach(item => {item.setValue(true)})
    }else{
      this.keyUnitForm.reset() 
      this.keyUnitForm.controls.areaUnit.setValue('0')
    }
  }
  //全选水源
  selectedAllWater(event){
    if(event.checked){
      this.waters.controls.forEach(item => {item.setValue(true)})
    }else{
      this.watertForm.reset() 
      this.watertForm.controls.areaWater.setValue('0')
    }
  }
  //全选消防力量
  selectedAllFireForce(event){
    if(event.checked){
      this.fireForce.controls.forEach(item => {item.setValue(true)})
    }else{
      this.fireForceForm.reset() 
      this.fireForceForm.controls.areaFireForce.setValue('0')
    }
  }
  //全选联动力量
  selectedAllLinkageForces(event){
    if(event.checked){
      this.linkageForces.controls.forEach(item => {item.setValue(true)})
    }else{
      this.linkageForcesForm.reset() 
      this.linkageForcesForm.controls.areaLinkageForces.setValue('0')
    }
  }


 

  //右上角点击每一个title
  clickTitle(index){
    this.selectedTitle = index
  }
  closertdiv(){
    this.selectedTitle = null
  }

  //卫星图层
  satelliteLayer = new AMap.TileLayer.Satellite();
  satelliteModel:boolean = false
  satelliteChange(e){
    e.checked ? this.map.add(this.satelliteLayer) : this.map.remove(this.satelliteLayer);
  }

  //路网图层
  roadNetLayer =  new AMap.TileLayer.RoadNet();
  loadModel:boolean = false
  loadChange(e){
    e.checked ? this.map.add(this.roadNetLayer) : this.map.remove(this.roadNetLayer);
  }
  
  @ViewChild( 'appLeft',{static: false} ) appLeft:any //子组件
  leftDivState:boolean = false; //左侧工作区显示隐藏
  showLeftDiv:boolean = false//左侧工作区消失

  //左侧工作区显示隐藏
  toggleLeft (e) {
    this.leftDivState = e
  }

  //左侧工作区关闭
  closeDiv(){
    this.leftDivState = false
    this.showLeftDiv = false
  }

  map:any //地图
  markers:any = []; //markers标注

  //地图2D 3D切换
  mapPattern:boolean = true//默认是2D
  mapPatternChange(type){
    this.unitCluster = null
    this.waterCluster = null
    this.checkRadio = false
    if(type == '2D'){
      this.mapPattern = true
      this.mapInit()
    }else{
      this.unitCluster ? this.unitCluster.setData([]) : null
      this.mapPattern = false
      this.map = new AMap.Map('map',{
        viewMode: '3D',
        pitch: 60,
        rotation: -35,
        features: ['bg', 'road', 'point','building'],
        mapStyle: 'amap://styles/light',
      });
      this.map.setCity('上海市');
    }
    this.satelliteModel = false
    this.loadModel = false
  }

  //地图初始化
  mapInit () {
    let that = this
    var layer = new AMap.createDefaultLayer({
      zooms:[3,20],    //可见级别
      visible:true,    //是否可见
      opacity:1,       //透明度
      zIndex:0,         //叠加层级
      resizeEnable: true //是否监控地图容器尺寸变化,
    })
    that.map = new AMap.Map('map',{
      layers:[layer], //当只想显示标准图层时layers属性可缺省,
    });

    that.map.setCity('上海市');
    AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],function () {
    that.mouseTool=new AMap.MouseTool(that.map);
    });

  }

  searchText:string; //搜索单位名称
  allCompany = []; //搜索到 匹配的单位
  
  measureDistance; //测距离
  distanceList = []; //测距离 点和线
  measureArea; //测面积
  mouseTool;//二合一测距和侧面积
  checkRadio=false //判断测距和侧面积是否选中
  
  //测距离 开始
  startDistance(){
    this.measureArea.close(false)
    this.measureDistance.turnOn()
  }

  //侧面积 开始
  startArea(){
    this.measureDistance.turnOff()
    this.measureArea.measureArea({
      strokeColor:'#80d8ff',
      fillColor:'#80d8ff',
      fillOpacity:0.3
      //同 Polygon 的 Option 设置
    });
  }

  //清空距离测量
  clearDistance(){
    this.distanceList.forEach(item=>{
      if (item.className == 'AMap.Marker') {
        let parent = item.dom.parentNode
        let children = item.dom.nextElementSibling
        parent && children? parent.removeChild(item.dom.nextElementSibling) : null
        this.map.remove(item)
      } else {
        this.map.remove(item)
      }
    })
    this.distanceList = [] //清空数组
  }

  //清空面积测量
  clearArea(){
    this.measureArea.close(true)
  }
  //合并测距和侧面积
  measure(type){
    switch(type){
      case 'rule':{
          this.mouseTool.rule({
              startMarkerOptions : {//可缺省
                  icon: new AMap.Icon({
                      size: new AMap.Size(19, 31),//图标大小
                      imageSize:new AMap.Size(19, 31),
                      image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
                  })
              },
              endMarkerOptions : {//可缺省
                  icon: new AMap.Icon({
                      size: new AMap.Size(19, 31),//图标大小
                      imageSize:new AMap.Size(19, 31),
                      image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
                  }),
                  offset: new AMap.Pixel(-9, -31)
              },
              midMarkerOptions : {//可缺省
                  icon: new AMap.Icon({
                      size: new AMap.Size(19, 31),//图标大小
                      imageSize:new AMap.Size(19, 31),
                      image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
                  }),
                  offset: new AMap.Pixel(-9, -31)
              },
              lineOptions : {//可缺省
                  strokeStyle: "solid",
                  strokeColor: "#FF33FF",
                  strokeOpacity: 1,
                  strokeWeight: 2
              }
              //同 RangingTool 的 自定义 设置，缺省为默认样式
          });
          break;
      }
      case 'measureArea':{
        this.mouseTool.measureArea({
              strokeColor:'#80d8ff',
              fillColor:'#80d8ff',
              fillOpacity:0.3
            //同 Polygon 的 Option 设置
          });
          break;
      }
    }
  }
  //合并清空
  clearnAll(){
    this.mouseTool.close(true)
    this.checkRadio=false
  }

  //搜索
  search () {
    this.allCompany = []
    let paramsdata:any = {Name: this.searchText || ''}
    this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any)=>{
      this.allCompany = data.items
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open(`搜索目标结果为${data.items.length}个`,'确定',config);
    })
  }

  //清除
  clear () {
    this.allCompany = []
    this.searchText = ''
    this.markers ? this.markers.forEach((element,index) => { this.map.remove(element);}) : null
    this.infoWindow ? this.map.remove(this.infoWindow) : null
  }

  selectedUnit:any//当前打开的单位

  //选择 单位 地图跳转
  //弹窗实例
  infoWindow:any
  selectCompany (e) {
    if (e.location && e.location.x && e.location.y) {
      this.selectedUnit = e
      this.markers.forEach((element,index) => { this.map.remove(element);});  //先删除所有标点
      this.markers = []

      let marker = new AMap.Marker({
        map: this.map,
        position: [e.location.x,e.location.y], // 基点位置,
      });
      this.markers.push(marker)

      let markerContent = `<div style="font-size: 14px" id="gispopupbox">
      <div style="color: #0080FF;"><span style="margin-left:8px">${e.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${e.address}</label> </div>
      <div style="display: flex; margin-top: 10px;margin-left:8px">
        <div style="width:240px; overflow: hidden;">单位性质: <label style="margin-left: 10px;font-size: 12px;">${e.buildingTypes.length? e.buildingTypes[0].name : "暂无数据"}</label></div>
        <div style="flex: 1; margin-left: 25px;">消防负责人: <label style="margin-left: 10px;font-size: 12px;">${e.contacts || "暂无数据"}</label></div>
      </div>
      <div style="display: flex; margin-top: 10px;margin-left:8px"">
        <div style="width:240px; overflow: hidden;">防火级别: <label style="margin-left: 10px;font-size: 12px;">二级</label></div>
        <div style="flex: 1; margin-left: 25px;">消防管理人: <label style="margin-left: 10px;font-size: 12px;">${e.contacts || "暂无数据"}</label></div>
      </div>
      <div style="display: flex; margin-top: 10px;margin-left:8px"">
        <div style="width:240px; overflow: hidden;">防火管辖: <label style="margin-left: 10px;font-size: 12px;">${e.organizationName || "暂无数据"}</label></div>
        <div style="flex: 1; margin-left: 25px;">防火监督员: <label style="margin-left: 10px;font-size: 12px;">李四15022215122</label></div>
      </div>
      <div style="display: flex; margin-top: 10px;margin-left:8px"">
        <div style="width:240px; overflow: hidden;">责任队站: <label style="margin-left: 10px;font-size: 12px;">安博消防救援站</label></div>
        <div style="flex: 1; margin-left: 25px;">总建筑面积: <label style="margin-left: 10px;font-size: 12px;">500平方米</label></div>
      </div>
      <div style="display: flex; margin-top: 10px;margin-left:8px"">
        <div style="width:240px; overflow: hidden;">建筑信息分类: <label style="margin-left: 10px;font-size: 12px;">建筑群</label></div>
        <div style="flex: 1; margin-left: 25px;">总占地面积: <label style="margin-left: 10px;font-size: 12px;">600平方米</label></div>
      </div>
      <div style="display: flex; margin-top: 10px;margin-left:8px"">
        <div style="width:240px; overflow: hidden;">值班电话: <label style="margin-left: 10px;font-size: 12px;">${e.phone || "暂无数据"}</label></div>
      </div>
      <div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
        <div class="btn" id="baseInformation"><img src="../../../assets/images/basicinfoicon.png" alt="">基本信息</div>
        <div class="btn" id="route"><img src="../../../assets/images/navicon.png" alt="">导航</div>
        <div class="btn" id="fullViewNavigation"><img src="../../../assets/images/panoramaicon.png" alt="">全景漫游</div>
        <div class="btn" id="threeeScene"><img src="../../../assets/images/3dicon.png" alt="">三维场景</div>
        <div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div>	
        <div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div>
      </div>
      </div>`
      // 创建一个自定义内容的 infowindow 实例
      this.infoWindow = new AMap.InfoWindow({
        position: [e.location.x,e.location.y],
        offset: new AMap.Pixel(0, -30),
        content: markerContent,
      });
      this.infoWindow.open(this.map);
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'),'click',(event)=>{ this.baseInformation(e) })//基本信息点击事件
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'),'click',(event)=>{ this.route(e) })//导航点击事件
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'),'click',(event)=>{ this.fullViewNavigation(e) })//全景漫游点击事件
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(e) })//三维场景点击事件
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件	
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件
      marker.on('click', (ev) => { //marker点击事件
        this.infoWindow = new AMap.InfoWindow({
          position: [e.location.x,e.location.y],
          offset: new AMap.Pixel(0, -30),
          content: markerContent,
        });
        this.infoWindow.open(this.map);
        this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'),'click',(event)=>{ this.baseInformation(e) })//基本信息点击事件
        this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'),'click',(event)=>{ this.route(e) })//导航点击事件
        this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'),'click',(event)=>{ this.fullViewNavigation(e) })//全景漫游点击事件
        this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(e) })//三维场景点击事件
        this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件	
        this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件
      })
      this.map.setZoomAndCenter(13,[marker._position[0],marker._position[1]+0.015]); //设置地图中心点
      this.allCompany = []
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请完善单位地理位置','确定',config);
    }
  }

  //基本信息
  baseInformation (e) {
    this.leftDivState = true
    this.showLeftDiv = true
    this.appLeft.selectBaseInfo(e) //调用子组件方法
  }
  
  //导航
  route (e) {
    this.leftDivState = false
    this.showLeftDiv = false
    this.isShowRouteGIS = true
    this.routeEnd = e.name
    this.endCoordinate = new AMap.LngLat(e.location.x, e.location.y)
  }

  //全景漫游
  fullViewNavigation (e) {
    console.log(e,'全景漫游')
  }

  //三维场景
  threeeScene (e) {
    window.open('http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/')
  }

  //查看预案
  seePlan (e) {
    let data = e
    let dialogRef = this.dialog.open(LookPlanDialog,{//调用open方法打开对话框并且携带参数过去
      width: '1400px',
      height:'800px',
      id:'lookPlanDialog',
      data
    });
    dialogRef.afterClosed().subscribe((data)=>{
        
    });
  }

  //分享
  share (e) {
    let data = {
      url:'https://www.baidu.com/',
      buildingType:e.buildingTypes[0].name,
      address:e.address
    }
    let dialogRef = this.dialog.open(ShareUrlDialog,{//调用open方法打开对话框并且携带参数过去
      width: '540px',
      height:'596px',
      id:'shareDialog',
      data});
    dialogRef.afterClosed().subscribe((data)=>{

    });
  }
  
  //导航路线
  isShowRouteGIS:boolean = false; //导航路线 显隐
  routeStart:any; //起点
  routeStartList:any = [] //起点 搜索结果
  routeEnd:any; //终点
  routeEndList:any = [] //终点 搜索结果
  timeout:any; //延时器
  routeGIS:any; //查询结果  规划路线
  selectType:boolean = true; //路线选择 推荐方案/躲避用拥堵

  //关闭导航路线
  closeRouteGIS () {
    this.isShowRouteGIS = false
  }

  //输入框 输入事件
  routeChange (e) {
    let that = this
    window.clearTimeout(this.timeout)
    this.timeout = window.setTimeout(()=>{

      that.map.getCity( function(info){ //获取当前 city
        AMap.plugin(['AMap.AutoComplete'], () =>{
          var autoOptions = {city: info.city} 
          let keywords
          e == 0 ? keywords = that.routeStart : keywords = that.routeEnd
          var autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(keywords, function(status, result) {
            if (result && result.tips && result.tips.length) { //搜索到数据时
              that._ngZone.run(()=>{ 
                if(e == 0){//起点
                  that.routeStartList = result.tips
                  if(result.tips.length != 0){
                    for (let index = 0; index < result.tips.length; index++) {
                      const element = result.tips[index];
                      if(element.location){
                        that.startCoordinate = new AMap.LngLat(element.location.lng, element.location.lat)
                        return
                      }
                    }
                  }
                }else{//终点
                  that.routeEndList = result.tips 
                  that.endCoordinate = new AMap.LngLat(result.tips[0].location.lng, result.tips[0].location.lat)
                }
              });
            
            } //if
          })
        })
      }); //获取当前 city 

    },500)
  }

  //清空导航输入框
  deleteSearchGIS (e) {
    if (e==0) {
      this.routeStart = null
      this.routeStartList = []
      this.startCoordinate = null
    } else {
      this.routeEnd = null
      this.routeEndList = []
      this.endCoordinate = null
    }
  }

  //清除路线
  clearGISRoute () {
    this.routeStart = null
    this.routeStartList = []
    this.routeEnd = null
    this.routeEndList = []
    this.startCoordinate = null
    this.endCoordinate = null
    this.routeGIS? this.routeGIS.clear() : null
    this.routes = { distance: 0, time: 0, steps: [], }
    this.map.setZoomAndCenter(13,[this.selectedUnit.location.x,this.selectedUnit.location.y]); //设置地图中心点
  }

  //交换起始点
  exchangeGISRoute () {
    let data = this.routeStart
    this.routeStart = this.routeEnd
    this.routeEnd = data
    this.routeStartList = []
    this.routeEndList = []
    let data2 = this.startCoordinate
    this.startCoordinate = this.endCoordinate
    this.endCoordinate = data2
  }

  routes:any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划

  startCoordinate:any//开始坐标 
  endCoordinate:any//结束坐标 

  //导航查询
  queryGISRoute () {
    //构造路线导航类
    let that = this
    this.selectType = true
    this.routeGIS? this.routeGIS.clear() : null
    this.routeGIS = new AMap.Driving({
      map: this.map,
    });
    if(!this.startCoordinate){
      let config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('未查询到起点坐标信息，请输入有效地址','确定',config);
      return
    }else if(!this.startCoordinate){
      let config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('未查询到终点坐标信息，请输入有效地址','确定',config);
      return
    }else{
      this.routeGIS.search(this.startCoordinate,this.endCoordinate,
        function(status, result) {
          if (status === 'complete') {
            that.routes = result.routes[0]
          } else { alert('获取驾驶规划路线失败') }
        }
      );
    }
   
  }

  //切换 导航模式 推荐方案/躲避拥堵
  toggleRoute (e) {
    let that = this
    if (this.selectType != e) {
      this.selectType = e
      this.routeGIS? this.routeGIS.clear() : null
      this.routeGIS = new AMap.Driving({
        map: this.map,
        policy: e==true? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC
      }); 
      // 根据起终点名称规划驾车导航路线
     
      this.routeGIS.search(this.startCoordinate,this.endCoordinate,
        function(status, result) {
          if (status === 'complete') {
            that.routes = result.routes[0]
          } else { alert('获取驾驶规划路线失败') }
        }
      );
    }
  }



}



//分享
@Component({
  selector: 'shareUrl-dialog',
  templateUrl: './shareUrl.html',
  styleUrls: ['./shareUrl.scss']
})
export class ShareUrlDialog {

  constructor(public http: HttpClient,public snackBar: MatSnackBar,
  public dialogRef: MatDialogRef<ShareUrlDialog>,
  @Inject(MAT_DIALOG_DATA) public data,private render2: Renderer2) {}

  selectetime:any = [{id:0,name:'今日有效'},{id:1,name:'本周有效'},{id:2,name:'本月有效'},{id:3,name:'仅一次有效'}]
  selectedTimeIndex = 0
  ngOnInit() {
      this.makeCode()
  }
  //生成二维码
  qrCode
  makeCode () {  
    this.qrCode =  new QRCode(document.getElementById("qrcode"),{
      text: this.data.url,
      width: 200,
      height: 200,
      colorDark : "#000000",
      colorLight : "#ffffff",
      correctLevel : QRCode.CorrectLevel.H
    });
  }
  //下载二维码
  downloadFile () {
      let canvas = this.qrCode._el.querySelector("canvas")
      var base64Text = canvas.toDataURL("image/png");
      let url = base64Text //createObjectURL创建一个下载Blob的url地址
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", '二维码');
      document.body.appendChild(link);
      link.click();
  }
  //复制链接
  copyUrl(){
    var copyTest = this.data.url
    var inputTest = document.createElement('input')
    inputTest.value = copyTest
    document.body.appendChild(inputTest)
    inputTest.select()
    document.execCommand('Copy')
    inputTest.className = 'oInput'
    inputTest.style.display = 'none'
    const config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    this.snackBar.open('复制链接成功','确定',config);
  }
  selectedTime(index){
    if(this.selectedTimeIndex != index){
      this.selectedTimeIndex = index
      this.qrCode.clear(); 
      if(index == 0){//如果今日有效
        console.log("今日")
      }
      if(index == 1){//如果本周有效
        console.log("本周")
        this.qrCode.makeCode("http://www.w3cschool.cc")
      }
      if(index == 2){//如果本月有效
        console.log("本月")
      }
      if(index == 3){//如果仅一次有效
        console.log("一次")
      }
    }
  }
  //关闭
  closeDiv(){
    this.dialogRef.close()
  }
}



//查看预案
@Component({
  selector: 'lookPlan-dialog',
  templateUrl: './lookPlan.html',
  styleUrls: ['./lookPlan.scss']
})
export class LookPlanDialog {

  constructor(public http: HttpClient,public snackBar: MatSnackBar,
  public dialogRef: MatDialogRef<LookPlanDialog>,
  @Inject(MAT_DIALOG_DATA) public data,private render2: Renderer2,public dialog: MatDialog) {}


  ngOnInit() {
    // console.log(this.data)
    this.getAllPlans()
  }
  //关闭弹窗
  closeDiv(){
    this.dialogRef.close()
  }
  //查看单位详情
  lookUnitDetails(){
    window.open(`/keyUnit/viewunitinfo?id=${this.data.id}`)
  }
  //获得所有预案组件
  allPlanComponents:any//所有预案组件
  getAllPlans(){
    let paramsData:any = {
      companyId:this.data.id,
      pageNumber: 1,
      pageSize: "100",
      sort: ""
    }
    this.http.get("/api/PlanComponents",{params:paramsData}).subscribe((data:any)=>{
      this.allPlanComponents = data.items
    })
  }
  //查看预案
  lookPlan(e){
    if(e.planMode == 0){ 
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('本地文件，请下载查看','确定',config);
    }
    if(e.planMode == 1){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('查看导入word文件','确定',config);
    }
    if(e.planMode == 2){  //如果是在线编辑
      let id = e.id 
      sessionStorage.setItem("planId",id)
      sessionStorage.setItem("companyId",this.data.id)
      sessionStorage.setItem("buildingTypeId",this.data.buildingTypes[0].id)
      sessionStorage.setItem("editable","0")
      sessionStorage.setItem("planName",e.name)
      let companyId = sessionStorage.getItem("companyId")
      window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`);
    }
    if(e.planMode == 3){  //如果是跳转网页
      sessionStorage.setItem("url",e.url)
      window.open(`/planManagement/webLook`)
    }
  }

  //点击下载
  readFile(element){
    this.uploadFileLonging = element
    let data =element
    const dialogRef = this.dialog.open(DownloadFile, {
      width:"435px",
      data
    });
    dialogRef.afterClosed().subscribe(
      data=>{
        if(data){
          this.downloadFileName = data.fileName
          this.download = data
          this.downloadFile()
        }
      }
    );
  }

  //下载↓
  selectDownloadFile:any; //选择下载的文件
  download:any; //下载文件元数据
  downloadFileName:any //下载文件的文件名
  downloadisLoading:boolean = false; //进度条loading是否加载
  downloadProgress:number = 0; //进度条进度 
  
  uploadFileLonging:any
  downloadFile(){
    this.downloadProgress = 0
    let file = this.download
    let fileSize = file.fileLength//下载文件的总大小
    let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB

    if (file && fileSize<=shardSize) { //<=10MB时直接下载
      this.downloadisLoading = true
      this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{
        let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let suffix = file.objectName.substring(file.objectName.lastIndexOf(".")+1,file.objectName.length) ;
        link.setAttribute("download", file.fileName ? file.fileName : this.data.name + "-" +this.uploadFileLonging.name + "." + suffix);
        document.body.appendChild(link);
        link.click();
        this.downloadisLoading = false
      })
    } else if (file &&  fileSize > shardSize) { //>10MB时分块下载
      this.blockingDownload() //分段下载
      this.downloadisLoading = true
    }
  }
  //分段下载并合并
  async blockingDownload () {
    let file = this.download
    let fileSize = file.fileLength //下载文件的总大小
    let shardSize = 3 * 1024 * 1024 //3MB一个分片
    let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
    let allFile:any = [] //所有的file分段

    for (let i=0;i<allSlice;i++) {
      let start = i * shardSize //每次下载文件开始位置
      let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止

      let result =  await new Promise ((result,reject)=>{
        this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{
          result(data) }) 
      })
      allFile.push(result)



      if (allFile.length === allSlice) { //合并文件输出给浏览器
        let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let suffix = file.objectName.substring(file.objectName.lastIndexOf(".")+1,file.objectName.length) ;
        link.setAttribute("download", file.fileName ? file.fileName : this.data.unitname + "-" +this.uploadFileLonging.name + "." + suffix);
        document.body.appendChild(link);
        link.click();
        this.downloadisLoading = false
      }

    } //for循环

  }

  //取消分块下载
  cancelDowload () {
  }
}



//下载文件弹出框
@Component({
  selector: 'downloadfile',
  templateUrl: './downloadFile.html',
  styleUrls: ['./downloadFile.scss']
})
export class DownloadFile {
  
  constructor(private http: HttpClient,public dialogRef: MatDialogRef<DownloadFile>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
  name:any //如果真实姓名为空时
  fileUrls:any //当前预案附件地址数组
  fileDatas:any = [] //用于循环的数组
  selectedFileIndex : any = 0
  selectedFileData : any 

  ngOnInit(): void {
    // console.log(this.data)
    this.name = this.data.name
    this.fileUrls = this.data.attachmentUrls
    this.fileUrls.forEach(item=>{
      this.http.get('/api/ObjectMetadata/PlanPlatform/'+item).subscribe((data:any)=>{
        data.filePige = (data.fileLength / (1024*1024)).toFixed(2)
        this.fileDatas.push(data)
        this.selectedFileData = data
      })
    })
   
  }

  //取消
  onNoClick(): void {
    this.dialogRef.close();
  }
  //确定
  confirm(){
    this.dialogRef.close(this.selectedFileData);
  }
  
  //点击想要下载的文件
  addurl(item,key){
    // console.log(item,key)
    this.selectedFileIndex = key
    this.selectedFileData = item
  }
}