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

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';
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(public renderer2: Renderer2,public snackBar: MatSnackBar,public dialog: MatDialog,private fb: FormBuilder) { }

  map:any //地图
  markers:any = [{_position: [121.472644,31.231706]}] //当前单位坐标
  watertForm:FormGroup //gis右上角水源表单
  waterList = [ 
    {id:'0',name:'消火栓',selected:false},
    {id:'1',name:'消防水池',selected:false},
    {id:'2',name:'天然水源',selected:false},
  ]
  waterAreaDefault:any = '0' //默认水源范围
  selectedWaterList:any = [] //选择提交的水源
  //地图范围圆圈---水源
  circleofwater = new AMap.Circle({
    center: null,
    radius: 0, //半径
    strokeOpacity: 1, 
    fillOpacity: 0.4,
    strokeStyle: 'dashed',
    strokeDasharray: [10, 10], 
    // 线样式还支持 'dashed'
    fillColor: '#ee2200',
    zIndex: 50,
  })

  ngOnInit(): 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.name)
      }
    })
    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.markers.length == 0){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请先选择一个单位','确定',config);
    }else{
      this.createwaterMarker()
      this.circleofwater.setRadius(Number(this.waterAreaDefault))
      this.circleofwater.setCenter(this.markers[0]._position)
      this.circleofwater.setMap(this.map)
      if(this.waterAreaDefault == '0'){
        this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
      }
    }
  }

  waterIconList = []; //展示的水源图标

  //循环渲染出所有水源markers
  createwaterMarker(){
    this.waterIconList.forEach((element,index) => { this.map.remove(element) });  //先删除所有标点
    this.waterIconList = []
    let waterType = this.selectedWaterList //筛选出展示的 水源类型
    if (waterType.length) {
      let x = JSON.parse( JSON.stringify(this.markers[0]._position[0]) ) //中心标注的 坐标
      let y = JSON.parse( JSON.stringify(this.markers[0]._position[1]) ) //中心标注的 坐标
      let positonList = [0.015, -0.035, 0.045, 0.061, -0.013, 0.029]
      // 创建一个 Icon
      let startIcon = new AMap.Icon({
        image: '../../../assets/images/fireHydrant.png',
        imageSize: new AMap.Size(20, 20),
      });
      positonList.forEach((item,index)=>{
        let marker = new AMap.Marker({
          map: this.map,
          position: index%2==0? JSON.parse( JSON.stringify([x+item,y-item]) ) : JSON.parse( JSON.stringify([x-item,y+item]) ),
          icon: startIcon,
        });
        this.waterIconList.push(marker)
      })
      positonList.forEach((item,index)=>{
        let marker = new AMap.Marker({
          map: this.map,
          position: index%2==0? JSON.parse( JSON.stringify([x+item,y+item]) ) : JSON.parse( JSON.stringify([x-item,y-item]) ),
          icon: startIcon,
        });
        this.waterIconList.push(marker)
      })
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择水源类型','确定',config);
    }
  }

  //取消显示水源
  resetWater(){
    this.waterIconList.forEach((element,index) => { this.map.remove(element) });  //先删除所有标点
    this.waterIconList = []
    this.watertForm.reset()
    this.watertForm.controls.areaWater.setValue('0')
    this.map.remove(this.circleofwater)
  }

  //计算两地距离
  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);
  }

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



}

//编辑水源道路情况
@Component({
  selector: 'app-editBuilding',
  templateUrl: './edittext.html',
  styleUrls: ['./water-road.component.scss']
})
export class EditText {
  
  constructor(public snackBar: MatSnackBar,public dialog: MatDialog,public dialogRef: MatDialogRef<EditText>,@Inject(MAT_DIALOG_DATA) public data) { }
  textcontant:any =  localStorage.getItem(sessionStorage.getItem("companyId") + "waterroad") || ""//输入内容
  iseditsix = true
  ngOnInit(): void {
    if(sessionStorage.getItem("six") == "look"){
      this.iseditsix = false
    }else if(sessionStorage.getItem("six") == "edit"){
      this.iseditsix = true
    }
  }


  //确定
  ok(){
    localStorage.setItem(sessionStorage.getItem("companyId") + "waterroad",this.textcontant)
    const config = new MatSnackBarConfig();
    config.verticalPosition = 'top';
    config.duration = 3000
    this.snackBar.open('保存成功','确定',config);
    this.dialogRef.close();
  }
  //取消
  cancel(){
    this.dialogRef.close();
  }
}