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
})
});
答案 0 :(得分:3)
ol.source.ImageVector
检查upgrade note
将您的代码修复为:
var vectorLayer = new ol.layer.Vector({
renderMode: 'image',
source: source,
style: pointstyle
});