是否可以在 OpenLayers 地图上以良好的性能显示 1000 多个特征足迹向量?
Is Displaying 1000+ Feature Footprint Vectors on OpenLayers Map with Good Performance Possible?
将许多要素足迹矢量加载到地图上时,openlayers 地图和 Web 应用程序变得无响应。有什么方法可以提高具有许多矢量的 openlayers 地图的性能?
我们希望能够同时在地图上支持至少 1000 个矢量。
我们正在使用 openlayers 4.
据我所知,OpenLayers 3+ 使用 HTML5 canvas 渲染图像和矢量。我见过 canvas 用于制作视频游戏和其他高性能图形应用程序。我不明白为什么它会导致 OpenLayers 出现这种无响应的问题。
编辑:当我说 "vectors" 时,我指的是方形多边形。此应用程序将 运行 在具有平均计算能力的桌面上。
TL/DR: 是。
如果不是,那可能是您自己的错。但是当 OL 应用程序变成 slow/unresponsive.
时,有一些简单的修复方法
- 对大型矢量图层使用 image render mode(以前称为 ImageVector)。
ol.layer.Vector({ renderMode: 'image', ... })
Great performance, but point symbols and texts are always rotated with the view and pixels are scaled during zoom animations.
当您有很多特征时,不要使用 styleFunction 为每个特征创建新样式。在 JavaScript 中实例化对象是昂贵的。尝试切换到静态样式。
如果您只显示点,请使用 cluster layer。无论如何,显示一个四亿点并不是很有帮助
试试 webgl renderer。它可能更快,但也可能看起来有点不同
.
if (ol.has.WEBGL) {
var map2 = new ol.Map({
renderer: (['webgl', 'canvas']),
....
});
} else {
// fallback
}
将许多要素足迹矢量加载到地图上时,openlayers 地图和 Web 应用程序变得无响应。有什么方法可以提高具有许多矢量的 openlayers 地图的性能?
我们希望能够同时在地图上支持至少 1000 个矢量。
我们正在使用 openlayers 4.
据我所知,OpenLayers 3+ 使用 HTML5 canvas 渲染图像和矢量。我见过 canvas 用于制作视频游戏和其他高性能图形应用程序。我不明白为什么它会导致 OpenLayers 出现这种无响应的问题。
编辑:当我说 "vectors" 时,我指的是方形多边形。此应用程序将 运行 在具有平均计算能力的桌面上。
TL/DR: 是。
如果不是,那可能是您自己的错。但是当 OL 应用程序变成 slow/unresponsive.
时,有一些简单的修复方法- 对大型矢量图层使用 image render mode(以前称为 ImageVector)。
ol.layer.Vector({ renderMode: 'image', ... })
Great performance, but point symbols and texts are always rotated with the view and pixels are scaled during zoom animations.
当您有很多特征时,不要使用 styleFunction 为每个特征创建新样式。在 JavaScript 中实例化对象是昂贵的。尝试切换到静态样式。
如果您只显示点,请使用 cluster layer。无论如何,显示一个四亿点并不是很有帮助
试试 webgl renderer。它可能更快,但也可能看起来有点不同
.
if (ol.has.WEBGL) {
var map2 = new ol.Map({
renderer: (['webgl', 'canvas']),
....
});
} else {
// fallback
}