0

This is the my script that I am currently using to show my GeoServer layers in OpenLayers:

<!DOCTYPE html>
<html>
  <head>
    <title>WMTS Layer from Capabilities</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      ol.proj.setProj4(proj4);
      proj4.defs('EPSG:27700','+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs');
      const proj27700 = ol.proj.get('EPSG:27700');
      const center_point = [394108.6719, 331807.5317];

      var parser = new ol.format.WMTSCapabilities();
      var map;

      fetch('http://localhost:8080/geoserver/ui/gwc/service/wmts?request=GetCapabilities').then(function(response) {
        return response.text();
      }).then(function(text) {
        var result = parser.read(text);
        var options = ol.source.WMTS.optionsFromCapabilities(result, {
          layer: 'intersects_new',
          matrixSet: 'EPSG:27700',
          crossOrigin: 'anonymous'
        });

        map = new ol.Map({
          layers: [
            new ol.layer.Tile({
              opacity: 1,
              source: new ol.source.XYZ({
                attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
                'rest/services/World_Imagery/MapServer">ArcGIS</a> 2018',
              url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
                'World_Imagery/MapServer/tile/{z}/{y}/{x}',
              crossOrigin: 'anonymous'
              })
            }),
            new ol.layer.Tile({
              opacity: 1,
              source: new ol.source.WMTS((options))
            })
          ],
          target: 'map',
          view: new ol.View({
            projection: proj27700,
            center: center_point,
            zoom: 6
          })
        });
      });
    </script>
  </body>
</html>

The intersect_new layer is a SQL view, which is working and uses default parameters I set in GeoServer. I would like to use the viewparams to change the parameters as in the below link: 

http://localhost:8080/geoserver/ui/wms?service=WMS&version=1.1.0&request=GetMap&layers=ui:intersects_new&styles=&bbox=-84702.61914736108,-9272.577651805477,676223.7241900009,1242876.667023777&width=466&height=768&srs=EPSG:27700&format=application/openlayers&viewparams=district:Barnet

I have gone through the OpenLayers documentation and I can't find viewparams as an option for either WMS or WMTS requests. Does anyone know how I can add this as an option to my fetch request?

Improve this question

2 Answers 2

Reset to default
2

If you need to set viewparams, you just need to change params options in the WMS 

source: new ol.source.TileWMS({
  url: 'https://localhost:8080/geoserver/wms',
  params: {'LAYERS': 'ui:intersects_new', 'TILED': true, VERSION: '1.1.1', viewparams: 'district:Barnet'},
  serverType: 'geoserver',
  // Countries have transparency, so do not fade tiles:
  transition: 0
})

For WMTS, with your code, add

var options = ol.source.WMTS.optionsFromCapabilities(result, {
  layer: 'intersects_new',
  matrixSet: 'EPSG:27700',
  crossOrigin: 'anonymous',
  viewparams: 'district:Barnet'
});

PS: I'm not sure WMTS support viewparams option

Improve this answer
1
  • viewparams works for WMS, sadly it doesn't seem to work WMTS. Thanks for the answer!
    – Trashmonk
    Commented Jun 25, 2018 at 10:26
1

For WMTS any additional parameters not supported by OpenLayers can be added using a custom tile url function:

var options = ol.source.WMTS.optionsFromCapabilities(result, {
  layer: 'intersects_new',
  matrixSet: 'EPSG:27700',
  crossOrigin: 'anonymous'
});

var source = new ol.source.WMTS(options);
var defaultTileUrlFunction = source.getTileUrlFunction().bind(source);

source.setTileUrlFunction(function(tileCoord, pixelRatio, projection) {
    return defaultTileUrlFunction(tileCoord, pixelRatio, projection) + '&viewparams=district:Barnet';
});

or better by using the dimensions option (as in https://openlayers.org/en/v4.6.5/examples/wmts-dimensions.html)

var options = ol.source.WMTS.optionsFromCapabilities(result, {
  layer: 'intersects_new',
  matrixSet: 'EPSG:27700',
  crossOrigin: 'anonymous',
  dimensions: {viewParams: 'district:Barnet'}
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.