将鼠标悬停在传单中的任何功能上时触发多个功能的事件

问题描述

我有一个包含两个折线和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()在函数内部向其添加新的折线。