logo标签列表

OpenLayers，优秀的标记聚类

javascriptopenlayersmarkerclusterer
23

你知道如何在OpenLayers中实现像Google示例中一样漂亮的聚类效果吗？

1
嗨，你不是在谈论Openlayer标记吧？（http://dev.openlayers.org/docs/files/OpenLayers/Marker-js.html） - eMarine
@eMarine 不了解标记聚类。 - apneadiving
6个回答
23

您可以在上面的示例中为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,
  // ... 
});
13
我已经看过这个，但它跟我的例子相差甚远 :) - apneadiving
那么你想要什么？你的问题已经有答案了——你可以使用聚类策略，并像谷歌一样使用相同的图片进行风格化！ - igorti
我举的例子展示了设计中带有数字的聚类，当相关时它们会自动消失以便让标记出现。 - apneadiving
8
你介意将你精彩的AnimatedCluster策略调整到适应OpenLayers的最新版本，即2.13+吗？我已经进行了一些测试，但似乎在群集缓动和图层缩放变化之间存在某种冲突（它们在最新版本中为此制作了动画）。遗憾的是，在OpenLayers 3中还没有实现聚类，也许这将是适应AnimatedClusters的好领域？ ;) （顺便说一句，OL3看起来已经很棒了）。 - unibasil
你能修复链接吗？ - I.G. Pascual
已更新至http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html。谢谢！ - acanimal
5

在OpenLayers 3中有一个很棒的聚类示例。

我从这段代码创建了一个jsFiddle，方便你进行测试。

基本上，你需要从由一组ol.Feature形成的ol.source.Vector中，按照分组距离创建一个ol.source.Cluster。每个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'
});
2

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

它必须帮助您，祝您更加强大！

1
我担心聚类器上显示的标记数量不够。这仍然不是我想要的。 - apneadiving
2
这是一个基于图层自定义属性进行聚类的 JSFiddle 示例。我在这方面遇到了一些困难，所以将其放在这里；同时还展示了当缩小聚类数据时创建摘要饼状图像 http://jsfiddle.net/alexcpn/518p59k4/。
此外，还创建了一个小型 OpenLayers 教程，以解释这个过程OpenLayers 高级聚类。
    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;
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接