高德地图基础总结

2020-12-05

高德地图基础总结

初始化地图

this.map = new AMap.Map('map', {
       zoom:11,//级别
       center: [117.8215522956848, 36.409843376446474],//中心点坐标
       viewMode:'3D',//使用3D视图
       maxPitch: 70,
       zooms: [14, 19],
       expandZoomRange: true,
       resizeEnable: true, //是否监控地图容器尺寸变化
       mapStyle: 'amap://styles/cd74fa7b287a9ba037cdc450bfd45f47',
       pitch: 60,
 });
  // 添加 3D 罗盘控制
  this.map.addControl(new AMap.ControlBar());
   // 创建 WMS 标准图层(加载第三方图层);
  var wms  = new AMap.TileLayer.WMS({
      url: 'https://ahocevar.com/geoserver/wms', // wms服务的url地址
      blend: false, // 地图级别切换时，不同级别的图片是否进行混合
      tileSize: 512, // 加载WMS图层服务时，图片的分片大小
      params: {
          'LAYERS': 'topp:states',//此处可以是单个图层名称，也可以是图层组名称，或多个图层名称
          VERSION:'1.3.0',
          TILED: true
      }, // OGC标准的WMS地图服务的GetMap接口的参数
      serverType: 'geoserver'
  });
  this.map.add(wms);
  // 生命周期 地图图块加载完成后触发
  this.map.on('complete', () => {
      this.mapLoading = false
  });

封装创建marker

 createlcMaker(data,clickHandler,hoverHandler, mouseoutHandler){
    var content = '<div class="way_point">' +
        '               <div class="way_left_t">\n' +
        '                   <div class="bottom_wai_t">' +
        '                       <div class="bottm_nei_t"></div>' +
        '                   </div>' +
        '               </div>\n' +
        '<div class="way_point_back"></div>' +
        '</div>';
    var point = new AMap.LngLat(data.longitude, data.latitude);
    var myIcon = new AMap.Icon({
        image:"images/monitor/static/img/way_point.png",
        size: new AMap.Size(64, 64),// 图标尺寸
        // imageSize: new AMap.Size(46, 28),// 图标所用图片大小
    });
    var marker = new AMap.Marker({
        position:point,
        map: this.map,
        content:content,
        offset: new AMap.Pixel(-17, -42),// 相对于基点的偏移位置
        extData:{data:data,type:'lcd'},//自定义数据
        icon:myIcon,
    });
    marker["layerType"] = '路测点';
    if(clickHandler){
        marker.on('click', clickHandler);
    }
    if(hoverHandler){
        marker.on('mouseover', hoverHandler);
    }
    if (mouseoutHandler) {
        marker.on('mouseout', mouseoutHandler);
    }
    // this.map.add(marker);
    return marker;
},

调用创建marker封装方法

 for (let i = 0; i < data.length; i++) {
    this.createlcMaker(data[i], 
        this.clickHandlerlcd.bind(data[i],data[i]),
        this.labelHoverHandler.bind(data[i],data[i]),
        this.labelMouseoverHandler.bind(data[i],data[i])
)}
 clickHandlerlcd(data){
    this.map.setCenter([data.longitude, data.latitude]);
 }
 labelHoverHandler(data,e){
     let content = '<div style="width: 150px;text-align: left">' +
         '                       <div class="way_right_txt">' + data.rspName + '</div>' +
         '                    </div>';
     this.currentTip = new AMap.Marker({
         map: this.map,
         content: content,  // 自定义点标记覆盖物内容
         position:  [Number(data.longitude), Number(data.latitude)], // 基点位置
         offset: new AMap.Pixel(80, 0),// 相对于基点的偏移位置
         anchor: 'center',
     });
     this.currentTip.setMap(this.map);
 },
  //鼠标移出
  labelMouseoverHandler(data){
      if (this.currentTip) {
          this.currentTip.hide();
      }
      this.currentTip = null;
  },

获取所有覆盖物显/隐藏

var allOverlay = this.map.getAllOverlays();
for (let i = 0; i < allOverlay.length; i++) {
    //marker自定义属性layerType
    if (allOverlay[i].layerType == '路测点') {
        allOverlay[i].hide();
        setTimeout(()=>{
            allOverlay[i].show();
        },2000)
    }
}

自定义图层

   let rspMark = new AMap.Marker({
       map: this.map,
       position: [gcj02[0], gcj02[1]],
       anchor: 'center',
       content: html,
       extData: {lon: data.lon, lat: data.lat,eventId:data.eventId,data:data},
       offset: new AMap.Pixel(0, 0)
   });
 rspMark.layerType = '设备上报事件'; //自定义图层参数
 this.eventMarkers.push(rspMark);//this.eventMarkers是图层数组
 //找到this.eventMarkers图层数组中的i在地图中删除到选中的marker
//但是this.eventMarkers的数据还在需要删除
 this.eventMarkers[i].setMap(null);
 this.eventMarkers.splice(j,1);

每创建一个rspMark则是一个图层对象,需要单独push到一个数组中,方便循环进行删除查找等操作

- item.getExtData()获取自定义数据及setContent更换内容

this.eventMarkers.forEach(item => {
   if (item.getExtData().id === obj.rspId) {
       let html =
              '<div style="display: flex;">' +
              '   <img style="width: 71px;height: 40px;" src="' + this.ImgUrl + 'lc-left.png" alt="" class=" ">' +
              '</div>';
          item.setzIndex(99);
          item.setContent(html);
          item.setExtData({id: obj.rspId, speed: obj.speed, volume: obj.volume})
      }
});

socker实时失效获取地图的marker的eventId删除并且重新打点

this.oldData = [];
    //listids后端返回失效的地图点id
  for(let i =0;i<listids.length;i++){
      for (let j = 0; j < this.eventMarkers.length; j++) {
          if(this.eventMarkers[j].w.extData.eventId == listids[i]){
             //保存旧的数据重新打点
              this.oldData.push(this.eventMarkers[j].w.extData.data);
              this.eventMarkers[j].setMap(null);//删除地图上的marker
              this.eventMarkers.splice(j,1);//删除图层中的数据
          }
      }
 }
//重新打点
 if(this.oldData.length>0){
   for (let j = 0; j < this.oldData.length; j++) {
        this.creatEventMarker(this.oldData[j]);
   }
  }