Openlayers / GeoServer WFS缓存，切片或任何优化

Question

I'm developping a Web application using OpenLayers 3.20.0 with layers coming from GeoServer, linked to an Oracle data source. This application is using mostly ImageWMS layer, and also a Vector layer for interaction and edition. The issue is that the map is very slow with more than 30000 polylines drawn, and I would like to make the process faster :-)

So I would like to know what is the best way to do. I found two ways :

• change my Vector layer in ImageWMS layer, and load manually needed features only on selection or edition, but it asks me a certain amount of modifications in my code
• use VectorTile layer instead of Vector layer, I guess it should work like ImageWMS and a tile system so that data are loaded only according to the view of the map (Am i good ?)

I looked for samples of VectorTile, but they are not very numerous (most of the time it's about OpenLayers 2), and the documentation is a little poor.

The big unknown about the layer declaration is about the VectorTile source. An URL must be defined, and I found in documentation that I have to put {x}/{y}/{z} parameters, but where exactly, and how is built this URL ? (see https://openlayers.org/en/latest/apidoc/module-ol_source_VectorTile-VectorTile.html , the 'url' option)

As sample, my current Vector source has an URL like this : /geoserver/ANF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ANF:myLayer&outputFormat=application%2Fjson

So to define VectorTile source, how do I define my URL, and what do have I to do on GeoServer side to configure my layer in the correct way ? I found this resource : https://docs.geoserver.org/latest/en/user/extensions/vectortiles/tutorial.html

The only vector tile format I have that is not image type on GeoServer is 'application/json;type=utfgrid'. And when I put '@pbf/{z}/{x}/{-y}.pbf' at the end of my URL like the sample, I got errors, but I guess it's not the right way.

Any help would be greatly appreciated to give me more precision on how to make work a VectorTile layer and source with GeoServer, or another way to optimize the map I create.

Many thanks.

EDIT

After some answers, I'm coming to this sample of code :

this._view = new ol.View({
    center: [74000, 96000],
    projection: 'EPSG:2169',
    zoom: 13,
    maxZoom: 24,
    minZoom: 11
});

this._map = new ol.Map(
    {
        view: this._view,
        controls: [
            new ol.control.Zoom(),
            new ol.control.ScaleLine()
        ]                
    });

let vectorSourceURL: string = `/geoserver/ANF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ANF:myLayer&outputFormat=application%2Fjson`;

let source = new ol.source.VectorTile({
    format: new ol.format.GeoJSON({
        defaultDataProjection: 'EPSG:2169',
        geometryName: 'GEOLOC'
    }),
    tileUrlFunction: function (tileCoord, pixelRatio, projection) {
        return vectorSourceURL + '&bbox=' + source.getTileGrid().getTileCoordExtent(tileCoord).join(',') + ',EPSG:2169';
    },
    tileGrid: ol.tilegrid.createXYZ(),
    projection: 'EPSG:2169'
});

let layer = new ol.layer.VectorTile({
    source: source,
    renderOrder: null
});

layer.set('name', 'myLayer');
layer.set('title', 'myLayer');

This code falls to the following error :

ERROR TypeError: Cannot read property 'getUnits' of null at ol.renderer.canvas.VectorTileLayer.createReplayGroup_ (ol-debug.js:29814) at ol.renderer.canvas.VectorTileLayer.drawTileImage (ol-debug.js:29886) at ol.renderer.canvas.VectorTileLayer.ol.renderer.canvas.TileLayer.prepareFrame (ol-debug.js:26557) at ol.renderer.canvas.Map.renderFrame (ol-debug.js:30302) at ol.Map.renderFrame_ (ol-debug.js:42107) at ol.Map. (ol-debug.js:41013) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3815) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

It appears that the issue comes now from EPSG:2169. An sample with EPSG:3857 works well (see answers).

Am I missing something ?

Many thanks !

Answer 1

The easiest way to speed up your application is to switch to using a WMTS (or tiled WMS) layer. This way your application can make use of the browser cache to only request tiles it hasn't seen before and the server need only render them once as they are cached to disk there too.

You almost certainly don't need all 300K features for your editing so trying to filter the WFS to just the bounding box of the requested area will help.

Finally, the biggest win would probably come from switching to a proper spatial database like PostGIS.

Answer 2

Vector tiles don't need to be .pbf or use XYZ urls. Here's the OpenLayers WFS example reworked to use the WFS url as the source for vector tiles. When zoomed out to cover the whole of Canada it does seem more responsive than the original example.

  var vectorSource = new ol.source.VectorTile({ format: new ol.format.GeoJSON(), tileUrlFunction: function(tileCoord, pixelRatio, projection) { return 'https://ahocevar.com/geoserver/wfs?service=WFS&' + 'version=1.1.0&request=GetFeature&typename=osm:water_areas&' + 'outputFormat=application/json&srsname=EPSG:3857&' + 'bbox=' + vectorSource.getTileGrid().getTileCoordExtent(tileCoord).join(',') + ',EPSG:3857'; }, tileGrid: ol.tilegrid.createXYZ() }); var vector = new ol.layer.VectorTile({ source: vectorSource, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 1.0)', width: 2 }) }) }); var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ layers: [raster, vector], target: document.getElementById('map'), view: new ol.View({ center: [-8908887.277395891, 5381918.072437216], maxZoom: 19, zoom: 12 }) }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/3.20.0/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://cdnjs.cloudflare.com/ajax/libs/openlayers/3.20.0/ol.js"></script> <div id="map"></div> 

There does seem to be a problem using that code with projections based on proj4 but it should work using a tile load function

let viewProjection = ol.proj.get('EPSG:2169');

let format = new ol.format.GeoJSON({
        defaultDataProjection: viewProjection,
        featureProjection: viewProjection,
        geometryName: 'GEOLOC'
    });

let source = new ol.source.VectorTile({
    tileUrlFunction: function (tileCoord, pixelRatio, projection) {
        return vectorSourceURL + '&bbox=' + source.getTileGrid().getTileCoordExtent(tileCoord).join(',') + ',EPSG:2169';
    },
    tileLoadFunction: function (tile, url) {
        tile.setProjection(viewProjection);
        tile.setLoader(function() {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                tile.setFeatures(format.readFeatures(xhr.responseText));
            }
            xhr.open("GET", url, true);
            xhr.send();
        });
    },
    tileGrid: ol.tilegrid.createXYZ(),
    projection: viewProjection
});