前端通过leaflet在地图上打点

// 初始化适宜度图层
        initLayer() {
            let MaskLayer = [];
            if (this.map) {
                if (!this.suitableLayer) {
                    this.suitableLayer = L.layerGroup()
                    this.map.addLayer(this.suitableLayer)
                }
                else {
                    this.suitableLayer.clearLayers()
                    this.map.removeLayer(this.suitableLayer)
                    this.suitableLayer = null;
                    this.suitableLayer = L.layerGroup()
                    this.map.addLayer(this.suitableLayer)
                }
                this.allDataJson.forEach((item) => {
                    MaskLayer.push(item);
                });
                console.log(MaskLayer);
                let color;
                MaskLayer.forEach((item, index) => {
                    const marker = L.marker([item.lat, item.lon], {
                        icon: L.divIcon({
                            html: `<div class="icon-container" style="width:24px;height:24px;background:${color};border: 2px solid #FFFFFF;box-shadow: 0 2px 4px 0 #00000080;border-radius: 50%;">
                                    <span class="circle-badge">${item.count}</span>
                                   </div>`,
                            iconSize: [24, 24],
                            iconAnchor: [14, 20],
                        })
                    });
                    marker.on("click", (e) => {
                        this.dialogVisible = true;
                        //this.getDataItem()
                    });
                    this.suitableLayer.addLayer(marker);
                });
            }
        },