typescript - Legg til CSS-klasse på Leaflet-lag under kjøring

Jeg bruker Leaflet til å tegne lag med sirkler (så det er flere lag, hver bestående av flere sirkler) på et kart.

Jeg har lagret alle lagene på en featuregruppe:

this.globalLayer = L.featureGroup();

Jeg legger til nye sirkler i det ved å opprette en ny featuregruppe av sirklene, og legge til featuregruppen i 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);

Nå vil jeg legge til en CSS-klasse på noen av lagene:

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

Dette fungerer, men siden lagene inneholder mange sirkler, tar dette litt tid å beregne. Finnes det en måte å bare legge til en CSS-klasse uten å fjerne og legge dem til igjen?

Jeg har prøvd

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

Men setStyle() eksisterer ikke på typen L.Layer

JsFiddle med min nåværende, midlertidige løsning

Svar #1

Du må legge til en klasse på det tilsvarende laget før du legger det til andre etiketter, som

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

og så kan du finne denne klassen når som helst du vil:

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

Fiolin.

Svar #2

Jeg er ikke sikker på om dette er beste praksis, men jeg fant ut at du kan bruke lagets _path-attributt:

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

Relaterte artikler