Pesquisa de site

typescript - Adicionar classe CSS a uma camada do leaflet durante a execução

Estou usando o Leaflet para desenhar camadas de círculos (então existem várias camadas, cada uma consistindo de vários círculos) em um mapa.

Eu salvei todas as camadas em um grupo de recursos:

this.globalLayer = L.featureGroup();

Estou adicionando novos círculos a ele criando um novo grupo de elementos dos círculos e adicionando o grupo de elementos à camada global:

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);

Agora eu quero adicionar uma classe CSS a algumas das camadas:

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

Isso funciona, mas como as camadas contêm muitos círculos, isso leva um tempo para ser calculado. Há uma maneira de apenas adicionar uma classe CSS sem removê-las e adicioná-las novamente?

Eu tentei

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

Mas setStyle() não existe no tipo L.Layer

JsFiddle com minha solução alternativa atual

Resposta #1

Você precisará adicionar uma classe à camada correspondente antes de adicioná-la a outros rótulos, como

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

e então você pode encontrar esta aula a qualquer momento que quiser:

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

Fidel.

Resposta #2

Não tenho certeza se esta é a melhor prática, mas descobri que você pode usar o atributo _path da camada:

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

Artigos relacionados