CSS-Klasse während der Laufzeit zur Leaflet-Ebene hinzufügen

Ich verwende eine Broschüre, um mehrere Kreise (also mehrere Ebenen, die aus mehreren Kreisen bestehen) auf einer Karte zu zeichnen.CSS-Klasse während der Laufzeit zur Leaflet-Ebene hinzufügen

Ich habe alle Schichten auf einem featuregroup gespeichert:

this.globalLayer = L.featureGroup();

Ich füge neue Kreise, um es durch ein neues featuregroup der Kreise zu schaffen, und das Hinzufügen der featuregroup zum 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);

Jetzt möchte ich einige der Schichten eine CSS-Klasse hinzuzufügen:

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

diese funktioniert, aber da die Ebenen viele Kreise enthalten, dauert es eine Weile, bis sie berechnet sind. Gibt es eine Möglichkeit, einfach eine CSS-Klasse hinzuzufügen, ohne sie zu entfernen und wieder hinzuzufügen?

Ich habe versucht

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

Aber setStyle() existiert nicht auf Typ L.Layer

JsFiddle mit meinem aktuellen Umgehungslösung

Quelle

2017-09-01 JustYourCasualProgrammer

Dies ist eine sehr interessante Frage. Ich bin faul, ein Programm dafür zu erstellen, deshalb bitte ich Sie, eine Fiddle zu erstellen, damit ich Ihr genaues Problem spielen kann. Grundsätzlich müssen wir in der Lage sein zu bestimmen, welche Tags vom Klassennamen betroffen sind. Eine einfache Lösung wäre zum Beispiel, eine Klasse für Ihre Ebene (n) zu definieren, zum Beispiel myLayer5, und dann, wenn Sie etwas damit tun müssen, können Sie document.getElementsByClassName ("myLayer5") und dann können Sie durchlaufen sie und hinzufügen/entfernen Klassen, aber myLayer5 für zukünftige Verwendungen behalten. –

danke für die Antwort, ich habe hier eine Geige erstellt: http://jsfiddle.net/axwL44tm/ – JustYourCasualProgrammer

Sie müssen eine Klasse der entsprechenden Schicht hinzuzufügen, bevor Sie fügen es zu anderen Etiketten hinzu, wie

und dann können Sie diese Klasse, wenn Sie wollen finden:

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

Fiddle.

Quelle

2017-09-01 19:57:09

Das ist, was ich getan habe – JustYourCasualProgrammer

CSS-Klasse während der Laufzeit zur Leaflet-Ebene hinzufügen

Antwort

Verwandte Themen