OpenLayers, хорошая кластерная маркер

Ответ 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,
  // ... 
});

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

Также был создан небольшой учебник по openlayer для объяснения этого OpenLayers Advanced Clustering

    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;
};

Ответ 5

В 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'
});

Ответ 6

вы можете сделать это, как сказал igorti. в Soltion используется класс 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';
}}}};

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