javascript - OpenLayers，漂亮的标记聚类

Question

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

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

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