Estoy usando el paquete ngx-leaflet para el mapa en la aplicación angular. Configuré algunas capas en geoserver y apliqué esas capas en el mapa. Capas de ejemplo:
Al renderizar estas capas en map. Al principio, muestra la capa Actual y muestra Pendiente sobre Actual e Histórica sobre Pendiente.
¿Se puede revertir?
Me refiero a que el Histórico debe estar en la parte inferior y luego Pendiente en la parte superior de la capa Histórica y Actual en la parte superior de Pendiente.
Las capas de folletos se agregan al mapa en orden ascendente. Entonces, si llama a map.addto(layer) varias veces, la primera capa agregada estará en la parte inferior, con cada capa subsiguiente apilada en la parte superior.
Hay varias formas de controlar cómo se agregan las capas para que su orden sea explícito.
Primero, ordénelos explícitamente en el DOM:
<div leaflet ... > <div [leafletLayer]="..."/> // bottom layer <div [leafletLayer]="..."/> // middle layer <div [leafletLayer]="..."/> // top layer </div>En segundo lugar, puede organizarlos en el orden correcto en la matriz enlazada:
layers: Layer[] = [ bottomLayer, middleLayer, topLayer ] ... <div leaflet [leafletLayers]="layers" ... > </div>Estas no son la única manera de lograr lo que está tratando de hacer. Solo mostrándote que hay opciones.
Una nota importante a tener en cuenta es que esto solo impone el orden de las capas en la carga inicial. Una vez que comience a agregar/eliminar capas (usando controles o modificando mediante programación el DOM o la matriz de capas enlazadas), el orden de las capas ya no coincide con el orden en el DOM/matriz. Esto se debe a que el enlace de datos solo agrega/elimina capas según sea necesario, no intenta mantener el orden. Si iba a hacer eso, tendría que eliminar todas las capas y volver a agregarlas en el orden correcto.
Dado que hay tantas formas de interactuar con las entidades en el mapa (p. ej., controles, mediante programación, a través del enlace de datos), es difícil imponer el orden cuando se agregan o eliminan capas dinámicamente.