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