背景:大量点位(1w+)的加载
实现:高德地图海量点聚合实现
问题:如果遇到有多图层嵌套,直接使用massmarks海量点实现是有问题的
参考地址:https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker#markercluster
代码:
this.points.map(item => {
let myIcon = new CMap.Icon({
size: item.size ? new// 图标尺寸 CMap.Size(...size) : new CMap.Size(34, 34),
image: item.icon ? item.icon : require("@/assets/imgs/picture.png"),// 图标的取图地址
imageSize: item.size ? new CMap.Size(...size) : new CMap.Size(34, 34)// 图标所用图片大小
});
var marker = new CMap.Marker({
position: item.points, //位置
icon: myIcon,
// content: `<div>${index}</div>`,
offset: new CMap.Pixel(-15, -15),
extData: {
detail: item //点击海量点的详情
}
});
this.markers.push(marker);
marker.on("click", e => {//点位的点击事件
let details = e.target.getExtData().detail;
// console.log(details)
this.$emit("update", "pointClick", [details, marker]);
});
// }
});
var sts = [{//聚合点的样式
url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
size: new AMap.Size(34, 34),
offset: new AMap.Pixel(-16, -16)
}]
this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
styles: sts,
gridSize: 20,
minClusterSize:2,
maxZoom:18
});
联系客服