marker标点卡顿问题

问题说明

应用高德地图使用marker标点时，由于数据量大（>1000）就会造成页面卡顿，好几秒才能加载完成，并且页面也会卡顿

解决方案

使用官方提供的海量点MassMarks 可解决问题

直接上代码

//styleObjectArr 是标点样式（可多样式）
let styleObjectArr = [{url:xxx,                         // 图标地址size: new AMap.Size(16,25),      // 图标大小anchor:new AMap.Pixel(-8, -17)   // 偏移量
},{url:xxx2,                         // 图标地址size: new AMap.Size(16,25),      // 图标大小anchor:new AMap.Pixel(-8, -17)   // 偏移量
}]
//markers 是标点数据源
let markers = [{id: xxx,name: xxx,lnglat: [xxx,xxx],style:0          //这里的style为styleObjectArr中的下标
},{id: xxx,name: xxx,lnglat: [xxx,xxx],style:1          //这里的style为styleObjectArr中的下标
}]
var massMarks = new AMap.MassMarks(markers,{zIndex: 999,   // 海量点图层叠加的顺序zooms: [3, 19],     // 在指定地图缩放级别范围内展示海量点图层style: styleObjectArr    //多种样式对象的数组});// this.map为map实例，不添加标点事件可注释或删除var marker = new AMap.Marker({content: ' ', map: this.map});// 这里可以添加标点点击事件，不用可注释或删除massMarks.on("click", this.clickMarker);// 这里可以添加鼠标移入移出标点事件，不用可注释或删除massMarks.on('mouseover', function (e) {marker.setPosition(e.data.lnglat);marker.setLabel({content: e.data.name})});massMarks.on('mouseout', function (e) {marker.setLabel({content:''})});//将海量点massMarks注入mapmassMarks.setMap(this.map);

最后上官方demo地址

https://developer.amap.com/demo/jsapi-v2/example/mass-markers/massmarks 跳转

官方文档地址

https://developer.amap.com/api/javascript-api/guide/overlays/massmarker/ 跳转
https://developer.amap.com/api/javascript-api/reference/layer/#MassMarks 跳转

高德地图marker标点数据量太大造成卡顿的解决方案相关推荐

el-table 大数据量渲染，页面卡顿的解决方案
原文: el-table大数据量渲染卡顿的解决方案描述: 当el-table的数据有成千上万条,且在同一页全部展示,此时页面渲染的dom太多可能造成页面卡顿原因: 因为数据量过多导致浏览器渲染过多 ...
高德地图「海量点标记 + 海量标注」卡顿问题解决方案
最近刚做了个和地图相关的需求,涉及到「海量点标记 + 海量标注」.当数据量达到三千以上的时候,「海量标注」会明显拖慢页面的加载/响应速度,非常影响用户体验,因此我对其进行了优化.感觉还挺有挑战性的,在 ...
R语言使用hexbin包的hexbin函数可视化散点图、应对数据量太大、且有数据重叠的情况、普通散点图可视化效果变差的情况、提供了对六边形单元格的二元绑定、通过图例颜色标定每一个区域数据点的数量
R语言使用hexbin包的hexbin函数可视化散点图.应对数据量太大.且有数据重叠的情况.普通散点图可视化效果变差的情况.hexbin函数提供了对六边形单元格的二元绑定.通过图例颜色标定每一个区域数 ...
for循环数据量太大_中文文本分类roberta大力出奇迹之数据量大的问题
问题描述: 笔者在文本分类场景中使用了roberta+pool+dense的三分类模型.采用预训练模型做项目的时候经常苦于数据太少,模型泛化性差,因此收集了1300W数据.在我尝试暴力出奇迹的时候,遇 ...
Matlab曲线图导出eps数据量太大占用很多存储空间
Matlab曲线图导出eps数据量太大占用很多存储空间我的Figure是从simulink里的scope里导出的,因为是采样率很高的时域波形,所以数据量很大.从Figure里导出eps向量格式的话, ...
当txt文件或者sql文件数据量太大，无法打开时，可以通过Emeditor这个编辑器打开
当txt文件或者sql文件数据量太大,无法打开时,可以通过Emeditor这个编辑器打开,进行处理和编辑. Emeditor 这个软件,可以在占用小部分内存的情况下,快速打开,数据量大的txt或者sq ...
模型训练遇到数据量太大而导致内存不够问题？今天教你一招
在比赛和工作中,我们经常会遇到数据量太大而导致内存不够的问题.这里可以细分为两种情况: 情况1:数据太大,无法加载到内存: 情况2:加载数据但训练时内存不够: 针对情况1可以考虑使用Spark或者Da ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
vue el-select数据量太大，导致浏览器崩溃解决办法
下拉数据量太大,浏览器单线程渲染时间较长,会导致浏览器崩溃.为了解决这一问题,可以采用懒加载形式,完美解决 <el-col :span="24"><el-form ...

高德地图marker标点数据量太大造成卡顿的解决方案