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?
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