Wmts support

app-starter/static/app-conf.json

@@ -50,6 +50,21 @@
     "history": true
   },
 
+  "tileGridDefs": {
+    "usgs": {
+      "type": "WMTS",
+      "origin": [ -20037508.342789244, 20037508.342789244 ],
+      "resolutions": [156543.03,78271.51,39135.75,19567.87,9783.93,4891.96,2445.984,1222.99,611.49,305.748,152.87,76.437,38.218,19.109,9.55,4.77,2.388,1.194,0.595],
+      "matrixIds": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
+    },
+    "ignfr": {
+      "type": "WMTS",
+      "origin": [ -20037508.342789244, 20037508.342789244 ],
+      "resolutions": [156543.03392804097,78271.51696402048,39135.75848201024,19567.87924100512,9783.93962050256,4891.96981025128,2445.98490512564,1222.99245256282,611.49622628141,305.748113140705,152.8740565703525,76.43702828517625,38.21851414258813,19.109257071294063,9.554628535647032,4.777314267823516,2.388657133911758,1.194328566955879,0.5971642834779395,0.29858214173896974],
+      "matrixIds": ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"]
+    }
+  },
+
   "mapLayers": [
 
     {
@@ -145,6 +160,49 @@
         "fillColor": "rgb(255, 255, 0, 0.2)"
       }
     },
+    {
+      "type": "WMTS",
+      "name": "USGS demo",
+      "format": "image/png",
+      "url": "https://mrdata.usgs.gov/mapcache/wmts",
+      "lid": "usgs_demo",
+      "isBaseLayer": false,
+      "layers": "",
+      "projection": "EPSG:3857",
+      "layer": "sgmc2",
+      "matrixSet": "GoogleMapsCompatible",
+      "attributions": "Tiles © <a href=\"https://mrdata.usgs.gov/geology/state/\" target=\"_blank\">USGS</a>",
+      "tileGridRef": "usgs",
+      "style": "default",
+      "wrapX": true
+    },
+    {
+      "type": "WMTS",
+      "name": "IGN Plan",
+      "format": "image/png",
+      "url": "https://wxs.ign.fr/choisirgeoportail/geoportail/wmts",
+      "lid": "ign_demo",
+      "isBaseLayer": true,
+      "projection": "EPSG:3857",
+      "layer": "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
+      "matrixSet": "PM",
+      "attributions": "Basemap © <a href=\"https://www.ign.fr/\" target=\"_blank\">'<img src=\"https://wxs.ign.fr/static/logos/IGN/IGN.gif\" title=\"Institut national de l'information géographique et forestière\" alt=\"IGN\"></a>",
+      "tileGridRef": "ignfr",
+      "style": "normal"
+    },
+    {
+      "type": "WMTS",
+      "name": "RV_DTM",
+      "lid": "rv-dtm",
+      "optionsFromCapabilities": {
+        "url": "https://idt2.regione.veneto.it/gwc/service/wmts?request=GetCapabilities",
+        "layer": "rv:DTM_RV_5m_3003", 
+        "format": "image/png",
+        "matrixSet": "EPSG:4326",
+        "crossOrigin": "anonymous"
+      },
+      "attributions": "DTM © 2024 Regione del Veneto"
+    },
     {
       "type": "TILEWMS",
       "lid": "ahocevar-wms",

docs/map-layer-configuration.md

@@ -112,6 +112,24 @@ Similar properties as Tiled WMS, with these exceptions:
 | interpolate        | By default, linear interpolation is used when resampling. Set to false to use the nearest neighbor instead. | `"interpolate": false` |
 | tileGridRef        | Parameter is not used for `IMAGEWMS` | |
 
+## WMTS (tiled)
+
+| Property           | Meaning (from Openlayers [API docs](https://openlayers.org/en/latest/apidoc/module-ol_source_WMTS.html)) | Example |
+|--------------------|:----------|---------|
+| **type**           | Indicator that the layer is a WMTS, use `WMTS` | `"type": "WMTS"` |
+| **layer**         | Layer name as advertised in the WMTS capabilities. | `"layer": "sgmc2"` |
+| **url**            | A URL for the service. For the RESTful request encoding, this is a URL template.  For KVP encoding, it is normal URL. A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be used instead of defining each one separately in the `urls` option. | `"url": "https://mrdata.usgs.gov/mapcache/wmts"` |
+| projection         |  The projection of the layer. Has to be defined in `projectionDefs` if not `EPSG:4326` or `EPSG:3857`. if not set the projection of the map is used | `"projection": "EPSG:3857"` |
+| format             | Image format. Only used when requestEncoding is 'KVP' | `"format": "image/png"` |
+| transparent        | Boolean value, whether the WMS layer should be queried with a transparent background  | `"transparent": true` |
+| tileGridRef        | Identifier of the tile grid to use for this layer (has to be defined in `tileGridDefs`) The grid has to be correctly identified with `"type": "WMTS"` | `"tileGridRef": "usgs"` |
+| crossOrigin        | Provides support for CORS, defining how the layers source handles crossorigin requests. For more information and the supported values see [HTML attribute: crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)  | `"crossOrigin": "anonymous"` |
+| cacheSize, interpolate, reprojectionErrorThreshold, tilePixelRatio, version, matrixSet, urls, wrapX, transition, zDirection | The module wraps ol/source/WMTS layer options: https://openlayers.org/en/latest/apidoc/module-ol_source_WMTS.html | `"cacheSize": 16`                                            |
+| optionsFromCapabilities                                      | In WMTS layers options can be retrieved parsing the service capabilities document, the option is an object containing at least the following keys: `url`, `layer`, `matrixSet` or `projection` | `"optionsFromCapabilities": {"url": "https://idt2.regione.veneto.it/gwc/service/wmts?request=GetCapabilities", "layer": "rv:DTM_RV_5m_3003", "matrixSet": "EPSG:4326"}` |
+| hoverAttribute      | Attribute to be shown if a feature of the layer is hovered. Only has an effect if `hoverable` is set to `true`.  | `"hoverAttribute": "name"` |
+| hoverOverlay        | ID of a custom map overlay to display when a feature of the layer is hovered. Only has an effect if `hoverable` is set to `true`. For more information on how to implement a map overlay see the [reusable components](reusable-components?id=map-overlay) section. | `"hoverOverlay": "my-custom-overlay"` |
+| params        | This allows to inject custom HTTP parameters to the GetMap request of the layer. | `"params": {"FEATUREID": 1}"` |
+
 
 ## XYZ
 

src/components/ol/Map.vue

@@ -16,6 +16,7 @@ import {
 import RotateControl from 'ol/control/Rotate';
 import Projection from 'ol/proj/Projection';
 import TileGrid from 'ol/tilegrid/TileGrid';
+import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
 import { register as olproj4 } from 'ol/proj/proj4';
 import { get as getProj } from 'ol/proj';
 import { GPX, GeoJSON, IGC, KML, TopoJSON } from 'ol/format';
@@ -163,7 +164,7 @@ export default {
 
     // Optional TileGrid definitions by name, for ref in Layers
     Object.keys(this.tileGridDefs).forEach(name => {
-      this.tileGrids[name] = new TileGrid(this.tileGridDefs[name]);
+      this.tileGrids[name] = this.tileGridDefs[name].type === 'WMTS' ? new WMTSTileGrid(this.tileGridDefs[name]) : new TileGrid(this.tileGridDefs[name]);
     });
 
     this.map = new Map({
@@ -207,7 +208,6 @@ export default {
         // Remarks: Passing null instead of undefined as parameters into the
         //  constructor of OpenLayers sources overwrites OpenLayers defaults.
         lConf.tileGrid = lConf.tileGridRef ? me.tileGrids[lConf.tileGridRef] : undefined;
-
         // Automatically set the appropriate z-index for the layer type,
         // if not defined explicitly.
         lConf.zIndex = lConf.zIndex ?? (lConf.isBaseLayer ? -1 : 0);

src/factory/Layer.js

@@ -1,6 +1,8 @@
 import { Image as ImageLayer, Tile as TileLayer } from 'ol/layer';
 import ImageWMS from 'ol/source/ImageWMS';
 import TileWmsSource from 'ol/source/TileWMS';
+import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS.js';
+import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
 import OsmSource from 'ol/source/OSM';
 import VectorTileLayer from 'ol/layer/VectorTile'
 import VectorTileSource from 'ol/source/VectorTile'
@@ -65,6 +67,8 @@ export const LayerFactory = {
       return this.createTileWmsLayer(lConf);
     } else if (lConf.type === 'IMAGEWMS') {
       return this.createImageWmsLayer(lConf);
+    } else if (lConf.type === 'WMTS') {
+      return this.createTileWmtsLayer(lConf);
     } else if (lConf.type === 'WFS') {
       return this.createWfsLayer(lConf, olMap);
     } else if (lConf.type === 'XYZ') {
@@ -165,6 +169,74 @@ export const LayerFactory = {
     return layer;
   },
 
+  /**
+   * Returns an OpenLayers Tiled WMTS layer instance due to given config.
+   *
+   * @param  {Object} lConf  Layer config object
+   * @return {ol.layer.Tile} OL Tiled WMTS layer instance
+   */
+  createTileWmtsLayer (lConf) {
+    // apply additional HTTP params
+
+    const WMTSlayer = new TileLayer({
+      ...this.getCommonLayerOptions(lConf),
+      source: new TileWmsSource({ // fake source, will be replaced
+        url: ''
+      })
+    })
+
+    if (lConf.optionsFromCapabilities) {
+      const parser = new WMTSCapabilities();
+
+      fetch(lConf.optionsFromCapabilities.url).then(function (response) {
+        return response.text();
+      }).then(function (text) {
+        const capabilities = parser.read(text);
+        const options = optionsFromCapabilities(capabilities, {
+          layer: lConf.optionsFromCapabilities.layer,
+          matrixSet: lConf.optionsFromCapabilities.matrixSet,
+          projection: lConf.optionsFromCapabilities.projection,
+          requestEncoding: lConf.optionsFromCapabilities.requestEncoding,
+          style: lConf.optionsFromCapabilities.style,
+          format: lConf.optionsFromCapabilities.format,
+          crossOrigin: lConf.optionsFromCapabilities.crossOrigin
+        })
+        const Source = new WMTS({
+          ...options,
+          attributions: lConf.attributions,
+          hoverable: lConf.hoverable,
+          hoverAttribute: lConf.hoverAttribute,
+          hoverOverlay: lConf.hoverOverlay
+        })
+        WMTSlayer.setSource(Source)
+      });
+    } else {
+      WMTSlayer.setSource(new WMTS({
+        url: lConf.url,
+        tileGrid: lConf.tileGrid,
+        cacheSize: lConf.cacheSize,
+        interpolate: lConf.interpolate,
+        reprojectionErrorThreshold: lConf.reprojectionErrorThreshold,
+        projection: lConf.projection,
+        crossOrigin: lConf.crossOrigin,
+        layer: lConf.layer,
+        style: lConf.style,
+        tilePixelRatio: lConf.tilePixelRatio,
+        format: lConf.format,
+        version: lConf.version,
+        matrixSet: lConf.matrixSet,
+        urls: lConf.urls,
+        wrapX: lConf.wrapX,
+        transition: lConf.transition,
+        zDirection: lConf.zDirection,
+        hoverable: lConf.hoverable,
+        hoverAttribute: lConf.hoverAttribute,
+        hoverOverlay: lConf.hoverOverlay
+      }))
+    }
+    return WMTSlayer;
+  },
+
   /**
    * Returns an OpenLayers WFS layer instance due to given config.
    *