【Leaflet】地图绘制多边形点击后颜色变化

 <div id="l_map"></div>

初始化地图

initMap() {
            let that = this
            if (this.map) {
              this.map.remove()
            }
            this.map = initLeafletMap('l_map', 10)
            // 双击事件
            this.map.addEventListener("dblclick", function (e) {
              that.mapDoubleClick(e)
            })
            // 拖拽事件
            that.map.addEventListener("dragend", function(){
              let zoom = that.map.getZoom()
              that.mapZoomOrDragEnd(zoom)
            })
            // 缩放事件
            that.map.addEventListener("zoomend", function(){
              let zoom = that.map.getZoom()
              that.mapZoomOrDragEnd(zoom)
            })
          },

initLeafletMap (id, zoom = 16) {
    let normalMap = window.L.tileLayer.chinaProvider('Baidu.Normal.Map', {
        maxZoom: 18,
        minZoom: 10
    });
    let normal = window.L.layerGroup([normalMap])
    let map = window.L.map(id, {
        crs: window.L.CRS.Baidu,
        center: [36.717672, 119.160414],
        zoom: zoom,
        layers: [normal],
        zoomControl: true,
        trackResize: true
    });
    //初始化绘制插件
    window.L.PM.initialize();
    //中文
    map.pm.setLang('zh')

    // 比例尺
    window.L.control.scale({maxWidth:200,metric:true,imperial:false}).addTo(map)
    return map
}

绘制多边形

polygonToMap (list) {
            this.polygonLayerList = []
            list.forEach(res => {
              let latlngs = []
              let rangePoints = res.rangePoints
              let options = {
                color: res.color, // #5b8ff9
                fillColor: res.color, // #5b8ff9
                fillOpacity: 0.2,
                data: res
              }
              if (!rangePoints) {
                return
              }
              rangePoints.forEach(item => {
                latlngs.push([item.lat, item.lng])
              })
              // 绘制多边形
              let polygonLayer = window.L.polygon(latlngs, options).addTo(this.map)
              this.polygonInit(polygonLayer, res)
              this.polygonLayerList.push(polygonLayer)
              // 绘制文字
              let iconLabel = window.L.divIcon({
                html: `<p><span>${res.name}</span><span style="margin-left: 5px">${res.amount}</span></p>`,
                className: 'my-div-icon',
                iconSize: 30,
                data: res
              })
              let that = this
              new window.L.marker([res.latitude, res.longitude], {
                icon: iconLabel
              }).addTo(this.map).on('click', (e) => {
                // 点击多边形中marker设置颜色
                that.setCurrentGridPolygon(polygonLayer, res)
              })
            })
          },

          // 多边形需要执行的操作
          polygonInit(polygonLayer, data) {
            //点击事件
            polygonLayer.on('click', e => {
              // 设置多边形颜色
              this.setCurrentGridPolygon(polygonLayer, data)
            });
          },

设置多边形颜色

// 设置当前点击多边形的颜色
          setCurrentGridPolygon (currentPolygonLayer, data) {
            // 重置多边形颜色
            this.polygonLayerList.forEach(polygonLayer => {
              polygonLayer.setStyle({
                color: data.color,
                fillColor: data.color,
                fillOpacity: 0.2
              });
            })
            // 当前多边形颜色
            currentPolygonLayer.setStyle({
              color: '#ff0000',
              fillColor: '#ff0000',
              fillOpacity: 0.2
            });
          },