CODEWITHSUNDEEP
jqueryopenlayersopenstreetmapgeojsonopenlayers-3
werdna1
werdna1

Reputation: 49

Openlayers slow performance with 140k features

I have a map on my web app which loads a GeoJSON file to display properties on the map, this consists of 140k features.

When the map is zoomed out, the performance is very slow and I'm looking for advice on how this can be improved.

I am using open layers 4.

Code below:

var SolarData = "";
var solarLayer = new ol.layer.Vector();

//addWards
proj4.defs("EPSG:27700", '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717' +
    ' +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs');
ol.proj.get('EPSG:27700').setExtent([0, 0, 800000, 1400000]);
ol.proj.get('EPSG:27700').setWorldExtent([-10, 49, 6, 63]);
ol.proj.get('EPSG:27700').setGlobal(false);
ol.proj.get('EPSG:27700').setGetPointResolution(function (resolution) { return resolution; });

var sprojection = new ol.proj.Projection({
    code: 'EPSG:900913'
});

var solarProjection = new ol.proj.Projection({
    code: 'EPSG:27700',
    units: 'm'
});

$.getJSON("/content/property_data.json", function (data) {

    SolarData = data;

    var solarsource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(SolarData),
    });

    var sfill = new ol.style.Fill({ color: 'rgba(1, 184, 170, 0)' });
    var sstyle = new ol.style.Style({
        fill: sfill,
        stroke: new ol.style.Stroke({
            color: '#212121',
            width: 2
        })
    });

    var solarFeatures = solarsource.getFeatures();
    for (var i = 0; i < solarFeatures.length; i++) {
        var feature = solarFeatures[i];
        feature.getGeometry().transform(solarProjection, sprojection);
        feature.setStyle(sstyle);
        feature.set('name', '');
    }

    solarLayer = new ol.layer.Vector({
        source: solarsource,
    });

    map.addLayer(solarLayer);



}).fail(function (jqXHR, textStatus, errorThrown) {
    console.log("error " + textStatus);
    console.log("incoming Text " + jqXHR.responseText);
});

Upvotes: 1

Views: 1725

Answers (1)

Dominik Reinert
Dominik Reinert

Reputation: 895

I am not sure there is an easy way to increase the performance drastically here.

What we did in my company, is grouping the results on a distance based function. That reduces the amount of points, that actually get added to the map drastically.

You can fetch more granular data upon zooming into the map. When doing that, you can remove the points, that were already added and replace them by the more fine-grained data you get now.

However, as I said 'there is no easy way', this also means, that you should fetch your data based on the current location of your view on the map - both require a proper computation of the data, not just a plain .json object.

EDIT:

You can check out the docs on the geojson format here: https://openlayers.org/en/latest/apidoc/module-ol_format_GeoJSON-GeoJSON.html

These are the docs for the current release, but I remember that you can pass the featureProjection and the targetProjection in the constructor of the GeoJson format, so you dont need to transform them by hand after adding the features

Upvotes: 1

Related Questions