Fix #1304 Implemented WMTS on OpenLayers

web/client/components/map/openlayers/plugins/WMTSLayer.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var Layers = require('../../../../utils/openlayers/Layers');
+var ol = require('openlayers');
+var objectAssign = require('object-assign');
+const CoordinatesUtils = require('../../../../utils/CoordinatesUtils');
+const {isArray} = require('lodash');
+const SecurityUtils = require('../../../../utils/SecurityUtils');
+const mapUtils = require('../../../../utils/MapUtils');
+
+function wmtsToOpenlayersOptions(options) {
+    // NOTE: can we use opacity to manage visibility?
+    return objectAssign({}, options.baseParams, {
+        LAYERS: options.name,
+        STYLES: options.style || "",
+        FORMAT: options.format || 'image/png',
+        TRANSPARENT: options.transparent !== undefined ? options.transparent : true,
+        SRS: CoordinatesUtils.normalizeSRS(options.srs || 'EPSG:3857', options.allowedSRS),
+        CRS: CoordinatesUtils.normalizeSRS(options.srs || 'EPSG:3857', options.allowedSRS),
+        TILED: options.tiled || false,
+        VERSION: options.version || "1.3.0"
+    }, options.params || {});
+}
+
+function getWMSURLs( urls ) {
+    return urls.map((url) => url.split("\?")[0]);
+}
+
+Layers.registerType('wmts', {
+    create: (options) => {
+        const urls = getWMSURLs(isArray(options.url) ? options.url : [options.url]);
+        const queryParameters = wmtsToOpenlayersOptions(options) || {};
+        var projection = ol.proj.get('EPSG:900913');
+        urls.forEach(url => SecurityUtils.addAuthenticationParameter(url, queryParameters));
+        let projectionExtent = projection.getExtent();
+        let matrixIds = new Array(22);
+        for (let z = 0; z < 22; ++z) {
+        // generate matrixIds arrays for this WMTS
+            matrixIds[z] = options.tileMatrixPrefix + z;
+        }
+        return new ol.layer.Tile({
+            opacity: options.opacity !== undefined ? options.opacity : 1,
+            source: new ol.source.WMTS(objectAssign({
+              urls: urls,
+              layer: options.name,
+              matrixSet: options.tileMatrixSet,
+              format: 'image/png',
+              tileGrid: new ol.tilegrid.WMTS({
+                origin: ol.extent.getTopLeft(projectionExtent),
+                resolutions: mapUtils.getResolutions(),
+                matrixIds: matrixIds
+              }),
+              style: '',
+              wrapX: true
+            }))
+        });
+    }
+});

web/client/components/map/openlayers/plugins/index.js

@@ -15,5 +15,6 @@ module.exports = {
     OverlayLayer: require('./OverlayLayer'),
     TileProviderLayer: require('./TileProviderLayer'),
     VectorLayer: require('./VectorLayer'),
-    WMSLayer: require('./WMSLayer')
+    WMSLayer: require('./WMSLayer'),
+    WMTSLayer: require('./WMTSLayer')
 };

web/client/config.json

@@ -101,6 +101,25 @@
           "crs": "EPSG:4326"
         }
 			},
+      {
+        "type": "wmts",
+        "url":"http://demo.geo-solutions.it/geoserver/gwc/service/wmts?",
+        "visibility": true,
+        "opacity": 1,
+        "title": "WMTS sample",
+        "name": "sf:archsites_hidden",
+        "group": "Meteo",
+        "tileSize":"",
+        "matrixIds": "EPSG:900913:",
+        "tileMatrixPrefix": "EPSG:900913:",
+        "tileMatrixSet": "EPSG:900913",
+        "minx":20037508.3428,
+        "maxx":-20037508.3428,
+        "bbox": {
+          "bounds": {"minx": -25.6640625, "miny": 26.194876675795218, "maxx": 48.1640625, "maxy": 56.80087831233043},
+          "crs": "EPSG:4326"
+        }
+      },
       {
         "type": "tileprovider",
         "title": "OpenTopoMap",