feat: add support for WMS overlayer

Add support for WMS overlayer via config or via plugin (layerProvidersLoaded hook)
GIScience · Jul 19, 2021 · b759a38 · b759a38
1 parent 2a4284e
commit b759a38
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 20 deletions.
diff --git a/src/config-examples/app-config-example.js b/src/config-examples/app-config-example.js
@@ -101,7 +101,8 @@ const appConfig = {
       url: 'https://dev.{s}.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
       attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }
-  ]
+  ],
+  wpsOverlayerTileProviders: []
 }
 
 export default appConfig
diff --git a/src/fragments/map-view/MapView.vue b/src/fragments/map-view/MapView.vue
@@ -89,24 +89,37 @@
         </ors-l-polyline>
       </template>
       <l-control-layers v-if="showControls" :position="layersPosition" :collapsed="true"/>
-        <l-tile-layer
-          v-for="tileProvider in tileProviders"
-          :key="tileProvider.name"
-          :name="tileProvider.name"
-          :visible="tileProvider.visible"
-          :url="tileProvider.url"
-          :attribution="tileProvider.attribution"
-          :token="tileProvider.token"
-          layer-type="base"/>
-        <l-tile-layer
-          v-for="overlayerTileProvider in overlayerTileProviders"
-          :key="overlayerTileProvider.name"
-          :name="overlayerTileProvider.name"
-          :visible="overlayerTileProvider.visible"
-          :url="overlayerTileProvider.url"
-          :attribution="overlayerTileProvider.attribution"
-          :token="overlayerTileProvider.token"
-          layer-type="overlay"/>
+      <l-tile-layer
+        v-for="tileProvider in tileProviders"
+        :key="tileProvider.name"
+        :name="tileProvider.name"
+        :visible="tileProvider.visible"
+        :url="tileProvider.url"
+        :attribution="tileProvider.attribution"
+        :token="tileProvider.token"
+        layer-type="base"/>
+      <l-tile-layer
+        v-for="layer in overlayerTileProviders"
+        :key="layer.name"
+        :name="layer.name"
+        :visible="layer.visible"
+        :url="layer.url"
+        :attribution="layer.attribution"
+        :token="layer.token"
+        layer-type="overlay"/>
+      <l-wms-tile-layer
+        v-for="layer in wmsOverlayerTileProviders"
+        :key="layer.name"
+        :attribution="layer.attribution"
+        :base-url="layer.baseUrl"
+        :layers="layer.layers"
+        :visible="layer.visible"
+        :name="layer.name"
+        :max-zoom="layer.maxZoom"
+        :version="layer.version"
+        :format="layer.format"
+        :transparent="true"
+        layer-type="overlay"/>
       <v-btn fab small @click.stop="toggleAccessibleMode" v-if="accessibilityToolAvailable"
         :title="$t('maps.toggleAccessibleMode')"
         :class="{'extra-low-resolution': $xlResolution}"

diff --git a/src/fragments/map-view/map-definitions.js b/src/fragments/map-view/map-definitions.js
@@ -136,6 +136,10 @@ const mapDefinitions = {
       providers.push(overlayerTileService)
     }
     return providers
+  },
+  getWmsOverlayerTileProviders () {
+    var providers = appConfig.wpsOverlayerTileProviders || []
+    return providers
   }
 }
 export default mapDefinitions
diff --git a/src/fragments/map-view/map-view.js b/src/fragments/map-view/map-view.js
@@ -27,7 +27,7 @@
  * @emits setInputPlace
  */
 
-import { LMap, LTileLayer, LLayerGroup, LTooltip, LPopup, LControlZoom, LControlAttribution, LControlScale, LControlLayers, LGeoJson, LPolygon, LCircle, LCircleMarker } from 'vue2-leaflet'
+import { LMap, LTileLayer, LLayerGroup, LTooltip, LPopup, LControlZoom, LControlAttribution, LControlScale, LWMSTileLayer, LControlLayers, LGeoJson, LPolygon, LCircle, LCircleMarker } from 'vue2-leaflet'
 
 import routeData from '@/support/map-data-services/ors-response-data-extractors/route-data'
 import ExtraInfoHighlight from './components/extra-info-highlight/ExtraInfoHighlight'
@@ -74,6 +74,7 @@ export default {
     LControlAttribution,
     LControlScale,
     LControlLayers,
+    'l-wms-tile-layer': LWMSTileLayer,
     LGeoJson,
     LPolygon,
     LCircle,
@@ -139,6 +140,7 @@ export default {
     return {
       tileProviders: [], // list of tiles provider that will be set via setProviders
       overlayerTileProviders: [], // list of overlay tiles provider that will be set via setProviders
+      wmsOverlayerTileProviders: [], // list of WMS overlay tiles provider that will be set via setProviders
       layersPosition: 'topright',
       map: null, // map object reference. it will will be defined later
       zoomLevel: null,
@@ -864,9 +866,12 @@ export default {
     setProviders () {
       this.tileProviders = mapDefinitions.getProviders()
       this.overlayerTileProviders = mapDefinitions.getOverlayerProviders()
+      this.wmsOverlayerTileProviders = mapDefinitions.getWmsOverlayerTileProviders()
+
       let hookData = {
         tileProviders: this.tileProviders, 
         overlayerTileProviders: this.overlayerTileProviders, 
+        wmsOverlayerTileProviders: this.wmsOverlayerTileProviders,
         context: this
       }
       this.$root.appHooks.run('layerProvidersLoaded', hookData)