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

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

问题:在 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 默认使用 canvas 渲染器，使用 dom 渲染器时不支持矢量特征。所以渲染许多特性永远不会在 DOM 上很重，因为 map 是单个 Canvas DOM 元素，而它可能在脚本上很繁重。

数以千计的功能实际上并没有那么多，您的性能应该没有太多优化，直到您达到数万或数十万。

每次缩放时调用样式函数(无论是从特征还是从图层中获取)，如果它不在视口(viewport)中，则在平移时以及每次特征更改时调用。