leaflet 添加聚合点图层

37 阅读1分钟
<script>
//引入聚合点
import "leaflet.markercluster";
data (){
return {
//监控图层
             所需要撒的聚合图层  
             xxLayer: {},
}
}


 //初始化方法内将图层给到leaflet
 setAllLayerToMap () {
            let self = this;
            this.xxLayer = L.markerClusterGroup().addTo(self.map)
        },
        
        
        
           //撒点
         openXX(data){
            this.cleanLayer("XX")
            let self = this;
            data.forEach(e => {
                if (e.lat && e.lng) {
                    let marker = L.marker([e.lat, e.lng], {
                        icon: self.createIconBy('XX'),
                    }).addTo(self.XXLayer);
                    
                    let html = `<div class="markerpop">
                        <p>${e.XX}</p>
                    </div>`;

                    marker.bindTooltip(html, {
                        className: "tooltip",
                        permanent: true,
                        offset: [25, -15],
                        direction: "top",
                        interactive: true,
                    }).openTooltip();

                    // marker.on("click", () => {
                    //     self.$emit("jumpPage", "village", e);
                    // });
                }
            })
        },
        
</script>