Utilisation des extensions dans le menu catalogue

src/components/carte/Layer/Layer.vue

@@ -1,22 +1,64 @@
 <script setup lang="js">
+
+import { useLogger } from 'vue-logger-plugin'
+import { useDataStore } from "@/stores/dataStore"
+
 // FIXME c'est pour l'exemple car les couches sont gérées par les extensions !
 // cf. LayerManager
-import TileLayer from 'ol/layer/Tile.js'
+import { 
+  LayerMapBox as GeoportalMapBox,
+  LayerWMS as GeoportalWMS,
+  LayerWMTS as GeoportalWMTS
+} from 'geoportal-extensions-openlayers'
 
 const props = defineProps({
   layerOptions: Object
 })
 
+const log = useLogger()
+const store = useDataStore()
+
 const map = inject('map')
-const layer = ref(new TileLayer(props.layerOptions))
+const layer = ref(null)
 
 onMounted(() => {
-  map?.addLayer(layer.value)
+  var value = store.getLayerByName(props.layerOptions.name, props.layerOptions.service);
+  var params = store.getLayerParamsByName(props.layerOptions.name, props.layerOptions.service);
+  value.params = params; // fusion
+  log.debug("layer to add", value);
+
+  var service = props.layerOptions.service;
+  var name = props.layerOptions.name;
+  switch (service) {
+    case "WMS":
+      layer.value = new GeoportalWMS({
+        layer : name,
+        configuration : value
+      });
+      break;
+    case "WMTS":
+      layer.value = new GeoportalWMTS({
+        layer : name,
+        configuration : value
+      });
+      break;
+    case "TMS":
+      // INFO le style par defaut est utilisé !
+      layer.value = new GeoportalMapBox({
+        layer : name,
+        configuration : value
+      });
+      break;
+    default:
+  }
+  if (layer.value) {
+    map.addLayer(layer.value);
+  }
 })
 
 
 onUnmounted(() => {
-  map?.removeLayer(layer.value)
+  map.removeLayer(layer.value)
 })
 
 </script>

src/components/carte/Layer/LayerManager.vue

@@ -2,42 +2,20 @@
 // FIXME c'est juste pour l'exemple car on va ajouter l'extension LayerSwitcher !
 // Donc provisoire...
 import Layer from '@/components/carte/Layer/Layer.vue'
-import { resolutions } from '@/composables/layers'
-import WMTS from 'ol/source/WMTS.js';
-import WMTSTileGrid from 'ol/tilegrid/WMTS';
 
 const props = defineProps({
   layersList: Object
 })
-var layersConfList = computed(() => {return toRaw(props.layersList).map(layername => addWMTSLayer(layername))});
-
-function addWMTSLayer(layer) {
-  if (layer && Object.keys(layer).length) {
-    const startRes = Object.keys(layer.wmtsOptions.tileMatrixSetLimits)[0]
-    const endRes = Object.keys(layer.wmtsOptions.tileMatrixSetLimits).slice(-1)
-    const sourceOptions = {
-    url: 'https://wmts.geopf.fr/wmts',
-    layer: layer.name,
-    matrixSet: layer.wmtsOptions.tileMatrixSetLink,
-    projection: layer.defaultProjection,
-    format: layer.formats[0].name,
-    style: layer.styles[0].name,
-    tileGrid : new WMTSTileGrid({
-      origin: [-20037508,20037508], // topLeftCorner
-      resolutions: resolutions.slice(startRes, endRes), // résolutions
-      matrixIds: Object.keys(layer.wmtsOptions.tileMatrixSetLimits) // ids des TileMatrix
-    })
-  };
-  var source = new WMTS(sourceOptions);
-  source._title = layer.name;
-  return {
-        source : source,
-        opacity: 1
 
+// ça me semble inutile ?
+var layersConfList = computed(() => {
+  return toRaw(props.layersList).map(layer => {
+    return {
+      name : layer.name,
+      service : layer.serviceParams.id.split(":")[1]
     }
-  }
-  else return {}
-}
+  })
+});
 
 </script>
 

src/components/menu/MenuCatalogue.vue

@@ -12,6 +12,7 @@ const log = useLogger()
 const props = defineProps({
     layers: Object
 })
+
 const headingTitle = "Catalogue de données";
 const buttonLabel = "bouton label sensé déplier le side menu";
 const collapsable = true;
@@ -20,27 +21,27 @@ const menuItems = Object.values(props.layers).map((layer) => {
     return {
         text: layer.title,
         to: "/",
-        id:layer.name
+        id: layer.name
     }
-}).slice(0, 50);
+})
 
 
-const emit = defineEmits(['selectLayer'])
+const emit = defineEmits(['onClickSelectLayer'])
 
-function selectLayer(e) {
+function onClickSelectLayer(e) {
     const newLayername = e.target.textContent
     emit("addLayer", newLayername);
 }
 
 </script>
 
 <template>
-    <DsfrSideMenu
+  <DsfrSideMenu
     :heading-title="headingTitle"
     :button-label="buttonLabel"
     :collapsable="collapsable"
     :menu-items="menuItems"
-    @click="selectLayer"
+    @click="onClickSelectLayer"
   />
 </template>
 

src/views/CartoAndTools.vue

@@ -5,9 +5,11 @@ import StoreDataLoading from '@/components/StoreDataLoading.vue';
 import LeftMenu from '@/components/menu/LeftMenu.vue'
 import RightMenu from '@/components/menu/RightMenu.vue'
 
+import { useLogger } from 'vue-logger-plugin'
 import { useControls } from '@/composables/controls'
 import { useDataStore } from "@/stores/dataStore"
 
+const log = useLogger()
 const dataStore = useDataStore()
 const catalogueProps = { layersConf : toRaw(dataStore.getLayers()) };
 
@@ -38,6 +40,7 @@ function getLayerConfFromTitle(layername) {
 function addLayer(layername) {
   newLayer.value = layername;
   listBeforeUpdate.value.concat(layername)
+  log.debug(listBeforeUpdate);
 }
 
 </script>