I needed to display raster image tiles served from GeoServer on my OpenLayers 6 map. Using TileWMS(), this was working fine, but was a little slow, so I wanted to start using GeoWebCache from the server. I opted to continue using WMS (I need to use getFeatureInfo() so WMTS() wouldn't work). This alone didn't seem to speed anything up, and I saw a recomendation somewhere to set the map pixelRatio: 1
. This allowed for a significant speed increase. Tiles load immediately (was taking about 3 seconds per layer before), but now the map seems blurry. This is very apparent on point and label features on the map, but it could be happening on other features and layers.
The tile layers are merged into a layerGroup comprised of Google street layer (OMS) and 5 WMS layers served from Geoserver.
How can I get similar performance increases while maintaining the clarity on the map?
Relevant code:
this.map = new Map({
target: 'map',
layers: [
this.baseLayers
],
pixelRatio: 1,
overlays: [this.somePopup],
view: new View({
center: olProj.fromLonLat([-86, 38]),
zoom: 5
}),
});
var layer = new TileLayer({
name: 'tile-layer',
className: 'tile-layer',
extent: [-13884991, 2870341, -7455066, 6338219],
source: new TileWMS({
url: 'https://geoserver.url.com/geoserver/some_workspace/wms',
params: {'LAYERS': 'some_workspace:some_layer', 'TILED': true, 'WIDTH': 256, 'HEIGHT': 256, 'SRS': 'EPSG:3857'},
serverType: 'geoserver',
projection: 'EPSG:3857',
transition: 0,
})
});
Update: I have discovered that when 'pixelRatio' is not set to 1, I am not hitting GWC, which explains the slowness. Referencing this post.
imageSmoothing: false
in the TileWMS source options which should result in pixellation instead of blurring.