Openlayers 6：选中要素后实现样式持久化修改

问题描述 #

使用OpenLayers 6绘制多个Feature后，选中单个Feature修改样式时，修改在选中状态下生效，但取消选中后要素会恢复默认样式，需要实现修改后的样式持久保留。

问题原因 #

1. 所有要素共享同一个mainStyle实例，修改单个要素的样式会影响其他要素，且取消选中后要素会回到共享的默认样式模板
2. 使用私有属性array_[0]获取选中要素，不符合OpenLayers API规范，存在兼容性风险
3. Select交互的样式为固定模板，未关联要素自身的自定义样式，导致选中状态无法保留之前修改的属性

解决方案 #

1. 为每个绘制的要素创建独立的样式实例，确保样式可单独修改且持久化
2. 使用官方API方法getFeatures().item(0)获取选中要素，避免依赖私有属性
3. 调整Select交互的样式逻辑，基于要素当前样式生成选中状态样式，保留自定义属性（如线宽），仅添加选中标识样式

修改后的完整代码 #

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"
      type="text/css"
    />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <style>
      html,
      body,
      .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <input type="number" id="number" />
    <script>
      // 生成独立样式的工具函数
      const createMainStyle = () => {
        return [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: "#000",
              width: 2,
            }),
          }),
        ];
      };

      // 基于要素当前样式生成选中样式
      const getSelectStyle = (feature) => {
        // 复制要素当前的基础样式
        const baseStyle = feature.getStyle()[0].clone();
        // 添加选中状态的节点样式
        const pointStyle = new ol.style.Style({
          image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
              color: "#f59e0b",
            }),
            stroke: new ol.style.Stroke({
              color: "#000",
              width: 2,
            }),
          }),
          geometry: function (feature) {
            const coordinates = feature.getGeometry().getCoordinates();
            return new ol.geom.MultiPoint(coordinates);
          },
        });
        return [baseStyle, pointStyle];
      };

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM(),
      });

      var source = new ol.source.Vector({ wrapX: false });

      var vector = new ol.layer.Vector({
        source: source,
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: "map",
        view: new ol.View({
          center: [-11000000, 4600000],
          zoom: 4,
        }),
      });

      var draw = new ol.interaction.Draw({
        source: source,
        condition: ol.events.condition.altKeyOnly,
        type: "LineString",
        style: function (feature) {
          if (feature.getGeometry().getType() === "LineString") {
            // 为每个要素创建独立样式
            feature.setStyle(createMainStyle());
          }
        },
      });
      map.addInteraction(draw);

      const select = new ol.interaction.Select({
        layers: [vector],
        hitTolerance: 10,
        // 动态生成选中样式
        style: getSelectStyle,
      });
      map.addInteraction(select);

      document.getElementById("number").addEventListener("change", (event) => {
        let width = event.target.value;
        // 使用官方API获取选中要素
        let selectedFeature = select.getFeatures().item(0);
        if (selectedFeature) {
          // 修改要素自身的样式属性
          selectedFeature.getStyle()[0].getStroke().setWidth(width);
          selectedFeature.changed();
          // 更新选中样式（可选，确保选中状态下也同步显示修改）
          select.getFeatures().forEach(feature => {
            select.getStyleFunction()(feature);
          });
        }
      });
    </script>
  </body>
</html>

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