ShangHaiYuan-AnXin/src/app/key-unit/water-road/water-road.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, ElementRef, Inject, OnInit, Renderer2 } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { MapFactory } from '@src/modules/map/declare/factory';
import { ICircle, IMap, IMarker } from '@src/modules/map/declare/map';
declare var AMap: any;

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

  constructor(private http: HttpClient,public renderer2: Renderer2,public snackBar: MatSnackBar,public dialog: MatDialog,private fb: FormBuilder,private route:ActivatedRoute) { }

  //获得单位信息
  unitData:any
  
  async getUnitData(){
    await new Promise((resolve, reject) =>{
      this.http.get(`/api/Companies/${this.route.snapshot.queryParams.id}`).subscribe(data => {
        this.unitData = data
        resolve(data)
      })
    }) 
  }

  map:IMap //地图
  watertForm:FormGroup //gis右上角水源表单
  waterList = [ 
    {id:'0',name:'消火栓',selected:true},
    {id:'1',name:'消防水池',selected:true},
    {id:'2',name:'天然水源',selected:true},
    {id:'3',name:'总队',selected:true},
    {id:'4',name:'支队',selected:true},
    {id:'5',name:'大队',selected:true},
    {id:'6',name:'中队(消防站)',selected:true},
    {id:'7',name:'其他消防队伍',selected:true}
  ]

  fireForceList:any[] = [
  
  ]
  waterAreaDefault:any = '5000' //默认水源范围
  selectedWaterList:any = [] //选择提交的水源
  //地图范围圆圈---水源
  circleofwater:ICircle = MapFactory.CircleInstance({
    center: null,
    radius: 0, //半径
    strokeOpacity: 1, 
    fillOpacity: 0.4,
    strokeStyle: 'dashed',
    strokeDasharray: [10, 10], 
    // 线样式还支持 'dashed'
    fillColor: '#1791fc',
    zIndex: 50,
  })

  async ngOnInit(): Promise<void> {
    this.watertForm = this.fb.group({
      waters:this.waterUnits(),
      allSelectedWater:new FormControl(),
      areaWater:new FormControl()
    })
    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.waterList.forEach(item => {
      if(item.selected){
        this.selectedWaterList.push(item.id)
      }
    })
    await this.getUnitData()
    setTimeout(() => {
      this.creatMap()
    }, 0);
  }

  get waters():any{
    return this.watertForm.get('waters')
  }

  //全选水源
  selectedAllWater(event){
    if(event.checked){
      this.waters.controls.forEach(item => {item.setValue(true)})
    }else{
      this.watertForm.reset() 
      this.watertForm.controls.areaWater.setValue('0')
    }
  }

  //水源提交
  waterSubmit(value){
    if(!this.unitMarker){
      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.unitMarker._position)
      this.circleofwater.setMap(this.map)

      let Distance
      let lnglat = MapFactory.LngLatInstance(this.unitData.location.x, this.unitData.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.unitData.location.y)
      }else{
        Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.unitData.location.y) 
      }
      this.getWaterData(Distance)
    }
  }

  //获得水源列表
  getWaterData(Distance){
    if(this.selectedWaterList.length == 0){
      let config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择要显示的类型','确定',config);
    }else{
      
      console.log('选中的内容',this.selectedWaterList)
      function checkAdult(item) {
        return item <= 2;
      }
      function checkAdult2(item) {
        return item >= 3;
      }
      const water = this.selectedWaterList.filter(checkAdult);
      const power = this.selectedWaterList.filter(checkAdult2);
      console.log('water',water)
      console.log('power',power)
      let waterparamsdata:any = {
        PageSize:99999,
        Lon : this.unitData.location.x,
        Lat : this.unitData.location.y,
        Distance : Distance,
        WaterSourceTypes :water
      }
      let powerparamsdata:any = {
        PageSize:99999,
        Lon : this.unitData.location.x,
        Lat : this.unitData.location.y,
        Distance : Distance,
        WaterSourceTypes :power
      }
      if( water.length == 0 ){
        this.http.get("/api/CustomFireForce",{params:powerparamsdata}).subscribe((data2:any) => {
          this.createwaterMarker(data2)
        })
      }else if( power.length == 0 ){
        this.http.get("/api/WaterSources",{params:waterparamsdata}).subscribe((data:any) => {
          this.createwaterMarker(data.items)
        })
      }else{
        this.http.get("/api/WaterSources",{params:waterparamsdata}).subscribe((data:any) => {
          this.http.get("/api/CustomFireForce",{params:powerparamsdata}).subscribe((data2:any) => {
            let allData =  [...data.items,...data2]
            this.createwaterMarker(allData)
          })
        })
      }
      
    }
      
  }


  //循环渲染出所有水源markers
  waterCluster:any //水源聚合实例
  createwaterMarker(list){
    let waterMarkerArrcluster = []
    this.waterCluster ? this.waterCluster.setData([]) : null
    list.forEach((item) => {
      let image
      if(item.waterSourceType == 0 || item.waterSourceType == 1 || item.waterSourceType == 2){
        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'
        }
        // 用于点集合的数组
        item.location ? waterMarkerArrcluster.push({
          lnglat : [item.location.x,item.location.y],
          image : image,
          data : item
        }) : null
      }else{
        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 ? 
        waterMarkerArrcluster.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 = waterMarkerArrcluster.length;

      let render = MapFactory.RenderClusterMarkerInstance();
      render.contentRender = (contextCount) => {
          var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount;
          div.style.lineHeight = size + 'px';
          div.style.color = fontColor;
          div.style.fontSize = '14px';
          div.style.textAlign = 'center';
          return div;
      };
      render.pixelRender = (contextCount) => {
          var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
          return MapFactory.PixelInstance(-size / 2, -size / 2);
      };

      render.contentNonRender = (src) => {
          return `<img class='clusterImgCollection' src="${src}" alt="">`;
      };
      render.pixelNonRender = () => {
          return MapFactory.PixelInstance(-15, -15);
      }
      this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
        gridSize: gridSize, // 设置网格像素大小
        render: render //自定义聚合点样式, 自定义非聚合点样式
      });
      this.waterCluster.on('click',(e)=>{
        if(e.clusterData.length == 1){
         
        }
      })
    });
    
  }

  //取消显示水源
  resetWater(){
    this.watertForm.reset()
    this.watertForm.controls.areaWater.setValue('0')
    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 间的地面距离，单位：米
    return this.map.distance(p1, p2);
  }

  //构造水源checkbox控制器
  waterUnits() {
    const arr = this.waterList.map(item => {
      return this.fb.control(item.selected);
    });
    return this.fb.array(arr);
  }

  //地图初始化
  unitMarker:IMarker//单位标点
  newPositionMarkerContent:any  = 
  '<div class="custom-content-marker">' +
  '   <img style="width:20px;height:26px" src="/assets/images/dingwei.png">' +
  '</div>'
  creatMap(){
    this.map = MapFactory.MapInstance('center',{
      zoom: 13, //初始地图级别
    });
    if(this.unitData.location && this.unitData.location.x){
      this.map.setCenter([this.unitData.location.x,this.unitData.location.y]);
      this.unitMarker = MapFactory.MarkerInstance({
        position: [this.unitData.location.x,this.unitData.location.y],
        content: this.newPositionMarkerContent,
        offset: MapFactory.PixelInstance(-10, -13)
      })
      // 将 markers 添加到地图
      this.map.add(this.unitMarker);
      this.waterSubmit(1)
    }else{
      this.map.setCity('上海市');
      let config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请先前往基本信息标注单位位置','确定',config);
    }
    
  }



}