How do I display 400,000 or more points in Openlayers 3 using less than 200MB of memory?

Short answer

OpenLayers 3 uses about 2 kB per Point feature (see below), so while there are some optimizations possible you have to keep the number of features down. 400 000 features will require about 800 MB of memory.

Load your features dynamically, or use MultiPoint geometries.

Move the style from the geometry to the layer.

Longer answer

Style

When i tested, removing the style from the feature and replacing it with a simple property reduced the memory footprint by 290 B per feature. See http://jsfiddle.net/vkm2rg46/3/:

var vector = new ol.layer.Vector({
    source: vectorSource,
    style: function (feature, resolution) {
        var i = feature.getProperties().styleId;
        return [new ol.style.Style({
            image: icons[i]
        })];
    }
});

and to help the style function:

feature.set('styleId', i % (iconCount - 1));

Spatial index

You could set useSpatialIndex to false on the vector source. The source keep a spatial index to quickly retrieve features within a given extent, which seems to need about 200-250 bytes per feature. However, removing the index could have bad performance consequences with this amount of features.

Reduce feature count##

Your best bet is probably to load fewer features. There are several solutions to this.

Load on demand

It's most commonly solved by letting the server take care of the data, and dynamically load it when needed. You probably don't want to display 400 000 points at lower zoom levels, and the users wont pan everywhere.

This could be done by vector tiles or with a normal vector source using a bbox or tile.

It could also be done client side, by creating features/geometries from your own dataset in the vector source loader function.

Multipoints

A MultiPoint geometry with 10 or 100 points hardly take any more space than a single Point geometry. If you group you lightning strikes into MultiPoint geometries, memory could be a non-issue. You would however loose some semantics, and the possibility to attach metadata to each single point.

JsFiddle: http://jsfiddle.net/vkm2rg46/8/

Memory usage

I created http://jsfiddle.net/g7qduy1w/3/ to test the memory use of the geometry, features and source. You can take snapshot at the different stages (notably, the event listening data increases when adding a geometry to a feature, and a feature to a source). With a simple point geometry added to a feature without extra properties, and added to a source, the memory use per feature is: 288 B geometry event listener
424 B rest of geometry data
752 B feature event listeners
184 B rest of feature data
261 B source (share of total memory using 100 000 features)


Have a look at this example from camptocamp

https://www.camptocamp.com/en/actualite/drawing-large-amounts-of-points-with-openlayers-3-and-webgl

OpenLayers Symbols with WebGL:

http://openlayers.org/en/master/examples/symbol-atlas-webgl.html

It displays 100k points very efficiently!

Tags:

Openlayers 3

Recent Posts