跨层聚类

时间:2016-07-04 08:13:56

标签: openlayers-3

我知道如何在一个图层内创建聚类。它工作正常。但有没有办法在不同的层上创建聚类,例如不同层的点不是一个一个?

让我们看看这个例子:

http://jsfiddle.net/vnpq1qbu/1/

var count = 10000;
var features = new Array(count);
var e = 4500000;
for (var i = 0; i < count; ++i) {
  var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
  features[i] = new ol.Feature(new ol.geom.Point(coordinates));
}

var source = new ol.source.Vector({
  features: features
});

var clusterSource = new ol.source.Cluster({
  distance: 40,
  source: source
});

var styleCache = {};
var clusters = new ol.layer.Vector({
  source: clusterSource,
  style: function(feature, resolution) {
    var size = feature.get('features').length;
    var style = styleCache[size];
    if (!style) {
      style = [new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          stroke: new ol.style.Stroke({
            color: '#fff'
          }),
          fill: new ol.style.Fill({
            color: '#3399CC'
          })
        }),
        text: new ol.style.Text({
          text: "frs" + size.toString(),
          fill: new ol.style.Fill({
            color: '#fff'
          })
        })
      })];
      styleCache[size] = style;
    }
    return style;
  }
});



var count2 = 10000;
var features2 = new Array(count);
for (var i = 0; i < count; ++i) {
  var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
  features2[i] = new ol.Feature(new ol.geom.Point(coordinates));
}

var source2 = new ol.source.Vector({
  features: features2
});

var clusterSource2 = new ol.source.Cluster({
  distance: 40,
  source: source2
});

var styleCache2 = {};
var clusters2 = new ol.layer.Vector({
  source: clusterSource2,
  style: function(feature, resolution) {
    var size = feature.get('features').length;
    var style = styleCache2[size];
    if (!style) {
      style = [new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          stroke: new ol.style.Stroke({
            color: '#ddd'
          }),
          fill: new ol.style.Fill({
            color: '#ff0000'
          })
        }),
        text: new ol.style.Text({
          text: "ola" + size.toString(),
          fill: new ol.style.Fill({
            color: '#aaa'
          })
        })
      })];
      styleCache2[size] = style;
    }
    return style;
  }
});




var raster = new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
});

var raw = new ol.layer.Vector({
  source: source
});

var map = new ol.Map({
  layers: [raster, clusters, clusters2],
  renderer: 'canvas',
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

蓝色和红色是不同的层,聚类分别用于每个层。我想对所有点进行聚类,无论它们在哪一层。或者唯一的解决方案是将所有点添加到一个层中?但我真的想避免它。

0 个答案:

没有答案