我有一个包含两条多段线和polylineDecorators的图层。当我将鼠标悬停在多段线和polylineDecorators上时,我想同时高亮显示它们。现在,当我将鼠标悬停在它上面时,我只能高亮显示一个。下面是我的代码:
var layer_migration = L.layerGroup({
layerName: 'layer_migration',
pane: 'linesPane',
});
function onEachFeature_migration (feature, layer) {
var polyline = L.polyline(layer.getLatLngs(),{
color: "#8B0000",weight: 5,opacity: 0.4,dashArray: '8,8',
dashOffset: 0
}).addTo(layer_migration);
var PLdecorator1 = L.polylineDecorator(polyline, {
patterns: [{
offset: '104%',
repeat: 100,
symbol: L.Symbol.arrowHead({pixelSize: 16,
pathOptions: {color: "#8B0000",fillOpacity: 0.6,weight: 0
}
})
}]
}).addTo(layer_migration)
var myfeatures = L.featureGroup([polyline,PLdecorator1]).addTo(layer_migration);
myfeatures.on('mouseover', function(e) {
var layer = e.target;
layer.setStyle({color: '#8B0000',opacity: 1,fillOpacity:1
});
});
}
任何帮助我都非常感谢。
谢谢,
P
发布于 2020-11-03 20:16:04
在您的mouseover回调中,我认为e.target
将只引用触发事件的单个层(折线或装饰层),而不是组成功能组的层的集合。我还没有测试过它,但是根据the docs的说法,你应该能够通过对功能组本身调用.setLayer()
来获得你想要的效果:
myfeatures.on('mouseover', function(e) {
myfeatures.setStyle({color: '#8B0000',opacity: 1,fillOpacity:1});
});
此外,如果这两条多段线是由对onEachFeature_migration()
的两个单独调用创建的,则它们将作为两个单独的要素组结束。要解决此问题,可能需要在函数外部为myfeatures
指定一个空的featureGroup
,然后在函数内部使用myfeatures.addLayer()
向其添加新的多段线。
https://stackoverflow.com/questions/64649083
复制相似问题