Ive been trying to use the basic example from openlayer website to create a simple clustering map for my geoJSON data. However, I
m not getting any luck to generate any clusters. Below is my code, many thanks for help:
var baseLayer = new ol.layer.Tile({
name: 'MapQuest',
source: new ol.source.BingMaps({
key: 'An2UbYREMJPy-Cbi2z8Z52eZWO7LryKQjdG9oRKiZGU984drPE5rPYgCeR_mwLGo',
imagerySet: 'AerialWithLabels'
})
});
var view = new ol.View ({
center: [19425838, -4409677], // projection in EPSG: 3857
zoom: 6,
maxZoom: 28,
minZoom: 1
});
var source = new ol.source.GeoJSON({object: geojson_tdgjobs}); // local .js file passing geojson feature into a variable
var clustersSource = new ol.source.Cluster({
distance: 10,
source: source
});
var styleCache = {};
var clusters = new ol.layer.Vector({
source: clustersSource,
style: function(feature, resolution) {
var size = feature.get('features').length;
var style = styleCache[size];
if (true) {
style = [
new ol.style.Style({
image: new ol.style.Circle({
radius: resolution,
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 layers = [baseLayer, clusters];
var map = new ol.Map({
controls: ol.control.defaults().extend([new ol.control.ScaleLine({})]),
target: 'map',
renderer: 'canvas',
view: view,
layers: layers
});
Aucun commentaire:
Enregistrer un commentaire