OpenLayers，漂亮的标记聚类

Question

您知道如何在 OpenLayers 中进行良好的聚类，例如 google example 吗？

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 进行聚类。

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

Answer 3

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

这只是第一个版本，但为集群添加了漂亮的动画。有很多地方需要改进，但这是一个起点。

Answer 4

OpenLayers 3 中有一个很棒的clustering example。

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

基本上，您必须创建一个ol.source.Cluster，该ol.source.Cluster 与由ol.Feature 数组形成的ol.source.Vector 有一个分组 距离。每个ol.Feature 从您的源坐标以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 5

您可以按照 igorti 所说的那样执行此操作。解决方案是使用 OpenLayers.Strategy.Cluster 类并使用 OpenLayers.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';
}}}};

它必须帮助你，给你更多的力量！

Answer 6

这是基于添加到图层的自定义属性进行集群的 JSfiddle。我对此有点挣扎，所以把它放在这里；还显示了在使用聚集数据http://jsfiddle.net/alexcpn/518p59k4/ 缩小时创建摘要饼图图像

还创建了一个小的openlayer教程来解释这个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;
};