- 当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类。AMap.MassMarks 并不是普通的覆盖物,它实际上是由海量点组成的一个 地图图层 , 目前仅适用于html5浏览器。创建方式如下:
- marker点数量超过200多个以上就会有卡顿 所以点多的时候建议用AMap.MassMarks来处理
海量点只是单纯的点展示。没法添加文字等描述
obuMassMarksList:[],//海量点数据
obuCarMassMarksDataContainer:null,//海量点数据图层 用来替换数据
obuCarMassMark:null, //海量点地图展示图层
createObuCarMassMarks().then(res=>{
this.obuMassMarksList = [];
/* 海量点数据 */
this.obuMassMarksList = res;
/* 创建海量点marker */
this.createObuMassMarks(this.obuMassMarksList)
})
// 在地图上创建Obu海量点,
createObuMassMarks(massMarksList) {
/* 数据图层如果存在 每次请求的时候先置空 每次都是最新的数据 */
if(this.obuCarMassMarksDataContainer != null){
this.obuCarMassMarksDataContainer.setMap(null)
}
// 创建样式对象
let styleObject = {
url: '/platform/static/img/obuCarMassmarker.png', // 图标地址
size: new AMap.Size(20, 20), // 图标大小
anchor: new AMap.Pixel(10, 10) // 图标显示位置偏移量,基准点为图标左上角
};
/* 数据图层 然后赋值给要放到地图实例上的参数上 防止地图上清空造成闪的效果 */
this.obuCarMassMarksDataContainer = new AMap.MassMarks(massMarksList, {
zIndex: 100, // 海量点图层叠加的顺序
zooms: [3, 15], // 在指定地图缩放级别范围内展示海量点图层
style: styleObject // 设置样式对象
});
this.obuCarMassMark = this.obuCarMassMarksDataContainer;
let tmpMap = this.map;
//将每次最新的obu海量点数据添加到地图上
this.obuCarMassMark.setMap(tmpMap);
},
地图图层方法 this.obuCarMassMark.setMap(null)、hide()、show()