javascript - 传单 map 单击更改颜色，然后再次单击时删除

Question

我正在使用 Leaflet 制作美国 map ，并且我有点击功能来放大和更改州的颜色。这可行，但我不能单击另一个状态时使颜色返回到之前的颜色。目前，每次我点击一个状态，颜色就会改变并且不会删除之前的颜色变化。

这是我的代码:

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);

这是带有 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({

    // 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);