高德地图基础总结

高德地图基础总结

初始化地图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 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封装方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
 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 >' +
         '                       <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;
  },
获取所有覆盖物显/隐藏
1
2
3
4
5
6
7
8
9
10
 
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)
    }
}
自定义图层
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
   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);
socker实时失效获取地图的marker的eventId删除并且重新打点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
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]);
   }
  }
posted @ 2021-03-15 10:05  lianggl  阅读(515)  评论(0)    收藏  举报