Openlayers 4.5 ImageVector 点自动聚类

问题描述

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

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

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

是否有允许功能相互重叠的解决方法?

var pointstyle = new ol.style.Style({图像:新 ol.style.Circle({半径:7，填充:新 ol.style.Fill({颜色:'#00ff00'}),中风:新 ol.style.Stroke({颜色:'#000'，宽度:1})})});var styleKeys = ['x', 'cross', 'star', 'triangle', 'square'];无功计数 = 250;var features = new Array(count);无功 e = 4500000；for (var i = 0; i < count; ++i) {var 坐标 = [2 * e * Math.random() - e, 2 * e * Math.random() - e];特征[i] = new ol.Feature(new ol.geom.Point(coordinates));}var source = new ol.source.Vector({特点:特点});var vectorLayer = new ol.layer.Image({来源:新 ol.source.ImageVector({来源:来源，风格:pointstyle})});var map = new ol.Map({层数:[矢量层],目标:'地图'，视图:新 ol.View({中心:[0, 0]，变焦:2})});

解决方案

ol.source.ImageVector 从 v4.5.0 开始弃用
检查 ">

将您的代码修改为:

var vectorLayer = new ol.layer.Vector({渲染模式:'图像'，来源:来源，风格:点式});

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

The code in both jfiddles is exactly the same, the only difference is the OL version being used. For some reason, Version 4.5 is not allowing features to overlap each other, you can zoom in and out and watch them disappear. Version 4.0.1 everything works as expected. However, I cannot downgrade to 4.0.1 because of an unrelated bug that was fixed.

The issue is specific to ol.layer.Image, as ol.layer.Vector allows overlapping. However, I need to use ol.source.ImageVector for performance reasons.

Is there a workaround to allow the features to overlap each other?

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 is deprecated from v4.5.0
check upgrade note

fix your code to:

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

这篇关于Openlayers 4.5 ImageVector 点自动聚类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！