javascript - saveas - OpenLayers, buen agrupamiento de marcadores

openlayers speed

Question

¿Sabes cómo tener un buen agrupamiento en OpenLayers como este ejemplo de google ?

Answer 1

Acabo de implementar una estrategia llamada AnimatedCluster para OpenLayers. Puedes ver un poco más sobre esto 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 grupos. Hay muchas cosas que mejorar pero es un punto de partida.

Answer 2

Aquí está el JSfiddle para agrupamiento basado en atributos personalizados agregados a las capas. Luché un poco con esto así que poniéndolo aquí; También muestra la creación de una imagen de gráfico circular resumen cuando se aleja con los datos agrupados http://jsfiddle.net/alexcpn/518p59k4/

También creó un pequeño tutorial de openlayer para explicar esta Agrupación avanzada de OpenLayers

    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 3

Hay un gran ejemplo de agrupación en clúster disponible en OpenLayers 3.

jsFiddle un jsFiddle partir del código para que puedas jugar con él.

Básicamente tienes que crear un ol.source.Cluster con una distancia de agrupación desde un ol.source.Vector formado por una matriz de ol.Feature . Cada ol.Feature creado a partir de sus 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''
});

Answer 4

Puede agregar una etiqueta a pointStyle en el ejemplo anterior y explicar el contexto de esta etiqueta. Su código debe 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 5

Puedes hacer esto con lo que ha dicho igorti. la solución está usando la clase OpenLayers.Strategy.Cluster y estilizando su capa con la clase OpenLayers.Style ...

para el estilo:

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

¡Te debe ayudar, más poder para ti!

Answer 6

Utilice OpenLayers.Strategy.Cluster para agrupar.

• Código de ejemplo
• Ejemplo de trabajo
• Estilo personalizado
• Explicación en profundidad