Javascript OpenLayers，不错的标记聚类

OpenLayers, nice marker clustering

提问by apneadiving

Do you know how to have a nice clustering in OpenLayers such as this google example?

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

采纳答案by unibasil

You can add label to pointStyle in above example and explain context of this label. Your code should be something like this:

您可以在上面的示例中为 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,
  // ... 
});

回答by igorti

Use OpenLayers.Strategy.Clusterfor clustering.

使用OpenLayers.Strategy.Cluster聚类。

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

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

回答by EricSonaron

I have just implemented a so called AnimatedCluster strategy for OpenLayers. You can see a bit more about it at: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

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

It is only a firts version but adds a nice animation to the clusters. There are many things to improve but it is a starting point.

它只是一个初始版本，但为集群添加了漂亮的动画。有很多事情需要改进，但这是一个起点。

回答by I.G. Pascual

There's a great clustering exampleavailable in OpenLayers 3.

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

I created a jsFiddlefrom the code so you can play with it.

我从代码创建了一个jsFiddle，所以你可以玩它。

Basically you have to create an ol.source.Clusterwith a groupingdistance from an ol.source.Vectorformed by an array of ol.Feature. Each ol.Featurecreated from your source coordinates in the form of ol.geom.Point.

基本上必须创建一个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'
});

回答by Alex Punnen

Here is the JSfiddle for clustering based on custom attributes added to the layers. I struggled a bit with this so putting it here; Also shows creating a summary pie graph image when zoomed out with the clustered data http://jsfiddle.net/alexcpn/518p59k4/

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

Also created a small openlayer tutorial to explain this OpenLayers Advanced Clustering

还创建了一个小的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;
};

回答by Aragon

you can do this with as igorti has said. the soltion is using OpenLayers.Strategy.Cluster class and styling your layer with OpenLayers.Style class...

正如igorti所说，你可以做到这一点。解决方案是使用 OpenLayers.Strategy.Cluster 类并使用 OpenLayers.Style 类设置图层样式...

for styling :

造型：

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

it must helps you, more power to you!

它一定能帮到你，给你更多的力量！