Question

我使用传单在地图上绘制圆圈图层（因此有几个图层，每个图层由几个圆圈组成）。

我已保存功能组中的所有图层：

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

Answer 2

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

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

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

2 个答案: