Openlayers 4.5 ImageVector点自动聚类

Openlayers 4.5 ImageVector points automatically clustering

OL 版本 4.5:https://jsfiddle.net/70kd51gh/1/ OL 版本 4.0.1:https://jsfiddle.net/7zs5dqcm/2/

两个jfiddles中的代码是完全一样的,唯一不同的是使用的OL版本。出于某种原因,4.5 版不允许功能相互重叠,您可以放大和缩小并观察它们消失。版本 4.0.1 一切正常。但是,由于修复了一个不相关的错误,我无法降级到 4.0.1。

此问题特定于 ol.layer.Image,因为 ol.layer.Vector 允许重叠。但是,出于性能原因,我需要使用 ol.source.ImageVector。

是否有允许特征相互重叠的解决方法?

var pointstyle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: '#00ff00'
        }),
        stroke: new ol.style.Stroke({
            color: '#000',
            width: 1
        })
    })
});


var styleKeys = ['x', 'cross', 'star', 'triangle', 'square'];
var count = 250;
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 vectorLayer = new ol.layer.Image({
  source: new ol.source.ImageVector({source: source, style: pointstyle})
});

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

ol.source.ImageVector 从 v4.5.0 开始弃用
检查 upgrade note

将您的代码修改为:

var vectorLayer = new ol.layer.Vector({
  renderMode: 'image',
  source: source,
  style: pointstyle
});