在 Leaflet 图层运行期间添加 CSS 类

Question

我正在使用leaflet在地图上绘制圆形层（因此有几个层，每个层由多个圆组成）。

我已将所有层保存在要素组中：

this.globalLayer = L.featureGroup();

我正在通过创建圆形的新要素组，并将该要素组添加到全局图层中来向其中添加新圆：

let circleLayer: L.featureGroup();

let point1 = L.circle([pos_lat, pos_long], {color: color, opacity: 1, 
radius: radius});
let point2 = L.circle([pos_lat, pos_long], {color: color, opacity: 1, 
radius: radius});
circleLayer.addLayer(point1);
circleLayer.addLayer(point2);
// etc.

this.globalLayer.addLayer(circleLayer);

现在我想为一些图层添加CSS类：

for (let cssLayer of cssLayers) { // cssLayers is a L.featureGroup[]
    this.globalLayer.removeLayer(cssLayer);
    cssLayer.setStyle({className: 'animate'});
    this.globalLayer.addLayer(cssLayer);
}

这个方法可以实现，但由于图层中包含许多圆形，计算时间较长。有没有一种方法只需添加CSS类而无需删除和再次添加呢？

我已经尝试过。

this.globalLayer.eachLayer(layer => {
    layer.setStyle({className: 'animate'})
});

但是setStyle()在类型L.Layer上不存在。

这里是我目前的解决方案的JsFiddle链接。

- JustYourCasualProgrammer

---

这是一个非常有趣的问题。我懒得为它创建一个程序，所以我恳请您创建一个 Fiddle，这样我就可以玩弄您确切的问题了。基本上，我们需要能够确定哪个/哪些标签受到类名的影响。例如，一个简单的解决方案是为您的图层定义一个类，例如 myLayer5，然后每当您需要执行与之相关的操作时，您可以使用 document.getElementsByClassName("myLayer5") 然后您可以遍历它们并添加/删除类，但保留 myLayer5 供将来使用。 - Lajos Arpad

谢谢回复，我在这里创建了一个fiddle：http://jsfiddle.net/axwL44tm/ - JustYourCasualProgrammer

Answer 1

在将相应的图层添加到其他标签之前，您需要为该图层添加一个类，例如：

circleLayer1.setStyle({className: 'myListener'});

接着，您可以随时找到这个类：

$('#blink').click(function() {
    $(".myListener").addClass("blink");
});

Fiddle.

- Lajos Arpad

---

这就是我最终做的。 - JustYourCasualProgrammer

Answer 2

我不确定这是否是最佳实践，但我发现您可以使用层的 _path 属性：

this.globalLayer.eachLayer(layer => {
    layer._path.classList.add('animate')
});

- Jesse Fried