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

我正在使用美国地图的传单，我有点击功能来放大和改变一个州的颜色。这行，但我不能 在单击另一个状态时，获取要返回到上一个颜色的颜色。目前每次我点击一个状态，颜色都会改变 并且不会删除以前的颜色更改

这是我的代码：

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

---

你应该试试这样的方法：

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

---

你应该试试这样的方法：

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

---

使用以下工具使其正常工作：

var prevLayerClicked=null；
功能onEachFeature（功能，图层）{
分层({
//鼠标悬停：Highlight功能，
//mouseout:resetHighlight，
点击：功能（e）{
如果（prevLayerClicked！==null）{
//重置样式
prevLayerClicked.setStyle({
体重：2，
不透明度：1，
颜色：'白色'，
dashArray:“”，
不透明度：1.9，
fillColor:getColor（feature.properties.availability）
});
}
fitBounds（e.target.getBounds（））；
var层=e.目标；
layer.setStyle({
体重：1，
颜色：“#fff”，
dashArray:“”，
填充不透明度：0.9，
填充颜色：“红色”
});
如果（！L.Browser.ie&&！L.Browser.opera&&！L.Browser.edge）{
层。布氏体（）；
}
//信息更新（图层、特征、属性、可用性）；
prevLayerClicked=层；
}
});
}

必须删除：

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

---

使用以下工具使其正常工作：

var prevLayerClicked=null；
功能onEachFeature（功能，图层）{
分层({
//鼠标悬停：Highlight功能，
//mouseout:resetHighlight，
点击：功能（e）{
如果（prevLayerClicked！==null）{
//重置样式
prevLayerClicked.setStyle({
体重：2，
不透明度：1，
颜色：'白色'，
dashArray:“”，
不透明度：1.9，
fillColor:getColor（feature.properties.availability）
});
}
fitBounds（e.target.getBounds（））；
var层=e.目标；
layer.setStyle({
体重：1，
颜色：“#fff”，
dashArray:“”，
填充不透明度：0.9，
填充颜色：“红色”
});
如果（！L.Browser.ie&&！L.Browser.opera&&！L.Browser.edge）{
层。布氏体（）；
}
//信息更新（图层、特征、属性、可用性）；
prevLayerClicked=层；
}
});
}

必须删除：

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

---

以下代码正在使用

leaflet@1.6.0

在

层

对象中添加属性以保持单击/选定状态：

var mystyle={
默认值：{
“颜色”：“ff7800”，
“重量”：2，
“不透明度”：0.5
},
点击：{
“颜色”：“123456”，
“重量”：3，
“不透明度”：0.7
}
}
层上（'点击'，功能（e）{
如果（如所选图层）{
e、 layer.setStyle（样式默认值）；
e、 layer.selected=false；
}否则{
e、 layer.setStyle（样式单击）；
e、 layer.selected=true；
}
});

以下代码正在使用

leaflet@1.6.0

在

层

对象中添加属性以保持单击/选定状态：

var mystyle={
默认值：{
“颜色”：“ff7800”，
“重量”：2，
“不透明度”：0.5
},
点击：{
“颜色”：“123456”，
“重量”：3，
“不透明度”：0.7
}
}
层上（'点击'，功能（e）{
如果（如所选图层）{
e、 layer.setStyle（样式默认值）；
e、 layer.selected=false；
}否则{
e、 layer.setStyle（样式单击）；
e、 layer.selected=true；
}
});

您的代码正在定义

resetHighlight（）

和

highlightFeature（）

函数，但它们从未被使用过。存储对上次单击的多边形的引用；单击多边形时重置上次单击的多边形的样式。您的代码正在定义

resetHighlight（）

和

highlightFeature（）

函数，但从未使用过这些函数。存储对上次单击的多边形的引用；在单击多边形时重置上次单击的多边形的样式。感谢Baptiste在这方面的帮助！感谢巴普蒂斯特在这方面的帮助！