amap使用MassMarks展示数量为万级以上的点标记

2020 年 05 月 26 日

527 次浏览

1422字数

最近在vue项目里使用amap做打点时，出现了卡顿问题。地图上一次大概会加载 9000 个点，打开页面的时候渲染的速度很慢，浏览器甚至会卡死，严重影响使用（ps:之前1000个点渲染速度可以接受）。分析代码写法，发现问题可能是由于 new了9000个marker对象（占用大量内存），而且每个marker上还绑定了个info window ，点击marker会展示相应的 info window，加之之前的写法里对数据的处理也没有做缓存，切换不同类型批量点的时候每次都需要从几万个点数据里过滤并处理某种类型的数据，所以浏览器内存直接崩溃了。
后来找到了amap地图海量点的处理办法：AMap.MassMarks，加载大量点可以秒出

当需要在地图展示数量为十万以内的点并且需要较好的性能表现时，可以使用 AMap.MassMarks 类。AMap.MassMarks 并不是普通的覆盖物，它实际上是由海量点组成的一个地图图层，目前仅适用于html5浏览器。

使用方法比较简单：

第1步. 创建海量点对象，设置点样式：


// 创建样式对象
var styleObject = {
    url: '//vdata.amap.com/icons/b18/1/2.png',  // 图标地址
    size: new AMap.Size(11,11),      // 图标大小
    anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
}

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

第2步. 设置 MassMarks 展现的数据集：


// 拿到批量点的数据，转换成如下格式
// 数据里主要需要 lnglat 这个字段，其他字段可以自定义

var data = [{
    lnglat: [116.405285, 39.904989], //点标记位置
    name: 'beijing',
    id:1
}, // {}, …,{}, …
];

massMarks.setData(data);

// 将海量点添加至地图实例
massMarks.setMap(map);