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

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

3 个答案: