我正在使用 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/ https://www.thekeithcorp.com/interactive-map/
任何帮助将不胜感激,谢谢!
EDIT
我尝试了这个但仍然不起作用,我做错了什么?
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;
}
});
}