在运行时将 css 类添加到传单层答案

【问题标题】：Add css class to leaflet layer during runtime在运行时将 css 类添加到传单层
【发布时间】：2020-09-03 06:16:18
【问题描述】：

我正在使用小册子在地图上绘制多层圆圈（所以有几层，每层由几个圆圈组成）。

我已将所有图层保存在一个特征组中：

this.globalLayer = L.featureGroup();

我正在通过创建一个新的圆圈特征组向它添加新圆圈，并将该特征组添加到 globalLayer：

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 使用我当前的解决方法

【问题讨论】：

这是一个非常有趣的问题。我懒得为它创建一个程序，所以我请你创建一个 Fiddle，这样我就可以解决你的确切问题。基本上，我们需要能够确定受类名影响的标签是什么。例如，一个简单的解决方案是为您的图层定义一个类，例如 myLayer5 ，然后每当您需要做与它相关的事情时，您可以 document.getElementsByClassName("myLayer5") 然后您可以遍历它们并添加/删除类，但保留 myLayer5 以备将来使用。
感谢您的回复，我在这里创建了一个小提琴：jsfiddle.net/axwL44tm

标签： css typescript leaflet

【解决方案1】：

您需要先将一个类添加到相应的图层，然后再将其添加到其他标签，例如

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

然后您可以随时找到该课程：

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

Fiddle.

【讨论】：

这就是我最终做的事情

【解决方案2】：

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

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

【讨论】：