传单地图单击更改颜色，然后再次单击时删除

Question

我正在将 Leaflet 用于美国地图，并且我具有单击功能来放大和更改州的颜色。这有效，但我不能 单击另一个状态时，使颜色返回到以前的颜色。目前，每次我点击一个状态时，颜色都会改变 并且不会删除之前的颜色变化。

这是我的代码：

var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('https://api.tiles.mapbox.com/v4/{z}/{x}/{y}.png?access_token=...', {
    maxZoom: 8,
    minZoom: 4,
    attribution: ' ',
    id: 'mapbox.light',
    attribution: '<a target="_blank" href="https://www.mapbox.com/">Mapbox</a>'
}).addTo(map);

    // get color depending on population density value
    function getColor(d) {
        return d < 1 ? '#173e34' : //green
                       '#e1cb7f'; //yellow

    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 1.9,
            fillColor: getColor(feature.properties.availability)
        };
    }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 1,
            color: '#fff',
            dashArray: '',
            fillOpacity: 0.9,
            fillColor: 'red'
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties.availability);
    }

    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());

    }

    function onEachFeature(feature, layer) {
            layer.on({
                //mouseover: highlightFeature,
                //mouseout: resetHighlight,
                click: function(e){
                    map.fitBounds(e.target.getBounds());
                            var layer = e.target;
                    layer.setStyle({
                    weight: 1,
                    color: '#fff',
                    dashArray: '',
                    fillOpacity: 0.9,
                    fillColor: 'red'
                   });
                    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                    layer.bringToFront();
                    }
                    info.update(layer.feature.properties.availability);
                            }
                    });
                }

    geojson = L.geoJson(statesData, {
        style: style,
        pointToLayer: function (feature, latlng) {
                        return L.marker(latlng, {icon: myIcon});
        },
        onEachFeature: onEachFeature
}).addTo(map);

这是有地图的页面：https://www.thekeithcorp.com/interactive-map/

任何帮助将不胜感激，谢谢！

编辑

我试过了，但还是不行，我做错了什么？

  var prevLayerClicked = null;


function onEachFeature(feature, layer) {
        layer.on({
            //mouseover: highlightFeature,
            //mouseout: resetHighlight,
            click: function(e){
                 if (prevLayerClicked !== null) {
                                // Reset style
                                prevLayerClicked.setStyle({
                                            weight: 2,
                                            opacity: 1,
                                            color: 'white',
                                            dashArray: '',
                                            fillOpacity: 1.9,
                                            fillColor: getColor(feature.properties.availability)});

        }
                map.fitBounds(e.target.getBounds());
                var layer = e.target;

                        layer.setStyle({
                            weight: 1,
                            color: '#fff',
                            dashArray: '',
                            fillOpacity: 0.9,
                            fillColor: 'red'
                        });

                        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                            layer.bringToFront();
                        }

    info.update(layer.feature.properties.availability);
    prevLayerClicked = layer;
                }
    });
}

Answer 1

你应该尝试这样的事情：

var prevLayerClicked = null;

function onEachFeature(feature, layer) {
    layer.on({
        click: function(e){
            // If you have a layer inside  this variable
            if (prevLayerClicked !== null) {
                // Reset style
                prevLayerClicked.setStyle({yourPreviousStyleHere});
            }

            // Do your things here
            map.fitBounds(e.target.getBounds());
            var layer = e.target;
            [...]

            // Store clicked layer into this variable
            prevLayerClicked = layer;
        }
    });
}

Answer 2

用这个来工作：

var prevLayerClicked = null;

function onEachFeature(feature, layer) {
  layer.on({

    // mouseover: highlightFeature,
    // mouseout: resetHighlight,

    click: function(e){
      if (prevLayerClicked !== null) {
          // Reset style
        prevLayerClicked.setStyle({
          weight: 2,
          opacity: 1,
          color: 'white',
          dashArray: '',
          fillOpacity: 1.9,
          fillColor: getColor(feature.properties.availability)
        });
      }
      map.fitBounds(e.target.getBounds());
      var layer = e.target;
      layer.setStyle({
        weight: 1,
        color: '#fff',
        dashArray: '',
        fillOpacity: 0.9,
        fillColor: 'red'
      });
      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }
      //info.update(layer.feature.properties.availability);
      prevLayerClicked = layer;
    }
  });
}

不得不删除：

info.update(layer.feature.properties.availability);

Answer 3

以下代码适用于leaflet@1.6.0。
在layer对象中添加一个属性来保持点击/选中状态：

var mystyle = { 
  default: {
    "color": "#ff7800",
    "weight": 2,
    "opacity": 0.5
  },
  click: {
    "color": "#123456",
    "weight": 3,
    "opacity": 0.7
  }
}

layer.on('click', function(e) {
  if(e.layer.selected) {
    e.layer.setStyle(style.default);
    e.layer.selected = false;
  } else {
    e.layer.setStyle(style.click);
    e.layer.selected = true;
  }
});