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';
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:any //地图
  watertForm:FormGroup //gis右上角水源表单
  waterList = [ 
    {id:'0',name:'消火栓',selected:true},
    {id:'1',name:'消防水池',selected:true},
    {id:'2',name:'天然水源',selected:true},
  ]
  waterAreaDefault:any = '5000' //默认水源范围
  selectedWaterList:any = [] //选择提交的水源
  //地图范围圆圈---水源
  circleofwater = new AMap.Circle({
    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 = new AMap.LngLat(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{
      let paramsdata:any = {
        PageSize:99999,
        Lon : this.unitData.location.x,
        Lat : this.unitData.location.y,
        Distance : Distance,
        WaterSourceTypes :this.selectedWaterList
      }
      // console.log('paramsdata',paramsdata)
      this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
        // console.log('所有水源',data)
        this.createwaterMarker(data.items)
      })
    }
      
  }


  //循环渲染出所有水源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/市政消火栓.png'
      }else if(item.waterSourceType == 1){//消防水池
        image = '/assets/waterMarkers/方形储水池.png'
      }else if(item.waterSourceType == 2){//天然水源
        image = '/assets/waterMarkers/天然水源.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(-12.5, -12.5);
        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('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 间的地面距离，单位：米
    let dis = AMap.GeometryUtil.distance(p1, p2);
    return dis
  }

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

  //地图初始化
  unitMarker:any//单位标点
  newPositionMarkerContent:any  = 
  '<div class="custom-content-marker">' +
  '   <img style="width:20px;height:26px" src="/assets/images/定位.png">' +
  '</div>'
  creatMap(){
    this.map = new AMap.Map('center',{
      zoom: 13, //初始地图级别
    });
    if(this.unitData.location && this.unitData.location.x){
      this.map.setCenter([this.unitData.location.x,this.unitData.location.y]);
      this.unitMarker = new AMap.Marker({
        position: [this.unitData.location.x,this.unitData.location.y],
        content: this.newPositionMarkerContent,
        offset: new AMap.Pixel(-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);
    }
    
  }



}