OpenLayers is very slow when using WKT multipolygon with large number of points

Question

I'm showing the boundaries of Cyprus regions using OpenLayers with vector layer, I get the coordinates from a shapefile which has a lot of points, for instance some regions can have a multipolygon with in total 30000 points.

This is really slow on Firefox / IE and in Firefox it shows unresponsive script error. Only Chrome works well. What's the best way to get it working faster and smoothly?

I read one answer is to create a WMS server with MapServer to generate the images tiles instead to use the OpenLayers directly but I can't implement that solution because I want to change layer style dynamically to the different features in the vector layer i.e to show different colors to the region based on the dynamic value.

How can I overcome this issue? Any Insights would be much appreciated.

Answer 1

The most conservative approach will be to employ some kind of WMS server, transform the user-defined style to SLD format and use POST requests with SLD_BODY parameter to the WMS server, causing it to render features in user-defined style. This can be done with standard OpenLayers. Alternatively, you can port your application to Leaflet with some high-performance rendering engine like Kothic (tightly bound to OSM data, will require a lot of hacking) or d3 (much easier). Last but not least, forget IE and port application to OpenLayers 3 with WebGL renderer.

Answer 2

If you take a look at http://swingley.appspot.com/maps/olpts you will see that the limitations with large amounts of vector data are not trivial.

The best options would be to:

1) Reprocess/optimize the data set to reduce granularity meaning you reduce your total point count, in a third party and permanent way.

2) Dive into the OpenLayers.Strategy section of the documentation and optimize the actual display of the features in openlayers. This would allow you to do some "on the fly" pre-processing of the features.

3) Rasterize the data as you mentioned and simply pre-select a set of colors and render all the "regions" in those layers separately. This would allow you to change the XYZ location of the tiles programatically to match your design needs. This solution would take up some space, but would be a big performance gain.

Answer 3

What you want to do is visualise data with dynamic styling, which requires it being a vector.

What I've done to achieve this is to use topojson and you can see an example here: http://agl.pw/examples/NRM_Regions/map.html

In the example, the original SHP file was around 20 mb and the compressed, simplified topo-json file is only a 200 kb.

You could just simplify the geometry though, without using topojson for compression (and it only compresses it for transport, so it wont change how fast the browser responds when it's loaded).