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

Question

我正在使用传单在 map 上绘制圆圈层(因此有多个图层，每个图层由几个圆圈组成)。

我已将所有图层保存在一个要素组中:

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

Answer 1

在添加到其他标签之前，你需要先添加一个类到相应的图层，比如

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

然后你可以随时找到这个类:

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

Fiddle .