如何阻止OpenLayers7中VectorLayer修改时遍历所有要素执行style function

使用OpenLayers 7版本，现有以下组件：

• 配置了style function的VectorLayer：会为每个Feature应用样式
• 未设置样式的Modify交互：用于修改选中的Feature
• 配置了style function的Select交互

发现每次选中Feature并开始修改时，VectorLayer会触发change事件，且图层中所有未选中的Feature都会执行style function。希望找到方案阻止该无意义的重复执行。

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" href="./libs/v6.0.0-dist/ol.css" />
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <div id="js-map" class="map"></div>
        <script src="./libs/v6.0.0-dist/ol.js"></script>
        <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
        <script>
            window.onload = init;
            function init() {
                const map = new ol.Map({
                    view: new ol.View({
                        center: [-12080385, 7567433],
                        zoom: 3,
                        maxZoom: 6,
                        minZoom: 2,
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM(),
                        }),
                    ],
                    target: 'js-map',
                    keyboardEventTarget: document,
                });

                const vectorSource = new ol.source.Vector();
                const vectoreLayer = new ol.layer.Vector({
                    source: vectorSource,
                    style: (feature) => {
                        console.log('vectorStyle');
                        if (feature.getGeometry().getType() === 'LineString') {
                            return [
                                new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: '#ff0000',
                                    }),
                                }),
                            ];
                        }
                    },
                });
                map.addLayer(vectoreLayer);
                const drawInteraction = new ol.interaction.Draw({
                    source: vectorSource,
                    type: 'LineString',
                });
                map.addInteraction(drawInteraction);

                const selecInteraction = new ol.interaction.Select({
                    layers: [vectoreLayer],
                    hitTolerance: 10,
                    style: (feature) => {
                        console.log('selectStyle');
                        if (feature.getGeometry().getType() === 'LineString') {
                            return [
                                new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: '#ff0000',
                                    }),
                                }),
                                new ol.style.Style({
                                    image: new ol.style.Circle({
                                        radius: 5,
                                        fill: new ol.style.Fill({
                                            color: '#f59e0b',
                                        }),
                                        stroke: new ol.style.Stroke({
                                            color: '#000000',
                                            width: 2,
                                        }),
                                    }),
                                    geometry: function () {
                                        const coordinates = feature.getGeometry().getCoordinates();
                                        return new ol.geom.MultiPoint(coordinates);
                                    },
                                }),
                            ];
                        }
                    },
                });

                map.on('contextmenu', () => {
                    map.removeInteraction(drawInteraction);
                });
                map.addInteraction(selecInteraction);
                map.addInteraction(
                    new ol.interaction.Modify({
                        features: selecInteraction.getFeatures(),
                        pixelTolerance: 10,
                    }),
                );
            }
        </script>
    </body>
</html>

核心原因 #

修改选中要素时，要素的几何变化会触发VectorSource的change事件，默认会导致整个VectorLayer重绘，进而对所有要素执行style function。以下是两种可行的优化方案：

方案1：在VectorLayer的style function中跳过选中要素

选中的要素会由Select交互的style处理，因此可以在VectorLayer的style中判断要素是否被选中，若已选中则直接返回，避免重复执行样式逻辑：

// 获取Select交互的选中要素集合
const selectedFeatures = selecInteraction.getFeatures();

const vectoreLayer = new ol.layer.Vector({
    source: vectorSource,
    style: (feature) => {
        // 若要素已被选中，直接返回（由Select样式覆盖）
        if (selectedFeatures.has(feature)) {
            return;
        }
        console.log('vectorStyle');
        if (feature.getGeometry().getType() === 'LineString') {
            return [
                new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#ff0000',
                    }),
                }),
            ];
        }
    },
});

同时为Modify交互设置自定义样式，避免默认样式干扰：

new ol.interaction.Modify({
    features: selecInteraction.getFeatures(),
    pixelTolerance: 10,
    // 设置Modify的样式，与选中样式保持一致或自定义
    style: (feature) => {
        return [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#ff0000',
                }),
            }),
            new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 5,
                    fill: new ol.style.Fill({
                        color: '#f59e0b',
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#000000',
                        width: 2,
                    }),
                }),
                geometry: function () {
                    const coordinates = feature.getGeometry().getCoordinates();
                    return new ol.geom.MultiPoint(coordinates);
                },
            }),
        ];
    }
}),

方案2：禁用图层的全局重绘触发

通过监听VectorSource的change事件，判断是否仅为单个要素修改导致的变化，若为单个要素变化则手动触发该要素的重绘，而非全图层重绘：

vectorSource.on('change', (event) => {
    const source = event.target;
    // 检查是否是要素修改导致的变化（而非添加/删除要素）
    if (source.getState() === 'ready' && source.getFeatures().length > 0) {
        const modifiedFeature = selectedFeatures.item(0);
        if (modifiedFeature) {
            // 仅重绘修改的要素
            vectoreLayer.changed(modifiedFeature);
            // 阻止默认的全图层重绘
            event.preventDefault();
        }
    }
});

注意：此方法默认适配单个要素修改场景，若存在多选修改需求，需调整逻辑遍历所有选中要素。

效果验证 #

修改后，选中要素并拖动修改时，控制台只会打印选中要素的相关样式日志，未选中要素的vectorStyle不会重复输出。

内容的提问来源于stack exchange，提问作者BinaryHawk