1. 程式人生 > 實用技巧 >高德地圖基於vue實現海量點位聚合

高德地圖基於vue實現海量點位聚合

背景:大量點位(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
});