OpenLayers选中要素置前异常：如何实现单选且正常前置？

问题需求 #

在OpenLayers中，选中方形矢量要素时需将其置于图层顶层，避免选中要素的边缘被右侧要素遮挡（效果参考：选中第一个方形时，其边缘完整显示不被右侧方形遮挡）。

原方案问题 #

尝试通过移除并重新添加选中要素来实现置顶：

const tmp = e.selected[0].clone();
vectorLayer.getSource().removeFeature(e.selected[0]);
vectorLayer.getSource().addFeature(tmp);

首次选中时有效，但第二次选中其他要素时，前一个选中的要素无法恢复未选中状态，出现两个要素看似被选中的异常效果。

问题原因 #

克隆选中要素并重新添加后，原选中的要素已被移除，Select交互维护的选中集合里仍是旧要素的引用，而旧要素已不在数据源中，导致无法对其执行取消选中的操作，视觉上残留选中样式。

解决方案 #

不需要克隆要素，直接对原要素执行「移除再添加」操作即可——这样Select交互的引用始终是同一个要素，切换选中时能正常取消前一个要素的选中状态。

修改后的select事件处理函数：

selectSingleClick.on("select", function (e) {
  if (e.selected.length > 0) {
    const selectedFeature = e.selected[0];
    // 移除原要素再添加，实现置顶
    vectorLayer.getSource().removeFeature(selectedFeature);
    vectorLayer.getSource().addFeature(selectedFeature);
  }
});

另外，原selectStyle函数存在潜在问题：所有选中要素共享同一个Style实例，若后续扩展多选场景，修改颜色会影响所有选中要素。建议改为每次返回新的Style实例：

function selectStyle(feature) {
  const color = feature.get("COLOR") || "hsla(270, 50%, 50%, .1)";
  return new ol.style.Style({
    fill: new ol.style.Fill({
      color: color
    }),
    stroke: new ol.style.Stroke({
      color: "hsla(270, 50%, 50%, 1)",
      width: 5
    })
  });
}

修改后的完整代码 #

JavaScript #

const squares = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [40, 20],
            [40, 30],
            [50, 30],
            [50, 20]
          ]
        ]
      }
    },
    {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [50, 20],
            [50, 30],
            [60, 30],
            [60, 20]
          ]
        ]
      }
    },
    {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [60, 20],
            [60, 30],
            [70, 30],
            [70, 20]
          ]
        ]
      }
    }
  ]
};

const styles = {
  Polygon: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: "hsla(0, 50%, 100%, 1.0)",
      width: 5
    }),
    fill: new ol.style.Fill({
      color: "hsla(0, 50%, 50%, 0.3)"
    })
  })
};

const styleFunction = function (feature) {
  const featureType = feature.getGeometry().getType();
  return styles[featureType];
};

const vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON({
    featureProjection: "EPSG:4326"
  }).readFeatures(squares)
});

const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: styleFunction
});

const map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [60, 20],
    zoom: 5
  })
});

function selectStyle(feature) {
  const color = feature.get("COLOR") || "hsla(270, 50%, 50%, .1)";
  return new ol.style.Style({
    fill: new ol.style.Fill({
      color: color
    }),
    stroke: new ol.style.Stroke({
      color: "hsla(270, 50%, 50%, 1)",
      width: 5
    })
  });
}

const selectSingleClick = new ol.interaction.Select({ style: selectStyle });

selectSingleClick.on("select", function (e) {
  if (e.selected.length > 0) {
    const selectedFeature = e.selected[0];
    vectorLayer.getSource().removeFeature(selectedFeature);
    vectorLayer.getSource().addFeature(selectedFeature);
  }
});

map.addInteraction(selectSingleClick);

CSS #

#map {
  height: 450px;
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.1.0/ol.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.1.0/dist/ol.min.js"></script>

<div id="map"></div>

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