当“鼠标输出”发生时,我无法重置多边形的样式。
以下是我目前的代码:
countriesLayer是不同国家坐标的geoJson数据的变量。
正如您所看到的,有4个函数:highlightFeature,resetHighlight,zoomToFeature和lastOnEachFeature。
我对其他3个功能没有任何问题,但“resetHighlight”......
根据Mapbox文档,它说我只需要使用geojson.resetStyle,但它似乎不起作用。
有谁可以帮我解决这个问题?
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoidGhsZWUxMTIyIiwiYSI6ImNpeWdyd2tycDAzZTUzMm12eDcybjJocTgifQ.r1njnGgI95MNlwVBTm1slw';
var map = L.mapbox.map('map')
.setView([16.541430, 7.558594], 3);
// Use styleLayer to add a Mapbox style created in Mapbox Studio
L.mapbox.styleLayer('mapbox://styles/thlee1122/ciyhpbj15003d2sluqt6ylrqa', {zoomControl: false}).addTo(map);
//Disable zooming and scrolling
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
L.geoJSON(countriesLayer, {
style: function(feature) {
switch(feature.properties.title) {
case 'France': return {
color: "#3ca0d3"
};
case 'China': return {
color: "#f86767"
};
case "Korea": return {
color: "#e7857f"
};
case "Span": return {
color: "#fa946e"
};
case "United States of America": return {
color: "#9c89cc"
}
}
},
onEachFeature: countriesOnEachFeature
}).addTo(map);
function highlightFeature(e) {
var layer = e.target;
layer.setStyle(
{
weight: 5,
color: 'black',
fillColor: 'grey',
fillOpacity: 0.2
}
)
if(!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
function resetHighlight(e) {
geojson.resetStyle(e.target)
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds())
}
function countriesOnEachFeature(feature, layer) {
layer.on(
{
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
}
)
}
</script>