海量点标记 MassMarks功能实现

        海量点标记是将需要显示的点位统计后，canvas绘制相应图层实现，所以不能筛选显示，只能清空图层重建，不能实现鼠标移入当前点标记修改样式，但是可以实现不同点标记显示不同样式。

1.创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

2.创建样式对象

// 创建样式对象, JSAPI 2.0 支持显示设置 zIndex, zIndex 越大约靠前，默认按顺序排列
var style = [{
  url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
  anchor: new AMap.Pixel(6, 6),//图标偏移量，默认为图标左上角
  size: new AMap.Size(11, 11),
  // zIndex: 每种样式图标的叠加顺序，数字越大越靠前
  zIndex: 3,  
}, {
  url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
  anchor: new AMap.Pixel(4, 4),
  size: new AMap.Size(7, 7),
  zIndex: 2,
}, {
  url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
  anchor: new AMap.Pixel(3, 3),
  size: new AMap.Size(5, 5),
  zIndex: 1,
}];

3.创建massMarks数据集

var data = [{
    lnglat: [116.405285, 39.904989], //点标记位置
    style:0,//设置该标记的样式，值为style对象的索引
    name: 'beijing',
    id:1,
    //数据名：数据 可以在此放入后续添加事件时要用到的数据，通过e.data可以获取到
}, // {}, …,{}, …
];

4.创建海量点对象，设置点样式

var massMarks = new AMap.MassMarks(data,//这里的data就是上面的数据集
{
    zIndex: 5,  // 海量点图层叠加的顺序
    zooms: [3, 19],  // 在指定地图缩放级别范围内展示海量点图层
    style: style  // 设置样式对象
});

5.添加点标记事件

massMarks.on("click", (e) => {
                this.setMarkerClick(e.data.allMsg, e.target)
            })
massMarks.on("mouseover", (e) => {
                this.onMarkerOver(e.data)
            })
massMarks.on("mouseout", () => {
                this.onMarkerOut()
            })

6.将 massMarks 添加到地图实例

massMarks.setMap(map);