关于性能的 OpenLayers 3 样式函数与单个特征样式

Question

在 OpenLayers 中，我们曾经为添加到层中的每个单独的特征独立设置样式：

let feat = new ol.Feature(geometry);
feat.setStyle(myStyle);

较新版本的 OpenLayers 更加关注 "styleFunction" 功能，您只需定义 1 个样式函数，而不是单独为每个功能设置样式：

let layer = new ol.layer.Vector({
    source: mySource,
    style: myStyleFunction
});
function myStyleFunction(feature) {
    console.log('calling style function');
    let props = feature.getProperties();
    if (props.drawBlue) {
        return new ol.style.Style(...);
    } else {
        return new ol.style.Style(...);
    }
}

我注意到的主要事情："calling style function" 记录在地图的每个平移和地图的每个缩放上，对于图层上的所有要素。看起来 myStyleFunction 正在为图层上的所有功能执行，在每个用户输入到地图时。

问题：在 DOM 上使用 styleFunction 功能是否比为每个功能使用独立样式更重？我们将使用数以千计的功能，并且想知道什么会产生最佳性能。使用旧方法，我无法真正找到一种方法来了解特征何时在后台重绘，但我们只设置了一次样式，之后就没有修改过。那么这是否意味着旧方法的性能更好？

虽然 OpenLayers 3 的内部工作非常复杂并且依赖于很多东西，但我希望你们中的一个人可能对这个功能有一些了解。谢谢

Answer 1

OpenLayers 3 是围绕使用样式函数构建的，这意味着即使您的第一个示例也会创建一个样式函数。 1

当要渲染一个特征时，OL3首先在特征上寻找样式函数。如果有none，则使用图层的样式函数。 2.

因此，您的问题的一般答案是否定的，在客户端上使用图层上的 styleFunction 不会比在每个功能上设置样式更重。

将样式函数设置为function(){return myStyle}在功能上等同于将myStyle设置为每个特征的样式。它还会比在每个功能上设置样式更好（微小）一点，因为使用单个功能而不是为每个功能创建、存储和垃圾收集相同的功能。

话虽如此，您的样式函数示例比在每个功能上设置样式要慢一点，因为它会在每次调用时动态创建新的样式对象。为了优化样式函数，您应该考虑创建一组样式函数使用的预创建样式：

var myStyles = {
    blue: new ol.style.Style(...),
    default: new ol.style.Style(...),
};
function myStyleFunction(feature) {
    if (feature.get('drawBlue')) {
        return myStyles.blue;
    } else {
        return myStyles.default;
    }
}

一些旁注：

您使用了短语 "heavier on the DOM"。 OpenLayers默认使用canvas渲染器，使用dom渲染器时不支持矢量特征。因此渲染许多功能永远不会对 DOM 造成负担，因为地图是单个 canvas DOM 元素，而它可能对脚本造成负担。
几千个特征并没有那么多，在你达到几万或几十万之前，你的性能应该很好，没有太多的优化。
在每次缩放、平移（如果它不在视口中）和每次功能更改时调用样式函数（无论它是否取自要素或图层）。

关于性能的 OpenLayers 3 样式函数与单个特征样式

OpenLayers 3 Style Function versus Individual Feature Style with regards to performance

javascript

gis

openlayers-3