2

I'm using code from geom's answer at Is there an easy way to use Postgis GeoJSON in Openlayers 3 to load PostGIS layers into my OL3 map application.

Each time I pan/zoom far enough to trigger a different map extend, a new PHP call is fired and new data is catched. That's working as intended due to ol.loadingstrategy.bbox

The problem is: Each time I do that, panning performance keeps on dropping drastically. I guess, that's because multiple features are stacked upon each other. This can also be seen as layer's opacity seems to be increased each time I pan/zoom. I'm using latest OpenLayers version 4.2.

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);
  • 1
    These scripts (JS and PHP) should not be used as shown here, as they open the door to injection – JGH Jul 11 '17 at 11:42
  • even if the whole page and files are not publicly accessable? – Revo Jul 11 '17 at 11:47
  • If the map is public, so is its javascript and it is more than easy to change the where clause to do bad things. Of course if the map sits on your own computer for your own use then it's not an issue – JGH Jul 11 '17 at 11:51
  • okay thanks. do you know any safe alternative to load PostGIS data into ol3? – Revo Jul 11 '17 at 11:53
  • You can use GeoServer or similar. Alternatively build a proxy page / stored procedure that is not sensitive to injection (google it) – JGH Jul 11 '17 at 12:01
1

Nvm I got it. I changed

}).done(function(data) {
            var format = new ol.format.GeoJSON();
            this.addFeatures(format.readFeatures(data, {
                dataProjection: "EPSG:4326",
                featureProjection: "EPSG:3857"
            }));

to

}).done(function(data) {
                var format = new ol.format.GeoJSON();
                this.clear();
                this.addFeatures(format.readFeatures(data, {
                    dataProjection: "EPSG:4326",
                    featureProjection: "EPSG:3857"
                }));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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