OpenLayers, хорошая кластеризация маркеров

Question

Знаете ли вы, как создать хорошую кластеризацию в OpenLayers, например, пример Google ?

Answer 1

Вы можете добавить метку в 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,
  // ... 
});

Answer 2

Используйте OpenLayers.Strategy.Cluster для кластеризации.

• Пример кода
• Рабочий пример
• Пользовательский стиль
• Углубленное объяснение

Answer 3

Я только что реализовал так называемую стратегию AnimatedCluster для OpenLayers.Вы можете увидеть немного больше об этом по адресу: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

Это только первая версия, но добавляет хорошую анимацию в кластеры.Есть много вещей, которые нужно улучшить, но это отправная точка.

Answer 4

Существует отличный пример кластеризации , доступный в 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'
});

Answer 5

Вот JSfiddle для кластеризации на основе пользовательских атрибутов, добавленных в слои.Я немного боролся с этим, поэтому поместил это здесь;Также показано создание сводного изображения круговой диаграммы при уменьшении масштаба с кластеризованными данными http://jsfiddle.net/alexcpn/518p59k4/

Также создано небольшое руководство по открытому слою, чтобы объяснить это Расширенная кластеризация 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;
};

Answer 6

вы можете сделать это, как сказал игорти.Решением является использование класса 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';
}}}};

это должно помочь вам, больше энергии для вас!