OpenLayers,很棒的标记聚类

Question

你知道如何在OpenLayers中有一个很好的聚类,比如这个谷歌的例子吗？

Answer 1

您可以在上面的示例中为pointStyle添加标签,并解释此标签的上下文.你的代码应该是这样的:

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

使用OpenLayers.Strategy.Cluster聚类.

• 示例代码
• 工作实例
• 自定义样式
• 深入解释

Answer 3

我刚刚为OpenLayers实现了一个所谓的AnimatedCluster策略.您可以在以下网址查看更多信息:http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

它只是一个版本,但为群集添加了一个很好的动画.有许多事情需要改进,但这是一个起点.

Answer 4

OpenLayers 3 中有一个很棒的集群示例。

我从代码中创建了一个jsFiddle ，以便您可以使用它。

基本上，您必须创建一个ol.source.Cluster与由 数组形成的分组距离的。每个都是从源坐标创建的，格式为.ol.source.Vectorol.Featureol.Featureol.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'
});