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在客户端上的重量不会比在每个特征上设置样式更重。

将style函数设置为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元素，而在脚本编写时可能很重要。
• 成千上万的功能并不是那么多，你的表现应该没有太多的优化，直到你达到数十或数十万。
• 样式函数（无论是否从特征或图层中获取）在每次缩放时调用，如果它不在视口中并且在每个特征更改上，则在平移时调用。