1

In OpenLayers3, when the number of points more than 1,000,000, the display efficiency is too low. How to solve this problem? The following code is the example in OpenLayer3, and I had changed the number of points to 1,000,000.

<script>
  var distance = document.getElementById('distance');
  var count = 1000000;
  var features = new Array(count);
  var e = 4500000;
  for (var i = 0; i < count; ++i) {
    var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
    features[i] = new ol.Feature(new ol.geom.Point(coordinates));
  }

  var source = new ol.source.Vector({
    features: features
  });

  var clusterSource = new ol.source.Cluster({
    distance: parseInt(distance.value, 10),
    source: source
  });

  var styleCache = {};
  var clusters = new ol.layer.Vector({
    source: clusterSource,
    style: function(feature) {
      var size = feature.get('features').length;
      var style = styleCache[size];
      if (!style) {
        style = new ol.style.Style({
          image: new ol.style.Circle({
            radius: 10,
            stroke: new ol.style.Stroke({
              color: '#fff'
            }),
            fill: new ol.style.Fill({
              color: '#3399CC'
            })
          }),
          text: new ol.style.Text({
            text: size.toString(),
            fill: new ol.style.Fill({
              color: '#fff'
            })
          })
        });
        styleCache[size] = style;
      }
      return style;
    }
  });

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var map = new ol.Map({
    layers: [raster, clusters],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

  distance.addEventListener('input', function() {
    clusterSource.setDistance(parseInt(distance.value, 10));
  });
</script>
  • 2
    This sounds like expected behavior to me. Please edit the question to specify discete quantities for "large" and "low". – Vince Jan 9 '17 at 2:30
  • A million of anything is 975k too many for rendering in any context, much less in a browser. The first rule of rendering large feature counts is, "Don't do it." There are many different techniques to implement this rule, but they all require more information than you have provided. Timing information is needed, with units in milliseconds. – Vince Jan 9 '17 at 5:21
  • 1 000 000 points is way too much, try clustering or limiting on the server before you reach the JavaScript. A user will not see any difference between 800 000 and 1 000 000 points. If you really want more performance you could try using OL with WebGL, but this does not work well on some devices. – Christophe Roussy Oct 10 '17 at 13:21
  • As with the above comments, Consider using a heatmap. openlayers.org/en/latest/examples/heatmap-earthquakes.html – intotecho Jul 1 '18 at 11:19
2

Instead of ol.source.Cluster, you may want to use the SuperCluster, which integrates easily with ol.source.Vector. You basically take the same worker as for the official SuperCluster demo. Connect that with a vectorLayer with an ol.source.Vector function like this:

var worker = new Worker('worker.js');
var ready = false;
var format = new ol.format.GeoJSON();

worker.onmessage = function(e) {
  if (e.data.ready) {
    ready = true;
    update();
  } else {
    var source = vectorLayer.getSource();
    source.clear(true);
    var geojsonObject = {
      'type': 'FeatureCollection',
      'features': e.data
    };
    var features = format.readFeatures(geojsonObject, {
      featureProjection: 'EPSG:3857'
    });
    source.addFeatures(features);
  }
};

function update() {
  if (!ready) {
    return;
  }
  var bounds = ol.proj.transformExtent(
    map.getView().calculateExtent(map.getSize()),
    'EPSG:3857',
    'EPSG:4326'
  );
  worker.postMessage({
    bbox: bounds,
    zoom: Math.round(map.getView().getZoom())
  });
}

map.on('moveend', update);

You can see and play with a full live demo here: http://plnkr.co/edit/f43MBKS11hZbCSjDLGjv?p=preview

A similar demo was proposed as OpenLayers example as pull request #5848.

  • Very sorry for a long time did not answer your comments, thank you for answering my question. And i wanna know that i have a lot of points that need to be clustered and are your methods feasible? thank you. – 王炳乾 Feb 15 '17 at 7:18
  • @ahocevar I have a related question on this at gis.stackexchange.com/q/234808/55688 if you have the time to review that would be excellent. – Nigel_V_Thomas Apr 5 '17 at 15:40

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.