Pages

header

OpenLayers3 GeoJSON clustering - first steps troubleshooting guide, part 2

OL2 had the specific layer strategy that makes clusters from points.
But OpenLayers3 haven't yet.
OpenLayers 3 has own method to do that, but you need use the feature array with points stack as source.

Everything is okay if we use stack of coordinates or array of independent points.
The panic starts when you should to make clusters from geojson points.
But what you should do if you want to load geojson with points created in QGIS?

openlayers 3 geojson clustering


At first we need to transform geojson object to stack of point objects.
How to do that without nervous i don't found, but we can to extract the lat\lng from geojson with
jQuery.getJSON() or with AJAX json request.

Example


$.getJSON( "file.geojson", function( data ) {
  var features = [];
  $.each( data, function(key, value) {
    features.push(value);
});

/// - "file.geojson" - path to your geojson

var fln = features[2].length;

/// - features contents 3 elements: ["FeatureCollection", Object, Array[92]]
We need to get length of array that includes features, so we need to use features[2].

var points = [];
for (var i = 0; i < fln; ++i) {
  points.push(new ol.Feature(new ol.geom.Point(features[2][i]['geometry']['coordinates'][0])));
}
console.log(points);

/// - now we need to extract coordinates of every feature and create point objects.
features[2][i]['geometry']['coordinates'][0]
features[2] - array with geojson points
[i] - points number (0-91)
['geometry'] - point attribute with geometry
['coordinates'] - attribute that consist coordintes
[0] - array with lat\lng that we should use to create ol.geom.Point. 

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

/// - creating of vector source from array of ol.Feature point objects 

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

/// - creating of cluster source from our vector source

var styleCache = {};
var clusters = new ol.layer.Vector({
  source: clusterSource,
  style: function(feature, resolution) {
    var size = feature.get('features').length;
    var style = styleCache[size];
    if (!style) {
      style = [new ol.style.Style({
          radius: 20,
          stroke: new ol.style.Stroke({
            color: 'rgba(225,225,225,0.2)',
   width: 10
          }),
          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;
  }
});

/// - styling as in OL3 clustering example

map.addLayer(clusters);

/// - adding cluster layer to the map
});


About styling with response to cluster size i will write later

No comments :

Post a Comment