[photo & carto] Définition explicite de l'ordre des couches fix #67

app/src/components/MapBox.vue

@@ -131,6 +131,7 @@ const checkboxAlphanum = ref(false)
 
 const dicPhotos = ref({}) // Contient toutes les photos des missions sélectionnées (name => {name, center, extent, infos})
 
+// Layers vectoriels liés aux éléments sélectionnés ou affichés sur la carte (emprises de scans, emprises de photos, géométries survolées, etc.)
 const vectorLayers = ref({
   pin: null,
   geom: null,
@@ -152,6 +153,7 @@ const clearAllLayersTA = () => {
   vectorLayers.value.geomMouseOver.getSource().clear()
 }
 
+// Layers de contexte (communes, départements, feuilles) qui ne sont pas des couches raster
 const vectorOtherLayers = ref(null)
 
 let tab_couples_photo = []
@@ -579,7 +581,19 @@ onMounted(() => {
       controls: defaultControls({ zoom: false, rotate: false }),
     })
 
-    vectorLayers.value.pin.setZIndex(999);
+    // Assurer l'ordre des layers : raster (zIndex 0), vecteur de contexte (zIndex 100), vecteur d'affichage (zIndex 300), pin (zIndex 999)
+    Object.values(vectorLayers.value).forEach((layer) => {
+      // On gère ici les vecteurs d'affichage (géométries, emprises, croix) et le pin pour qu'ils soient toujours au-dessus des autres couches
+      if (layer !== vectorLayers.value.pin) {
+        layer.setZIndex(300)
+      } else {
+        layer.setZIndex(999)
+      }
+    })
+    Object.values(vectorOtherLayers.value).forEach((layer) => {
+      // On gère ici les couches de contexte pour qu'elles soient au-dessus des couches raster mais en dessous des couches d'affichage
+      layer.setZIndex(100)
+    })
 
     olMap.value.on('pointermove', (event) => {
       // On récupère les coordonnées

app/src/components/composable/getWMTS.js

@@ -176,6 +176,7 @@ export function createInitialWMTSLayers(layers, activeLayerIndex) {
     return new TileLayer({
       source: wmtsSource,
       visible: index === activeLayerIndex,
+      zIndex: 0,
     })
   })
 }
@@ -206,10 +207,15 @@ export function updateWMTSLayers(olMap, newLayers) {
       return new TileLayer({
         source: createWmtsSource(layer.id),
         visible: wmtsLayers.length + index === 0,
+        zIndex: 0,
       })
     })
 
-    layersToAdd.forEach((layer) => olMap.addLayer(layer))
+    // Insérer les nouveaux layers raster à la position correcte (après les layers raster existants, avant les vectoriels)
+    const insertPosition = wmtsLayers.length
+    layersToAdd.forEach((layer, index) => {
+      mapLayers.insertAt(insertPosition + index, layer)
+    })
   }
 }