OpenLayers, nice marker clustering

Question

Sai come avere un clustering piacevole in OpenLayers come questo google example?

Answer 1

È possibile aggiungere un'etichetta a pointStyle nell'esempio sopra e spiegare il contesto di questa etichetta. Il codice dovrebbe essere qualcosa di simile:

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

Utilizzare OpenLayers.Strategy.Cluster per il clustering.

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

Answer 3

si può fare questo con il maggior igorti ha detto. il soltion sta usando classe OpenLayers.Strategy.Cluster e styling il vostro strato con classe OpenLayers.Style ...

per lo styling:

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

si deve ti aiuta, più potere a voi!

Answer 4

ho appena implementato un cosiddetto strategia AnimatedCluster per OpenLayers. Puoi vedere un po 'di più a questo indirizzo: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

È solo una versione iniziale, ma aggiunge una bella animazione ai cluster. Ci sono molte cose da migliorare ma è un punto di partenza.

Answer 5

Ecco il JSfiddle per il clustering basato su attributi personalizzati aggiunti ai livelli. Ho faticato un po 'con questo, quindi l'ho messo qui; mostra anche la creazione di un'immagine grafico a torta una sintesi quando si ingrandisce con i dati in cluster http://jsfiddle.net/alexcpn/518p59k4/

creato anche un piccolo tutorial openlayers per spiegare questo 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

C'è una grande clustering example disponibile in OpenLayers 3.

Ho creato un codice jsFiddle dal codice in modo da poter giocare con esso.

Fondamentalmente si deve creare un ol.source.Cluster con un raggruppamento distanza da un ol.source.Vector formata da una matrice di ol.Feature. Ogni ol.Feature creato dalle coordinate di origine sotto forma di 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' 
});