OpenLayers, nice marqueur de clustering

Question

OpenLayers, nice marqueur de clustering

savez-vous comment avoir un bon clustering dans les OpenLayers comme celui-ci google exemple ?

20

demandé sur I.G. Pascual 2011-07-10 19:22:04

6 réponses

score 19 · Answer 1

Vous pouvez ajouter label à pointStyle dans l'exemple ci-dessus et expliquer le contexte de ce label. Votre code devrait être quelque chose comme ceci:

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,
  // ... 
});

score 12 · Answer 2

Utiliser OpenLayers.Strategy.Cluster pour le clustering.

score 8 · Answer 3

je viens de mettre en place une stratégie dite de cluster animé pour les OpenLayers. Vous pouvez en voir un peu plus à ce sujet à: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

ce n'est qu'une première version mais ajoute une belle animation aux clusters. Il y a beaucoup de choses à améliorer mais c'est un point de départ.

score 2 · Answer 4

Vous pouvez le faire comme igorti l'a dit. la soltion utilise OpenLayers.De la stratégie.Classe d'amas et Style de votre couche avec OpenLayers.Classe de Style...

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

il doit vous aider, plus de pouvoir à vous!

score 2 · Answer 5

There is a great exemple de cluster disponible en OpenLayers 3.

j'ai créé un jsFiddle du code pour pouvoir jouer avec.

Fondamentalement, vous devez créer un ol.source.Cluster avec un regroupement distance à partir d'un ol.source.Vector formé par une rangée de ol.Feature. ol.Feature créé à partir de vos coordonnées source sous la forme 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'
});

score 2 · Answer 6

voici le JSfiddle pour le regroupement basé sur des attributs personnalisés ajoutés aux couches. J'ai eu un peu de mal avec cela, donc le mettre ici; montre aussi la création d'une image graphique pie résumé lorsque zoomé avec les données regroupées http://jsfiddle.net/alexcpn/518p59k4/

a aussi créé un petit tutoriel openlayer pour expliquer ce OpenLayers Avancée De 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;
};

Las etiquetas más populares

OpenLayers, nice marqueur de clustering

6 réponses