如何解决将鼠标悬停在传单中的任何功能上时触发多个功能的事件
我有一个包含两个折线和polylineDecorator的图层。当我将鼠标悬停在多义线和多义线装饰器上时,我想同时强调它们。现在,当我将鼠标悬停在其上时,我一次只能突出显示一个。 这是我的代码:
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
解决方法
在您的鼠标悬停回调中,我认为e.target
仅指触发事件的单个图层(折线或装饰器),而不是构成要素组的图层的集合。我尚未测试过,但是根据the docs,您应该可以通过在功能组本身上调用.setLayer()
来获得想要的效果:
myfeatures.on('mouseover',function(e) {
myfeatures.setStyle({color: '#8B0000',opacity: 1,fillOpacity:1});
});
此外,如果两条折线是通过对onEachFeature_migration()
的两次单独调用创建的,则它们最终将成为两个单独的要素组。要解决此问题,您可能需要在函数外部为featureGroup
分配一个空的myfeatures
,然后使用myfeatures.addLayer()
在函数内部向其添加新的折线。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。