OpenLayers, nice marqueur de clustering

Savez-vous comment faire pour avoir une belle clustering dans OpenLayers comme ce google exemple ?

InformationsquelleAutor apneadiving | 2011-07-10
  1. 22

    Vous pouvez ajouter une étiquette à pointStyle dans l'exemple ci-dessus, et expliquer le contexte de cette étiquette.
    Votre code doit ê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,
  //... 
});
    • Ceci est une excellente option, merci!
    • fonctionne parfaitement bien avec la stratégie du cluster, tks. UPVOTED!
    InformationsquelleAutor unibasil
  2. 13

    Utilisation OpenLayers.Strategy.Cluster pour le clustering.

    • J'ai déjà vu celui-ci, mais c'est loin d'être mon exemple 🙂
    • consultez la mise à jour de réponse
    • J'ai vu celui-là aussi, désolé 🙂
    • alors, que voulez-vous? vous avez la réponse à votre question - vous utiliser le Clustering stratégie et le style avec les mêmes images que Google ne!
    • L'exemple que j'ai donné présente des grappes avec des chiffres à l'intérieur de la conception de + ils auto-disparaissent pour laisser le marqueur apparaît lorsque pertinent.
    • de toute façon, +1 pour vos efforts

    InformationsquelleAutor igorti
  3. 8

    J'ai juste mis en œuvre un soi-disant AnimatedCluster stratégie d'OpenLayers.
    Vous pouvez voir un peu plus sur le sujet à: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

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

    • Merci pour l'information, je vais jeter un oeil
    • Avez-vous l'esprit afin d'adapter votre merveilleux AnimatedCluster stratégie pour s'adapter aussi une dernière versions de OpenLayers, c'est à dire 2.13+? Je l'ai testé un peu, mais il semble qu'il y a un certain conflit dans les animations entre le cluster de relâchement de la couche, zoom changer (ils ont fait de l'animation pour cette dans les dernières versions). Dommage il y a pas de clusters dans OpenLayers 3 encore mis en œuvre, il sera peut-être bon pour s'adapter AnimatedClusters trop? 😉 (btw, OL3 ressemble beaucoup déjà).
    • Pouvez-vous mettre une question sur github avec l'animation problème? Merci !!!
    • pouvez-vous réparer le lien s'il vous plaît?
    • mise à jour de acuriousanimal.com/2012/08/19/.... Merci !!!
    InformationsquelleAutor EricSonaron
  4. 3

    Il y a une grande exemple de cluster disponible dans OpenLayers 3.

    J'ai créé un jsFiddle du code de sorte que vous pouvez jouer avec elle.

    Fondamentalement, vous devez créer un ol.source.Cluster avec un groupement distance à partir d'un ol.source.Vector formé par un tableau de ol.La fonction. Chaque ol.Feature créé à partir de votre source de coordonnées dans le formulaire 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'
});
    InformationsquelleAutor I.G. Pascual
  5. 2

    vous pouvez faire cela avec comme igorti a dit. la soltion utilise OpenLayers.De la stratégie.Cluster de classe et le 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 aide, vous aurez plus de puissance!

    • J'ai peur de ne plus être le nombre de marqueurs affichés sur le clusterer. C'est toujours pas ce que je suis à la recherche d'.
    InformationsquelleAutor Aragon
  6. 2

    Voici le JSfiddle pour le clustering basé sur des attributs personnalisés ajoutés aux calques. J'ai un peu de mal avec cette sorte de le mettre ici; montre Également la création d'un résumé graphique circulaire de l'image lors d'un zoom arrière avec le cluster de données http://jsfiddle.net/alexcpn/518p59k4/

    Également créé un petit openlayer tutoriel pour expliquer cette 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;
};
    InformationsquelleAutor Alex Punnen