OpenLayers, buen agrupamiento de marcadores

Question

¿Sabes cómo tener un buen clúster en OpenLayers como este google example?

Answer 1

Puede agregar etiquetas a pointStyle en el ejemplo anterior y explicar el contexto de esta etiqueta. El código debería ser algo como esto:

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

Utilice OpenLayers.Strategy.Cluster para clustering.

• Example Code
• Working Example
• Custom Styling
• In-depth Explanation

Answer 3

se puede hacer esto con tan igorti ha dicho. la Soltion está utilizando la clase OpenLayers.Strategy.Cluster y el estilo de su capa con la clase OpenLayers.Style ...

para el peinado:

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

TIENE que le ayuda, más poder para usted!

Answer 4

acabo en marcha una estrategia llamada AnimatedCluster de OpenLayers. Puede ver un poco más al respecto en: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

Es solo una primera versión pero agrega una buena animación a los clusters. Hay muchas cosas que mejorar, pero es un punto de partida.

Answer 5

Aquí está el JSfiddle para clustering basado en atributos personalizados agregados a las capas. Luché un poco con esto para ponerlo aquí; También muestra la creación de la imagen gráfica de tarta un resumen cuando se acerca a cabo con los datos agrupados http://jsfiddle.net/alexcpn/518p59k4/

también creó un pequeño tutorial openlayers para explicar este 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; 
}; 

Answer 6

Hay una gran clustering example disponible en OpenLayers 3.

Creé un jsFiddle del código para que pueda jugar con él.

Básicamente, usted tiene que crear una ol.source.Cluster con una distanciaagrupación de un ol.source.Vector formada por una serie de ol.Feature. Cada ol.Feature creado a partir de las coordenadas de origen en forma de 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' 
});