是否可以在OpenLayers地图上显示1000多个特征足迹向量？ [英] Is Displaying 1000+ Feature Footprint Vectors on OpenLayers Map with Good Performance Possible?

问题描述

将许多要素足迹向量加载到地图上时，openlayers地图和Web应用程序变得无法响应。有没有办法用许多向量来改善openlayers地图的性能？

When loading many feature footprint vectors onto the map, the openlayers map and web application becomes unresponsive. Is there any way to improve the performance of the openlayers map with many vectors?

我们希望能够同时在地图上支持至少1000个向量。

We would like to be able to support at least 1000 vectors on the map at once.

我们是使用openlayers 4.

We are using openlayers 4.

正如我所知，OpenLayers 3+使用HTML5画布渲染图像和矢量。我已经看到画布用于制作视频游戏和其他高性能图形应用程序。我不明白为什么它会导致OpenLayers的这个无响应的问题。

As I can tell, OpenLayers 3+ uses HTML5 canvas to render images and vectors. I've seen the canvas being used to make video games and other high performance graphic applications. I don't understand why it would cause this unresponsive issue with OpenLayers though.

编辑：当我说向量时，我的意思是方形多边形。此应用程序将在具有平均计算能力的桌面上运行。

When I say "vectors" I mean square polygons. This application will run on a desktop with average computing power.

推荐答案

TL / DR：是。

如果没有，那可能是你自己的错。但是，当OL应用程序变得缓慢/无响应时，有一些简单的修复。

If not, it's likely your own fault. But there are a few easy fixes for when an OL application becomes slow/unresponsive.

1. 使用图像渲染模式（以前称为ImageVector）用于大型矢量图层。 ol.layer.Vector（{renderMode：'image'，...}）

1. Use the image render mode(previously known as ImageVector) for large vector layers. 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.

1. 如果您有许多功能，请不要使用styleFunction为每个功能创建新样式。在JavaScript中实例化对象很昂贵。尝试切换到静态样式。

1. When you have many features, do not create new styles for each of them with a styleFunction. Instantiating objects is expensive in JavaScript. Try to switch to static styles.

如果您只显示点数，请使用群集层。无论如何，显示一个四万亿点并不是很有帮助

If you are only displaying points, use an cluster layer . Showing one quadrupillion points isn't very helpful anyway

尝试 webgl渲染器。它可能更快，但也可能看起来有点不同

Try the webgl renderer. It is probably faster, but might also look a bit different

。

if (ol.has.WEBGL) {
  var map2 = new ol.Map({
    renderer: (['webgl', 'canvas']),
    ....
  });
} else { 
  // fallback
}

这篇关于是否可以在OpenLayers地图上显示1000多个特征足迹向量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！