Gestion des controles par defaut Openlayers

src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Attributions: typeof import('./components/carte/control/Attributions.vue')['default']
     Control: typeof import('./components/carte/Control.vue')['default']
     DsfrFooter: typeof import('@gouvminint/vue-dsfr')['DsfrFooter']
     DsfrHeader: typeof import('@gouvminint/vue-dsfr')['DsfrHeader']
@@ -20,5 +21,6 @@ declare module 'vue' {
     SearchEngine: typeof import('./components/carte/control/SearchEngine.vue')['default']
     StoreDataLoading: typeof import('./components/StoreDataLoading.vue')['default']
     View: typeof import('./components/carte/View.vue')['default']
+    Zoom: typeof import('./components/carte/control/Zoom.vue')['default']
   }
 }

src/components/carte/Control.vue

@@ -6,6 +6,8 @@ import OSM from 'ol/source/OSM'
 import SearchEngine from './control/SearchEngine.vue'
 import ScaleLine from './control/ScaleLine.vue'
 import OverviewMap from './control/OverviewMap.vue'
+import Zoom from './control/Zoom.vue'
+import Attributions from './control/Attributions.vue'
 
 import { useControls } from '@/composables/controls'
 
@@ -41,9 +43,21 @@ const overviewMapOptions = {
     })
   ]
 }
+
+const zoomOptions = {}
+const attributionsOptions = {}
+
 </script>
 
 <template>
+  <Zoom
+    :visibility="props.controlOptions.includes(useControls.Zoom)"
+    :zoom-options="zoomOptions"
+  />
+  <Attributions
+    :visibility="props.controlOptions.includes(useControls.Attributions)"
+    :attributions-options="attributionsOptions"
+  />
   <SearchEngine
     :visibility="props.controlOptions.includes(useControls.SearchEngine)"
     :search-engine-options="searchEngineOptions"

src/components/carte/Map.vue

@@ -3,13 +3,23 @@ import { onMounted, ref } from 'vue'
 
 import Map from 'ol/Map'
 
+/**
+ * Reference (DOM)
+ */
 const mapRef = ref(0)
 
-const map = new Map()
+/**
+ * Map
+ */
+const map = new Map({
+  controls: [] // on supprime les contrôles par defaut !
+})
 
 onMounted(() => {
+  // ecriture dans le dom
   map.setTarget(mapRef.value)
 
+  // accessibilité
   const canvas = document.getElementById('map').getElementsByTagName('canvas')
   if (canvas.length) {
     canvas[0].tabIndex = 0
@@ -20,19 +30,21 @@ onMounted(() => {
  *  To focus on map and activate keyboard control.
  *  Trigerred on mouse over
  */
-function focusOnMap () {
+const onFocusOnMap = () => {
   mapRef.value.focus();
 }
 
+// rendre disponible 'map' aux composants enfannts imbriqués
 provide('map', map)
+
 </script>
 
 <template>
   <div
     id="map"
     ref="mapRef"
     tabindex="0"
-    @mouseover="focusOnMap"
+    @mouseover="onFocusOnMap"
   >
     <slot />
   </div>

src/components/carte/View.vue

@@ -10,26 +10,43 @@ const props = defineProps({
   layers : Array
 })
 
+// recuperation de l'objet 'map' du composant parent
 const map = inject('map')
 
+/**
+ * creation de la vue
+ */
 const view = new View({ 
   zoom: props.zoom, 
   center: props.center 
 })
 
 /**
- * abonnement aux evenements de la vue
+ * abonnement à l'evenement 'change:center' de la vue
+ * pour mise à jour du centre de la carte
  */
 view.on("change:center", (e) => {
   store.setCenter(e.target.getCenter());
 })
 
+/**
+ * abonnement à l'evenement 'change:resolution' de la vue
+ * pour mise à jour du zoom de la carte
+ */
+view.on("change:resolution", (e) => {
+  store.setZoom(view.getZoom())
+})
+
 onMounted(() => {
   if (map) {
+    // ajout des couches
     props.layers.forEach((layer) => {
       map.addLayer(layer)
     })
+    // ajout de la vue
     map.setView(view)
+    // enregistrement
+    store.setMap(map)
   }
 })
 </script>

src/components/carte/control/Attributions.vue

@@ -0,0 +1,34 @@
+<script setup lang="js">
+
+import Attributions from 'ol/control/Attribution'
+
+const props = defineProps({
+  visibility: Boolean,
+  attributionsOptions: Object
+})
+
+const map = inject('map')
+const attributions = ref(new Attributions(props.attributionsOptions))
+
+onMounted(() => {
+  if (props.visibility) {
+    map.addControl(attributions.value)
+  }
+})
+
+onBeforeUpdate(() => {
+  if (!props.visibility) {
+    map.removeControl(attributions.value)
+  }
+})
+
+onUpdated(() => {
+  if (props.visibility) {
+    map.addControl(attributions.value)
+  }
+})
+</script>
+
+<template></template>
+
+<style scoped></style>

src/components/carte/control/Zoom.vue

@@ -0,0 +1,34 @@
+<script setup lang="js">
+
+import Zoom from 'ol/control/Zoom'
+
+const props = defineProps({
+  visibility: Boolean,
+  zoomOptions: Object
+})
+
+const map = inject('map')
+const zoom = ref(new Zoom(props.zoomOptions))
+
+onMounted(() => {
+  if (props.visibility) {
+    map.addControl(zoom.value)
+  }
+})
+
+onBeforeUpdate(() => {
+  if (!props.visibility) {
+    map.removeControl(zoom.value)
+  }
+})
+
+onUpdated(() => {
+  if (props.visibility) {
+    map.addControl(zoom.value)
+  }
+})
+</script>
+
+<template></template>
+
+<style scoped></style>

src/composables/controls.ts

@@ -1,5 +1,7 @@
 export const useControls = {
   OverviewMap: 'OverviewMap',
   SearchEngine: 'SearchEngine',
-  ScaleLine: 'ScaleLine'
+  ScaleLine: 'ScaleLine',
+  Zoom: 'Zoom',
+  // Attributions: 'Attributions'
 }