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进行群集。

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.Vector创建一个分组距离的ol.Feature。每个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所说的那样做。 soltion使用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/

缩小时创建摘要饼图图像

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

OpenLayers，很棒的标记聚类

6 个答案: