Estoy trabajando en Angular CLI en el que construí un Leaflet Map.
El objetivo es seleccionar capas con casillas de verificación para mostrarlas en el mapa como se muestra en la parte HTML:
<div class="form-check"> <input class="form-check-input" type="checkbox" (change)="testCheck($event)" name="releves"> <label class="form-check-label">Layer 1</label> </div> Cuando selecciono "Layer1", la casilla de verificación está marcada y eso ejecuta testCheck($event) .
Como muestra la parte de TypeScript, agregué líneas de código para mostrar la capa en el mapa:
testCheck(event: any){ if (event.target.name == 'releves'){ var releves = L.tileLayer.wms('https://URL_TO_THE_WMS', {layers: 'myLayer',format: 'image/png',transparent:true}); if (event.target.checked === true){ if (! this.mymap.hasLayer(releves)) { releves.addTo(this.mymap); } else if (this.mymap.hasLayer(releves)) { // do nothing } let i = 0; this.mymap.eachLayer(function(){ i += 1; }); console.log('Map has', i, 'layers.'); } else { if (this.mymap.hasLayer(releves)) { console.log ("has layer 1"); this.mymap.removeLayer(releves); } } } } La Capa 1 se muestra bien en el mapa, no hay problema aquí (ver releves.addTo(this.mymap) ). Pero tengo dos problemas que no puedo resolver:
event.target.name no es true en la parte de otra condición ), la capa no se elimina mientras uso el método removeLayer .hasLayer no parece funcionar. De hecho, después de haber mostrado la capa 1, cuando desmarco y pruebo si la capa está presente, debería recibir el mensaje console.log "has layer 1" antes de la eliminación. Pero no hay nada... ¿Puedes saber cómo depurar eso?
Cualquier ayuda sería muy apreciada, gracias
Usted crea una nueva capa de releves cada vez que se llama al método testCheck , por lo que hasLayer(releves) siempre será false .
Almacene su capa en un estado "permanente", generalmente como miembro de su componente Angular, exactamente como lo hace para mymap :
@Component({}) export class MyComponent { releves = L.tileLayer.wms(); testCheck(event) { if (this.mymap.hasLayer(this.releves)) { // etc. } } }