feat(map): remove map layers from legend

CartONG · Jan 18, 2025 · 18a9d9a · 18a9d9a
1 parent 528e4ac
commit 18a9d9a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/vue/src/services/map/LegendService.ts b/vue/src/services/map/LegendService.ts
@@ -15,6 +15,7 @@ export class LegendService {
       legendList.value.forEach((legendItem, i) => {
         legendItem.order = i
       })
+      console.log(legendList.value)
     } else {
       if (layerType === LayerType.APP_LAYER) {
         legendList.value.push({
@@ -59,4 +60,19 @@ export class LegendService {
     const layers = map.getStyle().layers // Récupère la liste des couches
     console.log('Liste des couches:', layers)
   }
+
+  static updateAtlasSubLayersOrder(
+    atlasMapLayer: AtlasLayerLegendItem,
+    atlasThematicMaps: Ref<AtlasMap[]>
+  ) {
+    const atlasThematicMap = atlasThematicMaps.value.find((x) => x.id === atlasMapLayer.id)
+    if (atlasThematicMap) {
+      atlasMapLayer.subLayers.map((sortedSubLayer) => {
+        for (const sublayer of atlasThematicMap.subLayers) {
+          if (sublayer.id === sortedSubLayer.name) sublayer.mapOrder = sortedSubLayer.order
+        }
+      })
+      atlasThematicMap.subLayers.sort((a, b) => a.mapOrder! - b.mapOrder!)
+    }
+  }
 }
diff --git a/vue/src/stores/myMapStore.ts b/vue/src/stores/myMapStore.ts
@@ -88,16 +88,31 @@ export const useMyMapStore = defineStore(StoresList.MY_MAP, () => {
   }
 
   function updateAtlasSubLayersOrder(atlasMapLayer: AtlasLayerLegendItem) {
-    const atlasThematicMap = atlasThematicMaps.value.find((x) => x.id === atlasMapLayer.id)
-    if (atlasThematicMap) {
-      atlasMapLayer.subLayers.map((sortedSubLayer) => {
-        for (const sublayer of atlasThematicMap.subLayers) {
-          if (sublayer.id === sortedSubLayer.name) sublayer.mapOrder = sortedSubLayer.order
+    LegendService.updateAtlasSubLayersOrder(atlasMapLayer, atlasThematicMaps)
+    updateAtlasLayersVisibility(atlasMapLayer.id, false)
+    updateLegendOrder()
+  }
+
+  function removeLayerFromLegend(item: AtlasLayerLegendItem | AppLayerLegendItem) {
+    if (item.layerType === LayerType.ATLAS_LAYER) {
+      atlasThematicMaps.value.map((x) => {
+        if (x.id === item.id) {
+          x.mainLayer.isShown = false
+          updateAtlasLayersVisibility(item.id)
         }
       })
-      atlasThematicMap.subLayers.sort((a, b) => a.mapOrder! - b.mapOrder!)
-      updateAtlasLayersVisibility(atlasMapLayer.id, false)
-      updateLegendOrder()
+    } else {
+      switch (item.id) {
+        case ItemType.ACTOR:
+          actorLayer.value!.isShown = false
+          break
+        case ItemType.PROJECT:
+          projectLayer.value!.isShown = false
+          break
+        case ItemType.RESOURCE:
+          resourceLayer.value!.isShown = false
+          break
+      }
     }
   }
 
@@ -116,6 +131,7 @@ export const useMyMapStore = defineStore(StoresList.MY_MAP, () => {
     updateAtlasLayersVisibility,
     legendList,
     updateLegendOrder,
-    updateAtlasSubLayersOrder
+    updateAtlasSubLayersOrder,
+    removeLayerFromLegend
   }
 })
diff --git a/vue/src/views/map/components/MyMapLegend.vue b/vue/src/views/map/components/MyMapLegend.vue
@@ -22,7 +22,11 @@
               <span class="text-subtitle-2 text-capitalize ml-1">{{ item.name }}</span>
             </div>
             <div class="d-flex align-center">
-              <v-icon color="dark-grey" icon="mdi-delete-outline"></v-icon>
+              <v-icon
+                color="dark-grey"
+                icon="mdi-delete-outline"
+                @click="removeMainLayer(item)"
+              ></v-icon>
             </div>
           </div>
           <template v-if="item.layerType === layerType.ATLAS_LAYER">
@@ -55,7 +59,7 @@ import { useMyMapStore } from '@/stores/myMapStore'
 import { ref } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import { LayerType } from '@/models/enums/geo/LayerType'
-import type { AtlasLayerLegendItem } from '@/models/interfaces/map/Legend'
+import type { AppLayerLegendItem, AtlasLayerLegendItem } from '@/models/interfaces/map/Legend'
 const layerType = LayerType
 
 const legendIsShown = ref(false)
@@ -74,6 +78,10 @@ function updateSubLayerOrder(item: AtlasLayerLegendItem) {
   })
   mapStore.updateAtlasSubLayersOrder(item)
 }
+
+function removeMainLayer(item: AtlasLayerLegendItem | AppLayerLegendItem) {
+  mapStore.removeLayerFromLegend(item)
+}
 </script>
 
 <style lang="scss">