Vue2项目中使用高德地图自定义（Marker）标记点和创建（MassMarks）海量标记点

前言

        本篇文章就是单独分享一下在Vue2项目中如何自定义创建marker标记点和针对要创建庞大数量标记点时所采用的API，能够快速创建数量庞大的marker，不至于在浏览器渲染时产生卡顿的现象。需要了解如何在Vue2项目中引入高德地图请参照这篇文章===>Vue2项目引入高德地图。下面开始分享。

一、自定义Marker标记点的创建

        1. 初始化地图

//初始化地图
    initMap() {
      this.map = new window.AMap.Map("map", {
        resizeEnable: true,//是否监控地图尺寸变化
        center: [116.397428, 39.90923],//地图中心点，按自己项目需要进行定位
        zoom: 10,//地图缩放级别
      });
      /** 下面是初始化地图时给地图绑定的一些事件，有需要可以添加并补充自己的逻辑不需要可以不用添加 */
      //鼠标在地图中移动事件
      this.map.on("mousemove", (res) => {
        
      });
      //鼠标在地图中离开事件
      this.map.on("mouseleave", (res) => {
        
      });
      //地图双击事件
      this.map.on("dblclick", (res) => {
        
      });
      //地图移动结束后的事件
      this.map.on("moveend", (res) => {
        
      });
      
      this.map.setDefaultCursor("pointer"); // 使用CSS默认样式定义地图上的鼠标样式
    },

        2.创建marker

//1.创建Marker对象
 let marker = new window.AMap.Marker({
                 position: [经度,纬度],//要展示marker的经度、纬度。数据格式就是数组里放入经纬度数据
                 icon: require("../../../public/img/bg/site.png"), //显示的图标
                 offset: [-16, -32],//图标偏移量，展示时会默认以图标的左上角为原点，不设置偏移量会导致地图放大缩小时造成图标偏移的情况，偏移量设置为图标宽度的负一半，负整个高度。
             });

        3.将marker添加到地图上

this.map.add(marker); //添加marker

        至此一个标记点就在地图中显示啦。

二、创建海量点标记（MassMarks 类）

叙述：当需要在地图展示数量为十万以内的点并且需要较好的性能表现时，可以使用 AMap.MassMarks 类。通过此方法渲染标记点确实很快。

1.创建样式对象

        这个步骤主要是为了给海量点标记创建统一的样式对象，如果只需要渲染一个样式直接创建一个对象即可，如果需要给海量点添加多种样式，可以通过数组创建多个样式对象。

//单个样式对象
let style = {
    url: require("../../../public/img/bg/site.png"), // 图标地址
    size: new AMap.Size(30, 30), // 图标大小
    anchor:new AMap.Pixel(20, 30);, // 偏移量
}
//多个样式对象  我这里使用的多种样式图标 
let styleObjArr = [
            {
              url: require("../../../public/img/bg/site.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              zIndex: publicZindex,//每种样式图标的叠加顺序，数字越大越靠前
            },
            {
              url: require("../../../public/img/bg/one.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: publicZindex,
            },
            {
              url: require("../../../public/img/bg/two.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: publicZindex,
            },
            {
              url: require("../../../public/img/bg/three.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: publicZindex,
            },
            {
              url: require("../../../public/img/bg/other.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: 500,
            },
          ];

2.请求回来的数据处理成MassMarks 类需要的数据格式

zhy = zhy.map((m) => {
              return {
                id: m.siteId,//数据id
                name: m.name,//数据名称
                monthInNum:m.monthInNum,//这是我自己需要的数据
                // lnglat: [m.lon, m.lat],//经纬度数据
                lnglat: wgs84togcj02(m.lon, m.lat),//这里我是转化一下，数据返回的是84坐标系需要转成高德坐标系否则会有偏差
                style: 0,//渲染的样式下标，关联第一步创建的样式对象数组的数据
              };
            });

3.创建海量点对象，并填充数据

that.massSiteMarks = new AMap.MassMarks(zhy, {
                zIndex: publicZindex,//图层的层级
                zooms: publicZooms,//所显示的缩放级别，格式为[3,18],看自己项目需要进行设置
                style: styleObjArr,//图标样式
                opacity: 1,//透明度
              });
              let siteMarker = new AMap.Marker({ content: " ", map: that.map });

             
              that.massSiteMarks.on("click", (res) => {
                //给海量点绑定点击事件，res里面有你自己填充的数据
              });
              that.massSiteMarks.on("mouseover", (res) => {
               //鼠标移入事件
              });
              that.massSiteMarks.on("mouseout", (res) => {
                //鼠标移出事件
              });

4.将 massMarks 添加到地图实例

that.massSiteMarks.setMap(that.map);

以上就是添加海量点的步骤了，下面放完整代码~~

let anchor = new AMap.Pixel(20, 30);
let publicZindex = 999;
let styleObjArr = [
            {
              url: require("../../../public/img/bg/site.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: publicZindex,
            },
            {
              url: require("../../../public/img/bg/one.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: publicZindex,
            },
            {
              url: require("../../../public/img/bg/two.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: publicZindex,
            },
            {
              url: require("../../../public/img/bg/three.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: publicZindex,
            },
            {
              url: require("../../../public/img/bg/other.png"), // 图标地址
              size: new AMap.Size(30, 30), // 图标大小
              anchor, // 偏移量
              // zIndex: 500,
            },
          ];
   let publicZooms = [3, 20];
   let zhy = data.data.filter((f) => f.isCnooc == 1);
    
          if (zhy.length) {
            //处理数据
            zhy = zhy.map((m) => {
              return {
                id: m.siteId,
                name: m.name,
                monthInNum:m.monthInNum,
                // lnglat: [m.lon, m.lat],
                lnglat: wgs84togcj02(m.lon, m.lat),
                style: 0,
              };
            });
            this.$nextTick(() => {
              //此代码是为了防止数据量过大渲染marker会造成卡顿，使用批量添加
              that.massSiteMarks = new AMap.MassMarks(zhy, {
                zIndex: publicZindex,
                zooms: publicZooms,
                style: styleObjArr,
                opacity: 1,
              });
              let siteMarker = new AMap.Marker({ content: " ", map: that.map });

             
              that.massSiteMarks.on("click", (res) => {
                
              });
              that.massSiteMarks.on("mouseover", (res) => {
                
              });
              that.massSiteMarks.on("mouseout", (res) => {
                
              });
              that.massSiteMarks.setMap(that.map);
              
            });
            
            
          }