add WMTS support for Cesium

web/client/components/map/cesium/__tests__/Layer-test-chrome.jsx

@@ -16,6 +16,7 @@ const assign = require('object-assign');
 require('../../../../utils/cesium/Layers');
 require('../plugins/OSMLayer');
 require('../plugins/WMSLayer');
+require('../plugins/WMTSLayer');
 require('../plugins/BingLayer');
 require('../plugins/GraticuleLayer');
 require('../plugins/OverlayLayer');
@@ -138,6 +139,28 @@ describe('Cesium layer', () => {
         expect(map.imageryLayers._layers[0]._imageryProvider._tileProvider._subdomains.length).toBe(1);
     });
 
+    it('creates a wmts layer for openlayers map', () => {
+        var options = {
+            "type": "wmts",
+            "visibility": true,
+            "name": "nurc:Arc_Sample",
+            "group": "Meteo",
+            "format": "image/png",
+            "tileMatrixSet": "EPSG:900913",
+            "url": "http://sample.server/geoserver/gwc/service/wmts"
+        };
+        // create layers
+        var layer = ReactDOM.render(
+            <CesiumLayer type="wmts"
+                 options={options} map={map}/>, document.getElementById("container"));
+
+
+        expect(layer).toExist();
+        // count layers
+        expect(map.getLayers().getLength()).toBe(1);
+        expect(map.getLayers().item(0).getSource().urls.length).toBe(1);
+    });
+
     it('creates a wms layer with single tile for CesiumLayer map', () => {
         var options = {
             "type": "wms",

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

@@ -0,0 +1,148 @@
+/**
+ * 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/cesium/Layers');
+var ConfigUtils = require('../../../../utils/ConfigUtils');
+const CoordinatesUtils = require('../../../../utils/CoordinatesUtils');
+const WMTSUtils = require('../../../../utils/WMTSUtils');
+var Cesium = require('../../../../libs/cesium');
+var assign = require('object-assign');
+var {isObject, isArray, slice, get} = require('lodash');
+
+function getWMTSURLs( urls ) {
+    return urls.map((url) => url.split("\?")[0]);
+}
+
+
+function splitUrl(originalUrl) {
+    let url = originalUrl;
+    let queryString = "";
+    if (originalUrl.indexOf('?') !== -1) {
+        url = originalUrl.substring(0, originalUrl.indexOf('?') + 1);
+        if (originalUrl.indexOf('%') !== -1) {
+            url = decodeURIComponent(url);
+        }
+        queryString = originalUrl.substring(originalUrl.indexOf('?') + 1);
+    }
+    return {url, queryString};
+}
+
+function WMTSProxy(proxy) {
+    this.proxy = proxy;
+}
+
+const isValidTile = (tileMatrixSet) => (x, y, level) =>
+    tileMatrixSet[level] &&
+    x <= parseInt(get(tileMatrixSet[level], "ranges.cols.max"), 10) &&
+    x >= parseInt(get(tileMatrixSet[level], "ranges.cols.min"), 10) &&
+    y <= parseInt(get(tileMatrixSet[level], "ranges.rows.max"), 10) &&
+    y >= parseInt(get(tileMatrixSet[level], "ranges.rows.min"), 10);
+
+
+WMTSProxy.prototype.getURL = function(resource) {
+    let {url, queryString} = splitUrl(resource);
+    return this.proxy + encodeURIComponent(url + queryString);
+};
+
+function NoProxy() {
+}
+
+NoProxy.prototype.getURL = function(resource) {
+    let {url, queryString} = splitUrl(resource);
+    return url + queryString;
+};
+function getMatrixIds(matrix, srs) {
+    return (isObject(matrix) && matrix[srs] || matrix).map((el) => el.identifier);
+}
+
+function getDefaultMatrixId(options) {
+    let matrixIds = new Array(30);
+    for (let z = 0; z < 30; ++z) {
+        // generate matrixIds arrays for this WMTS
+        matrixIds[z] = options.tileMatrixPrefix + z;
+    }
+    return matrixIds;
+}
+
+const limitMatrix = (matrix, len) => {
+    if (matrix.length > len) {
+        return slice(matrix, 0, len);
+    }
+    if (matrix.length < len) {
+        return matrix.concat(new Array(len - matrix.length));
+    }
+    return matrix;
+};
+
+const getTilingSchema = (srs) => {
+    if (srs.indexOf("EPSG:4326") >= 0) {
+        return new Cesium.GeographicTilingScheme();
+    } else if (srs.indexOf("EPSG:3857") >= 0) {
+        return new Cesium.WebMercatorTilingScheme();
+    }
+};
+function wmtsToCesiumOptions(options) {
+    const srs = CoordinatesUtils.normalizeSRS(options.srs || 'EPSG:4326', options.allowedSRS);
+    const tileMatrixSet = WMTSUtils.getTileMatrixSet(options.tileMatrixSet, srs, options.allowedSRS, options.matrixIds);
+    const matrixIds = limitMatrix(options.matrixIds && getMatrixIds(options.matrixIds, srs) || getDefaultMatrixId(options));
+
+    // var opacity = options.opacity !== undefined ? options.opacity : 1;
+    let proxyUrl = ConfigUtils.getProxyUrl({});
+    let proxy;
+    if (proxyUrl) {
+        let useCORS = [];
+        if (isObject(proxyUrl)) {
+            useCORS = proxyUrl.useCORS || [];
+            proxyUrl = proxyUrl.url;
+        }
+        let url = options.url;
+        if (isArray(url)) {
+            url = url[0];
+        }
+        const isCORS = useCORS.reduce((found, current) => found || url.indexOf(current) === 0, false);
+        proxy = !isCORS && proxyUrl;
+    }
+    // NOTE: can we use opacity to manage visibility?
+    const isValid = isValidTile(options.matrixIds && options.matrixIds[tileMatrixSet]);
+    return assign({
+        url: getWMTSURLs(isArray(options.url) ? options.url : [options.url]), // TODO subdomain support, if use {s} switches to RESTFul mode
+        format: options.format || 'image/png',
+        isValid,
+        // tileDiscardPolicy: {
+        //    isReady: () => true,
+        //    shouldDiscardImage: ({x, y, level}) => !isValid(x, y, level)
+        // }, // not supported yet
+        layer: options.name,
+        style: options.style || "",
+        tileMatrixLabels: matrixIds,
+        tilingScheme: getTilingSchema(srs, options.matrixIds[options.tileMatrixSet]),
+        proxy: proxy && new WMTSProxy(proxy) || new NoProxy(),
+        enablePickFeatures: false,
+        tileWidth: options.tileWidth || options.tileSize || 256,
+        tileHeight: options.tileHeight || options.tileSize || 256,
+        tileMatrixSetID: tileMatrixSet,
+        maximumLevel: 30
+    });
+}
+
+const createLayer = (options) => {
+    let layer;
+    const cesiumOptions = wmtsToCesiumOptions(options);
+    layer = new Cesium.WebMapTileServiceImageryProvider(cesiumOptions);
+    const orig = layer.requestImage;
+    layer.requestImage = (x, y, level) => cesiumOptions.isValid(x, y, level) ? orig.bind(layer)( x, y, level) : new Promise( () => undefined);
+    layer.updateParams = (params) => {
+        const newOptions = assign({}, options, {
+            params: assign({}, options.params || {}, params)
+        });
+        return createLayer(newOptions);
+    };
+    return layer;
+};
+
+Layers.registerType('wmts', createLayer);

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

@@ -10,6 +10,7 @@ module.exports = {
     BingLayer: require('./BingLayer'),
     OSMLayer: require('./OSMLayer'),
     WMSLayer: require('./WMSLayer'),
+    WMTSLayer: require('./WMTSLayer'),
     GraticuleLayer: require('./GraticuleLayer'),
     MarkerLayer: require('./MarkerLayer'),
     OverlayLayer: require('./OverlayLayer')

web/client/index.html

@@ -17,6 +17,8 @@
         <script src="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js"></script>
         <!--<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=__API_KEY_MAPQUEST__"></script>-->
+        <script src="libs/Cesium/Build/Cesium/Cesium.js"></script>
+        <link rel="stylesheet" href="libs/Cesium/Build/Cesium/Widgets/widgets.css" />
     </head>
     <body>
         <div id="container"></div>

web/client/utils/WMTSUtils.js

@@ -11,26 +11,22 @@ const CoordinatesUtils = require('./CoordinatesUtils');
 const {isString, isArray, isObject, head} = require('lodash');
 
 const WMTSUtils = {
-    getTileMatrixSet: (tileMatrixSet, srs, allowedSRS) => {
+    getTileMatrixSet: (tileMatrixSet, srs, allowedSRS, matrixIds = {}) => {
         if (tileMatrixSet && isString(tileMatrixSet)) {
             return tileMatrixSet;
         }
         if (tileMatrixSet) {
             return CoordinatesUtils.getEquivalentSRS(srs, allowedSRS).reduce((previous, current) => {
                 if (isArray(tileMatrixSet)) {
                     const matching = head(tileMatrixSet.filter((matrix) => (matrix["ows:Identifier"] === current || CoordinatesUtils.getEPSGCode(matrix["ows:SupportedCRS"]) === current)));
-                    return matching && matching["ows:Identifier"] || previous;
+                    return matching && matching["ows:Identifier"] && !matrixIds[previous] || previous;
                 } else if (isObject(tileMatrixSet)) {
                     return tileMatrixSet[current] || previous;
                 }
                 return previous;
             }, srs);
         }
-        if (tileMatrixSet && isArray(tileMatrixSet)) {
-            return CoordinatesUtils.getEquivalentSRS(srs, allowedSRS).reduce((previous, current) => {
-                return tileMatrixSet[current] || previous;
-            }, srs);
-        }
+
         return srs;
     }
 };