Improve geoJSON performance in OpenLayers3 - php

Question

I'm using code from geom's answer at https://gis.stackexchange.com/questions/216792/is-there-an-easy-way-to-use-postgis-geojson-in-openlayers-3 to load PostGIS layers into my OL3 map application.
The problem is: Rendering performance with big (raw) geojson datasets isn't optimal so I'd like to use something like this:
new ol.layer.Image({
source: new ol.source.ImageVector({
source: new ol.source.Vector({
url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
})
})
})
My current constructor is looking like this:
ol3Vector = function(options) {
var options = {
title: options.title,
visible: false,
geotable: options.geotable, // table name in PostGis-database
fields: options.fields, // field-names
where: options.where, // where-string passed to PostGis
source: new ol.source.Vector({
projection: "EPSG:4326",
attributions: [new ol.Attribution({
html: options.attribution
})],
strategy: ol.loadingstrategy.bbox, //load only data off the visible map
loader: function(extent, resolution, projection) {
var extent = ol.proj.transformExtent(extent, projection.getCode(), ol.proj.get('EPSG:4326').getCode());
$.ajax({
type: "GET",
dataType: "json",
url: "../map/php/get_geojson.php?" + // define path to the get_geojson.php script
"geotable=" + options.geotable +
"&fields=" + options.fields +
"&where=" + options.where +
"&bbox=" + extent.join(","),
context: this
}).done(function(data) {
var format = new ol.format.GeoJSON();
this.addFeatures(format.readFeatures(data, {
dataProjection: "EPSG:4326",
featureProjection: "EPSG:3857"
}));
});
}
}),
minResolution: options.minResolution,
maxResolution: options.maxResolution,
content: options.content,
symbology: options.symbology,
showLabels: options.showLabels,
label: options.label,
}
ol.layer.Vector.call(this, options);
};
ol.inherits(ol3Vector, ol.layer.Vector);
Furthermore:
var landkreise = new ol3Vector({
title: "Landkreise in Niedersachsen", // name of the layer to show up in the layerswitcher
geotable: "tbl_landkreise_geb_f",
fields: "KRS,sumarea",
where: "KRS IS NOT NULL", // You can use all the PostgreSQL or PostGis features here
minResolution: 0.01,
maxResolution: 50000,
content: " ",
showLabels: false, // show labels on map
label: "KRS" // field used for labeling
});
baselayersArray=[OSM, landkreise];
baselayers.setLayers(new ol.Collection(baselayersArray));
landkreise.setVisible(true);
How do I include the ol.layer.Image() (first code example) wrapper into my constructor?

Answer 1

Looks like you can do the following:
Derive your ol3Vector from ol.layer.Image instead of ol.layer.Vector
Wrap your ol.source.Vector (within the options object) with a ol.source.ImageVector (as shown in the example you reference)