GSLUX-623 intégration 3D

bundle/assets/locales/client.fr.json

@@ -1752,7 +1752,7 @@
   "Click to continue drawing the polygon.": "Cliquez pour continuer le dessin du poligone.",
   "Click to continue drawing<br>Double-click or click last point to finish": "Cliquer pour continuer le dessin<br />Double cliquer ou cliquer sur le dernier point pour finir le dessin",
   "Click to continue drawing<br>Double-click or click starting point to finish": "Cliquer pour continuer le dessin<br />Double cliquer ou cliquer sur le dernier point de départ pour finir le dessin",
-  "Date:": "Date:",
+  "Date:": "Date :",
   "Does not match any criterion": "Ne correspond à aucun critère",
   "Double-click or click last point to finish.": "Double cliquer ou cliquer sur le dernier point pour terminer.",
   "Double-click or click starting point to finish.": "Double cliquer ou cliquer sur le premier point pour terminer.",

package.json

@@ -29,7 +29,8 @@
     "@camptocamp/ogc-client": "^0.3.4",
     "file-saver": "^2.0.5",
     "luxon": "^3.4.1",
-    "ol": "^6.5.0",
+    "mapbox-gl": "^1.7.0",
+    "ol": "6.15.0",
     "pinia": "^2.0.26",
     "sortablejs": "^1.15.0",
     "tailwindcss": "^3.2.4",
@@ -38,7 +39,6 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",
-    "@geoblocks/ol-maplibre-layer": "^0.0.5",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@pinia/testing": "^0.0.14",
     "@rushstack/eslint-patch": "^1.1.4",

src/App.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, watch } from 'vue'
 import { storeToRefs } from 'pinia'
-import MapLibreLayer from '@geoblocks/ol-maplibre-layer'
+import MapLibreLayer from '@/lib/ol-maplibre-layer'
 
-import { MapLibreLayerType } from './composables/map/map.model'
 import HeaderBar from './components/header/header-bar.vue'
 import FooterBar from './components/footer/footer-bar.vue'
 
@@ -24,6 +23,7 @@
 import { statePersistorMyMapService } from '@/services/state-persistor/state-persistor-mymap.service'
 import { useAppStore } from '@/stores/app.store'
 import useMap from '@/composables/map/map.composable'
+import traverseLayer from '@/lib/tools.js'
 
 // Important, keep order!
 statePersistorMyMapService.bootstrap()
@@ -52,10 +52,14 @@
   map.updateSize()
 
   // And trigger update MapLibre layers' canvas size
-  map.getAllLayers().forEach(layer => {
+  // the utility function traverseLayer is used as a workaround until OL is updated to 6.15
+  // then the function getAllLayers below (added in OL v.6.10.0) can be used
+  // map.getAllLayers().forEach(layer => {
+  traverseLayer(map.getLayerGroup(), [], (layer: any) => {
     if (layer instanceof MapLibreLayer) {
-      ;(layer as MapLibreLayerType).maplibreMap.resize()
+      ;(layer as MapLibreLayer).getMapLibreMap().resize()
     }
+    return true
   })
 
   // TODO: Add slide effect and do this update after slide animation ends

src/bundle/lib.ts

@@ -19,8 +19,11 @@ import FooterBar from '@/components/footer/footer-bar.vue'
 import LayerPanel from '@/components/layer-panel/layer-panel.vue'
 import SliderComparator from '@/components/slider/slider-comparator.vue'
 import useMap from '@/composables/map/map.composable'
+import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
+import useOpenLayers from '@/composables/map/ol.composable'
 import { useAppStore } from '@/stores/app.store'
 import { useMapStore } from '@/stores/map.store'
+import { useStyleStore } from '@/stores/style.store'
 import { useThemeStore } from '@/stores/config.store'
 import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service'
 import { statePersistorLayersService } from '@/services/state-persistor/state-persistor-layers.service'
@@ -29,6 +32,7 @@ import { statePersistorLayersOpenService } from '@/services/state-persistor/stat
 import { statePersistorStyleService } from '@/services/state-persistor/state-persistor-bgstyle.service'
 import { statePersistorMyMapService } from '@/services/state-persistor/state-persistor-mymap.service'
 import { themeSelectorService } from '@/components/theme-selector/theme-selector.service'
+import MapLibreLayer from '@/lib/ol-maplibre-layer'
 
 import i18next from 'i18next'
 import backend from 'i18next-http-backend'
@@ -93,8 +97,11 @@ export {
   LayerPanel,
   SliderComparator,
   useMap,
+  useMvtStyles,
+  useOpenLayers,
   useAppStore,
   useMapStore,
+  useStyleStore,
   useThemeStore,
   statePersistorBgLayerService,
   statePersistorLayersService,
@@ -103,4 +110,5 @@ export {
   statePersistorStyleService,
   statePersistorMyMapService,
   themeSelectorService,
+  MapLibreLayer,
 }

src/components/slider/slider-comparator.vue

@@ -60,6 +60,8 @@ watch(sliderOffset, () => {
 function activate() {
   const olLayer = openLayers.getLayerFromCache(sliderTopLayer.value)
 
+  if (!olLayer) return
+
   olLayerPrerenderEvent = olLayer.on(
     <EventTypes>EventType.PRERENDER,
     function (event) {

src/components/style-selector/expert-style-selector.vue

@@ -46,12 +46,12 @@ function setCustomStyle(styleEvent: Event) {
 }
 
 function getStyleUrl() {
-  if (styleStore.styleId === null) {
+  if (styleStore.styleSerial === null) {
     return styleService.getDefaultMapBoxStyleUrl(
       styleService.getVectorId(mapStore.bgLayer)
     )
   } else {
-    return `${styleService.getvtstyleUrl_}?id=${styleStore.styleId}`
+    return `${styleStore.registerUrls.get('get')}?id=${styleStore.styleSerial}`
   }
 }
 </script>

src/composables/background-layer/background-layer.wmts-helper.ts

@@ -74,6 +74,16 @@ export function createBgWmtsLayer(layer: Layer): TileLayer<WMTS> {
       id,
     },
   })
+  tileLayer.set(
+    'olcs.extent',
+    transformExtent(
+      bgConfig.olcs_extent,
+      bgConfig.olcs_extent_projection,
+      bgConfig.bg_layer_projection
+    )
+  )
+  tileLayer.set('label', name)
+  tileLayer.set('id', id)
 
   // tileLayer.type = 'TILE'
   // ngeoMiscDecorate.layer(layer);

src/composables/map/map.model.ts

@@ -1,3 +1,3 @@
-import MapLibreLayer from '@geoblocks/ol-maplibre-layer'
+import MapLibreLayer from '@/lib/ol-maplibre-layer'
 
 export declare type MapLibreLayerType = typeof MapLibreLayer

src/composables/map/ol.composable.ts

@@ -6,7 +6,7 @@ import { ImageWMS, WMTS } from 'ol/source'
 import WmtsTileGrid from 'ol/tilegrid/WMTS'
 import { getTopLeft } from 'ol/extent.js'
 import { get as getProjection, transformExtent } from 'ol/proj'
-import MapLibreLayer from '@geoblocks/ol-maplibre-layer'
+import MapLibreLayer from '@/lib/ol-maplibre-layer'
 
 import { layersCache } from '@/stores/layers.cache'
 import type { Layer, LayerId } from '@/stores/map.store.model'
@@ -67,6 +67,9 @@ function createWmsLayer(layer: Layer): ImageLayer<ImageWMS> {
     },
     source: olSource,
   })
+  olLayer.set('olcs.extent', getOlcsExtent())
+  olLayer.set('label', name)
+  olLayer.set('id', id)
 
   return olLayer
 }
@@ -102,6 +105,9 @@ function createWmtsLayer(layer: Layer): TileLayer<WMTS> {
       id,
     },
   })
+  olLayer.set('olcs.extent', getOlcsExtent())
+  olLayer.set('label', name)
+  olLayer.set('id', id)
 
   if (layer.currentTimeMinValue) {
     const newLayer =
@@ -148,15 +154,18 @@ function createVectorLayer(
     metadata: bgLayer.metadata,
   })
   const styleStore = useStyleStore()
-  if (newBgBaseLayer?.maplibreMap.loaded()) {
-    styleStore.setBaseStyle(bgLayer.id, newBgBaseLayer.getStyle())
+  if (newBgBaseLayer?.getMapLibreMap().loaded()) {
+    styleStore.setBaseStyle(
+      bgLayer.id,
+      newBgBaseLayer?.getMapLibreMap().getStyle()
+    )
   } else {
     new Promise(resolve =>
-      newBgBaseLayer?.maplibreMap.once('data', resolve)
+      newBgBaseLayer?.getMapLibreMap().once('data', resolve)
     ).then(() =>
       styleStore.setBaseStyle(
         bgLayer.id,
-        newBgBaseLayer?.maplibreMap.getStyle()
+        newBgBaseLayer?.getMapLibreMap().getStyle()
       )
     )
   }
@@ -213,7 +222,8 @@ export default function useOpenLayers() {
   }
 
   function addLayer(olMap: OlMap, layer: Layer) {
-    const baseLayer = getLayerFromCache(layer)
+    if (!layer) return
+    const baseLayer = getOrCreateLayer(layer)
     olMap.addLayer(baseLayer)
   }
 
@@ -261,7 +271,7 @@ export default function useOpenLayers() {
     layersCache.set(id, layer)
   }
 
-  function getLayerFromCache(layer: Layer): BaseLayer {
+  function getOrCreateLayer(layer: Layer): BaseLayer {
     const id = layer.id
 
     const cachedLayer = layersCache.get(id)
@@ -274,6 +284,12 @@ export default function useOpenLayers() {
     }
   }
 
+  function getLayerFromCache(
+    layer: Layer | undefined | null
+  ): BaseLayer | null {
+    return layer ? layersCache.get(layer.id) || null : null
+  }
+
   function applyOnBgLayer(
     olMap: OlMap,
     callbackFunction: (bgLayer: BaseLayer) => void
@@ -295,10 +311,11 @@ export default function useOpenLayers() {
       .getArray()
       .findIndex(layer => layer.getZIndex() === DEFAULT_BGZINDEX)
 
+    const oldBgLayerId = mapLayers.getArray()[currentBgLayerPos]?.get('id')
     let bgBaseLayer: BaseLayer | undefined = undefined
     if (bgLayer) {
       if (isLayerCached(bgLayer)) {
-        bgBaseLayer = getLayerFromCache(bgLayer)
+        bgBaseLayer = getLayerFromCache(bgLayer)!
       } else {
         // try to create vector layer from vector sources
         if (vectorSources) {
@@ -326,7 +343,9 @@ export default function useOpenLayers() {
         olMap.addLayer(bgBaseLayer)
       }
     }
-    statePersistorStyleService.restoreStyle(true)
+    if (oldBgLayerId !== bgLayer?.id) {
+      statePersistorStyleService.restoreStyle(true)
+    }
   }
 
   return {

src/composables/map/ol.synchronizer.ts

@@ -88,12 +88,28 @@ export class OlSynchronizer {
     watch(appliedStyle, (style: StyleSpecification) => {
       if (styleStore.bgStyle === null && !styleStore.isExpertStyleActive) {
         styleService
-          .unregisterStyle(styleStore.styleId)
-          .then((styleStore.styleId = null))
+          .unregisterStyle(styleStore.styleSerial, styleStore.registerUrls)
+          .then((styleStore.styleSerial = null))
       } else {
         styleService
-          .registerStyle(style, styleStore.styleId)
-          .then(id => (styleStore.styleId = id))
+          .registerStyle(style, styleStore.styleSerial, styleStore.registerUrls)
+          .then(serial => {
+            styleStore.styleSerial = serial
+            const id = mapStore?.bgLayer?.id
+            if (mapStore?.bgLayer && id !== undefined && serial !== undefined) {
+              openLayers.applyOnBgLayer(map, bgLayer => {
+                bgLayer.set(
+                  'xyz_custom',
+                  styleService.getDefaultMapBoxStyleXYZ(serial)
+                )
+              })
+              openLayers.setBgLayer(
+                map,
+                mapStore?.bgLayer,
+                styleStore.bgVectorSources
+              )
+            }
+          })
       }
       openLayers.applyOnBgLayer(map, bgLayer =>
         styleService.applyConsolidatedStyle(bgLayer, style)

src/composables/mvt-styles/mvt-styles.composable.ts

@@ -4,9 +4,11 @@
   stylePropertyTypeList,
   StyleCapabilities,
   BgLayerDef,
+  VectorSourceDict,
   VectorStyleDict,
   StyleSpecification,
 } from '@/composables/mvt-styles/mvt-styles.model'
+import { useStyleStore } from '@/stores/style.store'
 import type { Layer } from '@/stores/map.store.model'
 import { bgConfigFixture } from '@/__fixtures__/background.config.fixture'
 import BaseLayer from 'ol/layer/Base'
@@ -32,6 +34,24 @@
     return isValidUUIDv4Regex.test(serial)
   }
 
+  const styleStore = useStyleStore()
+  function setCustomStyleSerial(
+    bgLayer: Layer | undefined | null,
+    serial: string
+  ) {
+    if (bgLayer === null || bgLayer === undefined) return
+    const newVectorSources: VectorSourceDict = new Map()
+    styleStore.bgVectorSources.forEach((vectorSource, key) => {
+      if (key === bgLayer.id) {
+        const newVectorSource = { ...vectorSource, xyz_custom: serial }
+        newVectorSources.set(key, newVectorSource)
+      } else {
+        newVectorSources.set(key, vectorSource)
+      }
+    })
+    styleStore.setBgVectorSources(newVectorSources)
+  }
+
   function setConfigForLayer(
     label: string,
     keyword: string,
@@ -168,7 +188,7 @@
     if (!baseStyles.get(bgLayer.id)) return
     const baseStyle: StyleSpecification = JSON.parse(
       JSON.stringify(baseStyles.get(bgLayer.id))
     ) as any
     if (!baseStyle) return
     if (!baseStyle || !baseStyle.layers) return
     if (activeStyle) {
@@ -177,7 +197,7 @@
           for (const styleProperty of stylePropertyTypeList) {
             const props = styleItem[`${styleProperty}s`] || []
             if (props.includes(layer.id)) {
               const basePaint: any = Object.assign(
                 {},
                 baseStyle.layers[i].paint
               )
@@ -199,21 +219,24 @@
     return baseStyle
   }
 
-  const getvtstyleUrl_ = '/getvtstyle'
-  const uploadvtstyleUrl_ = '/uploadvtstyle'
-  const deletevtstyleUrl_ = '/deletevtstyle'
-
-  function unregisterStyle(styleId: String | null) {
+  function unregisterStyle(
+    styleId: String | null,
+    registerUrls: Map<string, string>
+  ) {
     if (styleId === null) {
       return Promise.resolve()
     } else {
-      const url = `${deletevtstyleUrl_}?id=${styleId}`
+      const url = `${registerUrls.get('delete')}?id=${styleId}`
       return fetch(url).catch(() => '')
     }
   }
 
-  function registerStyle(style: StyleSpecification, oldStyleId: String | null) {
-    return unregisterStyle(oldStyleId).then(() => {
+  function registerStyle(
+    style: StyleSpecification,
+    oldStyleId: String | null,
+    registerUrls: Map<string, string>
+  ) {
+    return unregisterStyle(oldStyleId, registerUrls).then(() => {
       const formData = new FormData()
       const data = JSON.stringify(style)
       const blob = new Blob([data], { type: 'application/json' })
@@ -222,7 +245,7 @@
         method: 'POST',
         body: formData,
       }
-      return fetch(uploadvtstyleUrl_, options)
+      return fetch(registerUrls.get('upload') || '', options)
         .then(response => response.json())
         .then(result => {
           return result.id
@@ -289,16 +312,17 @@
 
   return {
     getDefaultMapBoxStyleUrl,
+    getDefaultMapBoxStyleXYZ,
     setConfigForLayer,
     getRoadStyleFromSimpleStyle,
     applyDefaultStyle,
     applyConsolidatedStyle,
     getVectorId,
+    setCustomStyleSerial,
     unregisterStyle,
     registerStyle,
     checkSelection,
     isLayerStyleEditable,
     getStyleCapabilitiesFromLayer,
-    getvtstyleUrl_,
   }
 }

src/composables/mvt-styles/mvt-styles.model.ts

@@ -1,6 +1,8 @@
 import { LayerId } from '@/stores/map.store.model'
-import type { StyleSpecification } from 'maplibre-gl'
-export type { StyleSpecification } from 'maplibre-gl'
+// import type { StyleSpecification } from 'maplibre-gl'
+// export type { StyleSpecification } from 'maplibre-gl'
+import type { StyleSpecification } from '@/lib/ol-maplibre-layer'
+export type { StyleSpecification } from '@/lib/ol-maplibre-layer'
 
 export interface BgLayerDef {
   icon_id: string