Знаете ли вы, как создать хорошую кластеризацию в OpenLayers, такую как пример Google ?
OpenLayers, хорошая кластеризация маркеров
Ответы (6)
Вы можете добавить метку к pointStyle в приведенном выше примере и объяснить контекст этой метки. Ваш код должен быть примерно таким:
var pointStyle = new OpenLayers.Style({
// ...
'label': "${label}",
// ...
}, {
context: {
// ...
label: function(feature) {
// clustered features count or blank if feature is not a cluster
return feature.cluster ? feature.cluster.length : "";
}
// ..
}
});
var styleMap = new OpenLayers.StyleMap({
'default': pointStyle,
});
var googleLikeLayer = new OpenLayers.Layer.Vector("GoogleLikeLayer", {
// ...
styleMap : styleMap,
// ...
});
Используйте OpenLayers.Strategy.Cluster
для кластеризации.
Я только что реализовал так называемую стратегию AnimatedCluster для OpenLayers. Подробнее об этом можно узнать по адресу: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html
Это только первая версия, но она добавляет красивую анимацию к кластерам. Есть много вещей, которые нужно улучшить, но это отправная точка.
В OpenLayers 3 есть отличный пример кластеризации.
Я создал jsFiddle из кода, чтобы вы могли поиграть с ним.
По сути, вам нужно создать ol.source.Cluster
с группировка на расстоянии от ol.source.Vector
сформированного массивом ol.Feature
. Каждый ol.Feature
создан из ваших исходных координат в виде ol.geom.Point
.
var features = [
new ol.Feature(new ol.geom.Point([lon1, lat1])),
new ol.Feature(new ol.geom.Point([lon2, lat2])),
...
];
var cluster = new ol.source.Cluster({
distance: 50,
source: new ol.source.Vector({ features: features });
});
var map = new ol.Map({
layers: [
new ol.source.MapQuest({layer: 'sat'}), // Map
new ol.layer.Vector({ source: cluster }) // Clusters
],
renderer: 'canvas',
target: 'map'
});
вы можете сделать это, как сказал Игорь. решение использует класс OpenLayers.Strategy.Cluster и стиль вашего слоя с помощью класса OpenLayers.Style...
для стайлинга:
var pointStyle = new OpenLayers.Style({
'default': new OpenLayers.Style({
'pointRadius': '${radius}',
'externalGraphic': '${getgraph}'
....
},{
context:{
radius: function(feature){
return Math.min(feature.attributes.count,7)+3;
},{
getgraph : function(feature){
return 'ol/img/googlelike.png';
}}}};
это должно помочь вам, больше силы для вас!
Вот JSfiddle для кластеризации на основе пользовательских атрибутов, добавленных к слоям. Я немного боролся с этим, поэтому разместил его здесь; Также показано создание сводного изображения круговой диаграммы при уменьшении масштаба кластеризованных данных http://jsfiddle.net/alexcpn/518p59k4/
Также создан небольшой учебник по openlayer, чтобы объяснить это Расширенная кластеризация OpenLayers
var getClusterCount = function (feature) {
var clustercount = {};
var planningcount = 0;
var onaircount = 0;
var inerrorcount = 0;
for (var i = 0; i < feature.cluster.length; i++) {
if (feature.cluster[i].attributes.cluster) {
//THE MOST IMPORTANT LINE IS THE ONE BELOW, While clustering open layers removes the orginial feature layer with its own. So to get the attributes of the feature you have added add it to the openlayer created feature layer
feature.attributes.cluster = feature.cluster[i].attributes.cluster;
switch (feature.cluster[i].attributes.cluster) {
......
return clustercount;
};