高德地圖基於vue實現海量點位聚合
阿新 • • 發佈:2020-08-18
背景:大量點位(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
});