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?
nmtoken
13.6k5 gold badges39 silver badges91 bronze badges
asked Jun 25, 2018 at 8:21
2 Answers 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
answered Jun 25, 2018 at 8:46
-
viewparams works for WMS, sadly it doesn't seem to work WMTS. Thanks for the answer!Trashmonk– Trashmonk2018年06月25日 10:26:42 +00:00Commented Jun 25, 2018 at 10:26
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'}
});
answered Feb 8, 2019 at 13:59
default