高德地圖基於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 });


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM