Mais

Faça um loop através de um cluster de marcadores usando Leafletjs

Faça um loop através de um cluster de marcadores usando Leafletjs


Eu tenho uma variável assim

var cubbon = new L.MarkerClusterGroup ()

então eu adicionei muitos marcadores a esta variável. agora eu gosto de criar uma função () e
percorrer a variável e descobrir um marcador com valor de latitude de 12,962.

Depois de encontrar o marcador, gosto de usar o método openPopup () para abrir a janela pop-up no marcador.

quero que este loop seja executado quando clico em um botão.


Aqui está o meu processo de código ...

Objetivo: clique em um botão 'html', de modo que um marcador (tendo latitude = 12.962 & Longitude = 77.168) que está dentro do grupo de agrupamento de marcadores abra seu pop-up automaticamente.

// cria uma variável de cluster de marcador com o nome 'parks' var allParks = new L.MarkerClusterGroup ({maxClusterRadius: 20, spiderfyOnMaxZoom: true, showCoverageOnHover: false, zoomToBoundsOnClick: true}); // agora eu crio marcadores individuais e, finalmente, os adiciono à variável 'allParks'. var parkA = L.marker (novo L.LatLng (13.234, 76.321); parkA.bindPopup ("Aqui o parqueA"); var parkB = L.marker (novo L.LatLng (13.325, 76.675); parkB.bindPopup (" Aqui, o parkB "); var parkC = L.marker (new L.LatLng (12.962, 77.168); parkC.bindPopup (" Aqui o parkD "); // Agora, adiciono todos esses marcadores à variável 'allParks'. AllParks. addLayer (parkA); allParks.addLayer (parkB); allParks.addLayer (parkC); // assim, criei muitos parques e finalmente adicionei ao varaible 'allParks' // Agora, como afirmado anteriormente, com um clique de um botão a função a seguir deve ser acionada, fazendo um loop através da variável de cluster de marcador (allParks) e descobrir o parque (tendo lat = 12.962, long = 77.168) e abrir seu pop-up no mapa. // é aqui que estou tentando e falhando .Estou usando o método 'eachlayer' para loop allParks.eachLayer (function (layer) {if (((layer.getLatLng (). lat) = 12.962) && ((layer.getLatLng (). lng) = 77.168)) {layer.openPopup ();}});

Você pode me ajudar a percorrer essa variável e descobrir apenas aquele parque que satisfaz a condição e abrir seu pop-up no mapa?


Pode ser uma resposta tardia, mas eu tinha os mesmos requisitos há alguns dias e não consegui encontrar nenhuma solução decente na internet, então acabo fazendo a minha própria, que acredito ser bem limpa e não usar o TypeScript regras e regulamentos.

@Component ({seletor: "client-home", templateUrl: "./home.component.html", styleUrls: ["./home.component.scss"]}) export class MyComponent implementa OnInit {private _map: L. Mapa; // Supondo que você tenha a referência do mapa aqui private _markers: L.Marker [] = []; // Supondo que você tenha os marcadores neste array private _cluster: L.markerClusterGroup; // Você provavelmente deve ter feito isso em algum lugar do seu código (ngOnInit no meu caso): public ngOnInit () {this.cluster = L.markerClusterGroup ({animate: false, // Eu não queria as animações, então as desativei }); this.cluster.addLayers (this._markers); this._map.addLayer (this.cluster); } // Este método irá encontrar o cluster que tem a latitude / longitude específica em seus limites (este era meu alvo) public onPropertyObjectMouseEnter (location: {latitude: number, longitude: number}) {// Loop por cada camada no mapa this._map.eachLayer ((layer: L.Layer) => {// Se a camada for um marcador de objeto de cluster if (layer instanceof L.MarkerCluster) {// a variável "layer" for um marcador de cluster. Faça o que for necessário aqui :) // Não precisa se preocupar com o código inferior (fiz conforme minha exigência para verificar se o local inclui neste marcador de cluster ou não) deixe clusterHasTheLocation = layer.getBounds (). Contains ({lat: location. latitude, lng: location.longitude}); if (clusterHasTheLocation) {layer.getElement (). classList.add ("destaque"); retorna falso; // Saia do loop .eachLayer}}}); }}

Há um erro em seus testes de igualdade, você faz afetação em vez de comparação. Use o triplo ou duplo igual, mas não o único:

allParks.eachLayer (function (layer) {if (layer.getLatLng (). lat === 12.962 && layer.getLatLng (). lng === 77.168) {layer.openPopup ();}