Add support for g3w-admin-mapproxy plugin (tiles cache provider)

src/app/core/layers/imagelayer.js

@@ -36,6 +36,7 @@ function __(name, value) {
  * @param config.bbox
  * @param config.capabilities
  * @param config.cache_url
+ * @param { string } config.cache_provider since 3.10.0 (eg. "mapproxy")
  * @param config.baselayer
  * @param config.geometrytype
  * @param config.editops
@@ -158,6 +159,7 @@ proto.getWMSLayerName = function({ type = 'map' } = {}) {
 };
 
 /**
+ * @param opts
  * @param { 'map' | 'legend' } opts.type 
  */
 proto.getWmsUrl = function({ type = 'map' } = {}) {
@@ -404,22 +406,42 @@ proto.getWfsCapabilities = function() {
 };
 
 proto.getMapLayer = function(options = {}, extraParams) {
-  options.iframe_internal = ApplicationService.isIframe() && !this.isExternalWMS();
-  const method            = this.isExternalWMS() ? 'GET' : this.getOwsMethod();
-  const extent            = (this.config.bbox ? [this.config.bbox.minx, this.config.bbox.miny, this.config.bbox.maxx, this.config.bbox.maxy] : null);
-  const url               = options.url || this.getWmsUrl();
-  const source            = this.config.source;
-
-  if (this.isCached()) {
-    return new XYZLayer({ ...options, extent }, method);
+  options.iframe_internal   = ApplicationService.isIframe() && !this.isExternalWMS();
+  const method              = this.isExternalWMS() ? 'GET' : this.getOwsMethod();
+  const extent              = (this.config.bbox ? [this.config.bbox.minx, this.config.bbox.miny, this.config.bbox.maxx, this.config.bbox.maxy] : null);
+  const source              = this.config.source;
+  /** @since  3.10.0 Cache info **/
+  const cache_provider      = this.config.cache_provider;
+  const cache_service_type  = this.config.cache_service_type || 'tms'; //default tile
+  const cache_layer         = this.config.cache_layer;
+  const cache_extent        = this.config.cache_extent;
+  const cache_grid          = this.config.cache_grid;
+  const cache_grid_extent   = this.config.cache_grid_extent;
+  //get layer url
+  const url                 = this.isCached() ? this.getCacheUrl() : (options.url || this.getWmsUrl());
+
+  if (this.isCached() && 'tms' === cache_service_type) {
+    return new XYZLayer({ ...options, extent, url, cache_provider }, method);
+  }
+
+  if (this.isCached() && 'wmts' === cache_service_type) {
+    return new WMSTLayer({
+      ...options,
+      url,
+      cache_provider,
+      cache_layer,
+      cache_extent,
+      cache_grid,
+      cache_grid_extent
+    }, extraParams, method);
   }
 
   if (this.isExternalWMS() && source && Layer.SourceTypes.ARCGISMAPSERVER === source.type) {
     return new ARCGISMAPSERVERLayer({ ...options, ...source }, extraParams)
   }
 
   if (this.isExternalWMS() && source && Layer.SourceTypes.WMST === source.type) {
-    return new WMSTLayer({...options, url }, extraParams, method);
+    return new WMSTLayer({...options, url, cache_provider }, extraParams, method);
   }
 
   return new WMSLayer({ ...options, url }, extraParams, method);

src/app/core/layers/layerfactory.js

@@ -103,16 +103,30 @@ const BASE_LAYERS   = {
   [Layer.ServerTypes.WMTS]: class WMTSLayer extends BaseLayer {
     _makeOlLayer() {
       // use this config to get params
-      const { url, layer, attributions, matrixSet, format, style, requestEncoding, crs } = this.config;
+      const {
+        url,
+        layer,
+        attributions,
+        matrixSet,
+        format,
+        style,
+        requestEncoding,
+        crs,
+        grid, /** @since 3.10.0*/
+        grid_extent, /** @since 3.10.0 */
+        projection, /** @since 3.10.0 */
+      } = this.config;
       return BASE.WMTS.get({
         url,
         layer,
         attributions,
         format,
-        projection: this.getProjectionFromCrs(crs),
+        projection: projection || this.getProjectionFromCrs(crs),
         requestEncoding,
         matrixSet,
         style,
+        grid,
+        grid_extent,
       });
     }
   },

src/app/core/layers/map/wmslayer.js

@@ -20,7 +20,9 @@ inherit(WMSLayer, MapLayer);
 const proto = WMSLayer.prototype;
 
 proto.getOLLayer = function(withLayers) {
-  if (!this._olLayer) this._olLayer = this._makeOlLayer(withLayers);
+  if (!this._olLayer) {
+    this._olLayer = this._makeOlLayer(withLayers);
+  }
   return this._olLayer;
 };
 
@@ -133,16 +135,20 @@ proto._updateLayers = function(mapState = {}, extraParams = {}) {
   });
 
   this._olLayer.setVisible(true);
-  this._olLayer.getSource().updateParams({
-    ...params,
-    LEGEND_ON,
-    LEGEND_OFF,
-    filtertoken: ApplicationState.tokens.filtertoken,
-    LAYERS:      `${layers[0].isArcgisMapserver() ? 'show:' : ''}${layers.map(l => l.getWMSLayerName()).join(',')}`,
-    STYLES:      STYLES.join(','),
-    /** @since 3.8 */
-    OPACITIES:   OPACITIES.join(','),
-  });
+  //check if a layer source has with updateParams method
+  /** @TODO Check a better way to do this */
+  if (this._olLayer.getSource().updateParams) {
+    this._olLayer.getSource().updateParams({
+      ...params,
+      LEGEND_ON,
+      LEGEND_OFF,
+      filtertoken: ApplicationState.tokens.filtertoken,
+      LAYERS:      `${layers[0].isArcgisMapserver() ? 'show:' : ''}${layers.map(l => l.getWMSLayerName()).join(',')}`,
+      STYLES:      STYLES.join(','),
+      /** @since 3.8 */
+      OPACITIES:   OPACITIES.join(','),
+    });
+  }
 
 };
 

src/app/core/layers/map/wmstlayer.js

@@ -18,13 +18,18 @@ const proto = WMSTLayer.prototype;
 
 proto._makeOlLayer = function(withLayers) {
   const olLayer = new RasterLayers.TiledWMSLayer({
-    url:             this.layers[0] && this.layers[0].getWmsUrl ? this.layers[0].getWmsUrl() : this.config.url,
-    id:              this.config.id,
-    projection:      this.config.projection,
-    iframe_internal: this.iframe_internal,
-    layers:          (withLayers) ? this.layers.map(layer => layer.getWMSLayerName()) : this.layers,
+    url:               ('mapproxy' === this.config.cache_provider) || !(this.layers[0] && this.layers[0].getWmsUrl) ? this.config.url : this.layers[0].getWmsUrl(),
+    id:                this.config.id,
+    projection:        this.config.projection,
+    iframe_internal:   this.iframe_internal,
+    layers:            (withLayers) ? this.layers.map(layer => layer.getWMSLayerName()) : this.layers,
+    cache_provider:    this.config.cache_provider, /** @since 3.10.0 **/
+    cache_type:        this.config.cache_type, /** @since 3.10.0  tms, wms**/
+    cache_layer:       this.config.cache_layer,
+    cache_extent:      this.config.cache_extent,
+    cache_grid:        this.config.cache_grid,
+    cache_grid_extent: this.config.cache_grid_extent,
   }, this.extraParams, this._method);
-
   olLayer.getSource().on('tileloadstart', () => this.emit('loadstart'));
   olLayer.getSource().on('tileloadend',   () => this.emit('loadend'));
   olLayer.getSource().on('tileloaderror', () => this.emit('loaderror'));

src/app/core/layers/map/xyzlayer.js

@@ -42,11 +42,12 @@ proto.isVisible = function(){
 
 proto._makeOlLayer = function(){
   this._olLayer = new RasterLayers.XYZLayer({
-    url:             `${this.layer.getCacheUrl()}/{z}/{x}/{y}.png`,
+    url:             this.config.url,
     maxZoom:         20,
     extent:          this.config.extent,
     iframe_internal: this.iframe_internal,
     projection:      this.projection ? this.projection : this.layer.getProjection(),
+    cache_provider:  this.config.cache_provider,
   }, this._method);
 
   this._olLayer.getSource().on('imageloadstart', () => this.emit('loadstart'));

src/app/core/layers/mixins/geo.js

@@ -499,7 +499,13 @@ proto.isCached = function() {
 };
 
 proto.getCacheUrl = function() {
-  if (this.isCached()) return this.config.cache_url;
+  // mapproxy provider → cache_url already contains "{z}/{x}/{-y}.png"
+  if (this.isCached() && this.config.cache_provider && 'mapproxy' === this.config.cache_provider) {
+    return this.config.cache_url;
+  }
+  if (this.isCached()) {
+    return `${this.config.cache_url}/{z}/{x}/{y}.png`;
+  }
 };
 
 // return if layer has inverted axis

src/app/g3w-ol/layers/bases.js

@@ -57,34 +57,69 @@ BaseLayers.WMS = {
 };
 
 BaseLayers.WMTS = {
-  get({url, layer, visible, attributions, matrixSet, projection, requestEncoding, style='default', format='image/png', opacity=0.7} = {}) {
-    const projectionExtent = projection.getExtent();
-    const resolutions = new Array(14);
-    const size = ol.extent.getWidth(projectionExtent) / 256;
-    const matrixIds = new Array(14);
-    for (var z = 0; z < 14; ++z) {
-      // generate resolutions and matrixIds arrays for this WMTS
-      resolutions[z] = size / Math.pow(2, z);
-      matrixIds[z] = z;
+  get({
+      url,
+      layer,
+      visible, /** @TODO check if deprecate */
+      attributions,
+      matrixSet,
+      projection,
+      requestEncoding,
+      style='default',
+      format='image/png',
+      opacity = 0.7,
+      grid, /** @since 3.10.0 */
+      grid_extent, /** @since 3.10.0 */
+    } = {}) {
+    if (matrixSet) {
+      const projectionExtent = projection.getExtent();
+      const resolutions = new Array(14);
+      const size = ol.extent.getWidth(projectionExtent) / 256;
+      const matrixIds = new Array(14);
+      for (var z = 0; z < 14; ++z) {
+        // generate resolutions and matrixIds arrays for this WMTS
+        resolutions[z] = size / Math.pow(2, z);
+        matrixIds[z] = z;
+      }
+      return new ol.layer.Tile({
+        opacity,
+        source: new ol.source.WMTS({
+          url,
+          projection,
+          layer,
+          matrixSet,
+          requestEncoding,
+          format,
+          attributions,
+          tileGrid: new ol.tilegrid.WMTS({
+            origin: ol.extent.getTopLeft(projectionExtent),
+            resolutions,
+            matrixIds
+          }),
+          style
+        })
+      });
+    }
+    /** @since 3.10.0 WMTS based on mapproxy*/
+    if (grid && grid_extent) {
+      const resolutions = ol.tilegrid.createXYZ({ extent: grid_extent }).getResolutions();
+      return new ol.layer.Tile({
+        source: new ol.source.WMTS({
+          url,
+          layer,
+          matrixSet: grid,
+          format: format || 'png',
+          projection,
+          tileGrid: new ol.tilegrid.WMTS({
+            origin: ol.extent.getTopLeft(grid_extent),
+            resolutions,
+            matrixIds: resolutions.map((_, i) => i),
+          }),
+          style,
+          transparent: false,
+        })
+      });
     }
-    return new ol.layer.Tile({
-      opacity,
-      source: new ol.source.WMTS({
-        url,
-        projection,
-        layer,
-        matrixSet,
-        requestEncoding,
-        format,
-        attributions,
-        tileGrid: new ol.tilegrid.WMTS({
-          origin: ol.extent.getTopLeft(projectionExtent),
-          resolutions: resolutions,
-          matrixIds: matrixIds
-        }),
-        style
-      })
-    });
   }
 };