高德地图基于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 });