gpt4 book ai didi

javascript - 点击功能的传单

转载 作者:太空宇宙 更新时间:2023-11-04 02:48:50 25 4
gpt4 key购买 nike

因此,我正在尝试使用带 geojson 的传单作为坐标来绘制公交路线。我在一个方面遇到了困难,单击时,总线会加粗,理想情况下,最后单击的功能会返回默认样式。

到目前为止我有什么

function $onEachFeature(feature, layer) {
layer.on({
click: function(e) {
//calls up the feature clicked on
var $layer = e.target;

var highlightStyle = {
opacity: 1,
weight: 5
};

$layer.bringToFront();
$layer.setStyle(highlightStyle);
}
});
}

//imagine all the leaflet map tile code here

//this is where the features get added in and the $oneachfeature function
var busFeature = L.geoJson(busRoutes, {
style: defaultBusRouteColor,
onEachFeature : $onEachFeature
});

busFeature.addTo(map);

以上,我现在已经成功地将功能的样式更改为 highlightStyle 中的样式。但是,当单击另一个功能时,样式仍然存在。如何删除之前单击的功能的样式,以便一次只有一个功能具有 highlightStyle 样式?

我已经尝试过的事情:使用 addClass/removeClass 到 jQuery 方法,layer.resetStyle() 和 leaflet,以及其他一些仍然不起作用的事情。注意:这最好用在移动版本中,因为桌面版本使用强调功能的悬停功能,没有问题。这个:

function $oneachfeature(feature, layer){
layer.on({
mouseover: function (e){makes feature bold}
});
layer.on({
mouseout: function (e){makes feature normal again}
});
}

有什么建议吗?

最佳答案

存储对突出显示层的引用,以便稍后可以对其调用 resetStyle:

// Variable to store selected
var selected

// Create new geojson layer
new L.GeoJSON(collection, {
// Set default style
'style': function () {
return {
'color': 'yellow',
}
}
}).on('click', function (e) {
// Check for selected
if (selected) {
// Reset selected to default style
e.target.resetStyle(selected)
}
// Assign new selected
selected = e.layer
// Bring selected to front
selected.bringToFront()
// Style selected
selected.setStyle({
'color': 'red'
})
}).addTo(map)

关于javascript - 点击功能的传单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33380035/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com