ShangHaiYuan-AnXin/src/app/data-collection/water-collection/water-collection.component.ts

import { Renderer2 } from '@angular/core';
import { ElementRef } from '@angular/core';
import { Component, OnInit } from '@angular/core';
declare var AMap: any;

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

  constructor(private  elementRef: ElementRef,public renderer2: Renderer2) { }

  isCheckedOfSearchDiv:boolean = true//列表过滤滑块
  slideChange(e){
    this.isCheckedOfSearchDiv = e.checked
  }
  searchForm:any = {
    name:'',
    integrityNum:''
  }
  listIntegrityNum:any[] = [
    {id:0,name:'<=50%'},
    {id:1,name:'50%-60%'},
    {id:2,name:'60%-70%'},
    {id:3,name:'70%-80%'},
    {id:4,name:'80%-90%'},
    {id:5,name:'90%-100%'}
  ]
  checkBoxList:any[] = [
    {id:0,name:'消火栓'},
    {id:1,name:'消防水池'},
    {id:2,name:'天然水源'}
  ]
  ngOnInit(): void {
    setTimeout(() => {
      this.createMap()
    }, 0);
  }
  //搜索
  searchList(){
    console.log(this.searchForm)
  }
  map:any
  placeSearch:any//构造地点查询类
  isMapLabel:boolean = false //是否已经标记坐标
  newPositionMarkerContent:any  = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/newposition.png">' +
  '</div>'
  newPositionMarkerContentBtn:any = 
  '<div class="custom-content-marker">' +
  '   <img src="/assets/images/newposition.png">' +
  '   <div  class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
  '</div>'
  //创建地图
  newPositionMarker:any//坐标实例
  createMap(){
    this.map = new AMap.Map('container', {
      zoom:12
    })
    this.map.setCity('上海市');
    //输入提示
    var autoOptions = {
      input: "tipinput"
    };
    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
      let auto = new AMap.AutoComplete(autoOptions);
      this.placeSearch = new AMap.PlaceSearch();  //构造地点查询类
      auto.on("select", (e)=>{
        this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
        this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat}
        this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点
      });//注册监听，当选中某条记录时会触发

    });

    if(this.isMapLabel){//如果已经标注单位坐标
      console.log('已标注单位位置')
      // this.map.setCenter([this.unitinfo.location.x,this.unitinfo.location.y]);
      // this.oldPositionMarker = new AMap.Marker({
      //   position: [this.unitinfo.location.x,this.unitinfo.location.y],
      //   content: this.newPositionMarkerContent,
      //   offset: new AMap.Pixel(-15, -18)
      // })
      // // 将 markers 添加到地图
      // this.map.add(this.oldPositionMarker);
    }else{
      console.log('未标注单位位置')
      // this.map.setCity('上海市');
    }
  }
  //点击位置
  isGisTopBox:boolean = false //
  searchTitle:any = ''//

  positionLngLat:any = {}//临时坐标点
  atLastPositionLngLat:any = {}//最终坐标点



  setPosition(){
    if(!this.isGisTopBox){
      this.isGisTopBox = true
      this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
      let center
      if(this.newPositionMarker && this.atLastPositionLngLat.x){//如果已经标注单位坐标
        center = [this.atLastPositionLngLat.x, this.atLastPositionLngLat.y]
      }else{
        center = this.map.getCenter(); //获取当前地图中心位置
      }
      this.newPositionMarker = new AMap.Marker({
        draggable: true,
        position: center,
        content: this.newPositionMarkerContentBtn,
        offset: new AMap.Pixel(-15, -18)
      });
      this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]}
      this.map.add(this.newPositionMarker);
      this.isMapLabel = true
      this.newPositionMarker.on('dragend', (e)=>{
        this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat}
      })
      //点击确定
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ 
        this.isGisTopBox = false
        this.map.remove(this.newPositionMarker)
        this.newPositionMarker = new AMap.Marker({
          position: [this.positionLngLat.x,this.positionLngLat.y],
          content: this.newPositionMarkerContent,
          offset: new AMap.Pixel(-15, -18)
        });
        this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
        this.map.add(this.newPositionMarker);
        this.positionLngLat = this.atLastPositionLngLat
      })
      this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{ 
        this.isGisTopBox = false
        this.map.remove(this.newPositionMarker)
        if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消
          this.map.remove(this.newPositionMarker)
          this.positionLngLat = {}
          this.atLastPositionLngLat = {}
        }else{
          this.newPositionMarker = new AMap.Marker({
            position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
            content: this.newPositionMarkerContent,
            offset: new AMap.Pixel(-15, -18)
          });
          this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
          this.map.add(this.newPositionMarker);
          this.positionLngLat = this.atLastPositionLngLat
        }
      })//取消
    }
    
  }
}