下面是我的工作示例http://members.upcpoczta.pl/w.racek/mapa.html
我想达到的目标是:
现在,它很好地放大了,但是当你移动时,鼠标突出显示消失了,你不知道你点击了哪条路线。
发布于 2015-01-28 11:22:23
好吧,有点烦躁,但把它看作是如何完成这样的事情的示范。创建一个变量selected,并在触发click处理程序时将突出显示的特性存储在其中。现在,在您的mouseout处理程序中,您需要检查是否做出了选择,看看它是否与触发mouseout的层相对应,如果是,不要删除突出显示的样式。此外,您还需要在click处理程序中编写一些逻辑,如果已经做出了选择,它将从其中删除突出显示。
代码示例:
function highlight (layer) {
layer.setStyle({
weight: 5,
dashArray: ''
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
function dehighlight (layer) {
if (selected === null || selected._leaflet_id !== layer._leaflet_id) {
geojson.resetStyle(layer);
}
}
// Variable to store selection
var selected = null;
function select (layer) {
// See if there is already a selection
if (selected !== null) {
// Store for now
var previous = selected;
}
map.fitBounds(layer.getBounds());
// Set new selection
selected = layer;
// If there was a previous selection
if (previous) {
// Dehighlight previous
dehighlight(previous);
}
}
var geojson = L.geoJson(rower, {
style: function (feature) {
return {
weight: 2,
opacity: 1,
color: feature.properties.colour,
dashArray: 3,
};
},
onEachFeature: function (feature, layer) {
layer.on({
'mouseover': function (e) {
highlight(e.target);
},
'mouseout': function (e) {
dehighlight(e.target);
},
'click': function (e) {
select(e.target);
}
});
}
}).addTo(map);下面是柱塞的一个工作示例:http://plnkr.co/edit/fdTnA9CyJdJejiPq2q8M?p=preview
您还需要为map click或moveend或任何您想要完成的ux编写处理程序,并在其中检查是否有选择,然后删除其中的突出显示,但一旦您掌握了概念,这就相当简单了。
https://stackoverflow.com/questions/28189360
复制相似问题