OpenLayers，漂亮的标记聚类

Posted 2023-05-06

【中文标题】OpenLayers，漂亮的标记聚类

【英文标题】：OpenLayers, nice marker clustering

【发布时间】：2011-10-02 06:49:55

【问题描述】：

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

【问题讨论】：

嗨，你不是在谈论 Openlayer 标记对吗？ (dev.openlayers.org/docs/files/OpenLayers/Marker-js.html)

@eMarine no 关于标记簇

【参考方案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,
  // ... 
);

【参考方案2】：

使用OpenLayers.Strategy.Cluster 进行聚类。

Example Code Working Example Custom Styling In-depth Explanation

【讨论】：

我很早就看到了这个，但它与我的示例相差甚远 :)

那你想要什么？您有问题的答案 - 您使用聚类策略并使用与 Google 相同的图像对其进行样式设置！

我给出的示例在设计中展示了带有数字的集群 + 它们会自动消失以让标记在相关时出现。

【参考方案3】：

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

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

【讨论】：

您介意调整您精彩的 AnimatedCluster 策略以适应 OpenLayers 的最新版本，即 2.13+ 吗？我已经对其进行了一些测试，但似乎集群缓动和图层缩放更改之间的动画存在一定的冲突（他们在上一个版本中为此制作了动画）。可惜 OpenLayers 3 中还没有实现集群，也许适应 AnimatedClusters 也是一个很好的领域？ ;)（顺便说一句，OL3 看起来已经很棒了）。

你能修复链接吗？

更新为acuriousanimal.com/2012/08/19/…。谢谢！！！

【参考方案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'
);

【参考方案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';
;

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

【讨论】：

我担心集群器上不会显示标记的数量。这仍然不是我想要的。

【参考方案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;
;