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

我注意到的主要事情是：“调用样式功能”记录在地图的每个平移和地图的每次缩放中，用于图层上的所有功能。似乎 myStyleFunction 正在为图层上的所有功能执行，在每个用户输入到地图时。

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

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

Answer 1

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

当要渲染一个特征时，OL3 首先在特征上寻找一个样式函数。如果没有，则使用图层的样式功能。 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;
    }
}

一些旁注：

• 您使用了“DOM 上更重”的短语。 OpenLayers 默认使用画布渲染器，使用 dom 渲染器时不支持矢量特征。因此，渲染许多功能在 DOM 上永远不会很繁重，因为地图是单个画布 DOM 元素，而脚本可能很繁重。
• 数千个功能实际上并没有那么多，您的性能应该没有太多优化，直到您达到数万或数十万。
• 样式函数（无论是取自要素还是图层）在每次缩放、平移时（如果它不在视口中）以及每次要素更改时都会调用。