更改 Angular 16+ 中 openlayer 地图中样式图标的不透明度

Question

我需要更改添加到 openlayers 地图的功能中的样式图标（使用最新的 openlayers 版本）。我仅使用单层，因此无法在图层中应用不透明度。我用图标的不同坐标绘制了多个点，现在我需要更改除所选功能之外的图标的不透明度。

下面是我在地图图层中分配样式图标的函数。

const geometry = feature.getGeometry();
if (geometry && geometry.getType() === 'Point') {
return new Style({
      image: new Icon({
        anchor: [0.5, 0.5],
        src: `./assets/icons/ic-${feature.values_.status}.img`,
      }),
    });
}

通过选择交互，我想降低期望选择的其他图标的不透明度。

这是我从地图中选择事件处理程序。

this.map.addInteraction(this.select);
this.select.on('select', function (e) {
if(e.selected.length) {
 const selectmark = e.selected as Feature[];
 mymaplayer.setStyle(feature=> {
   console.log(feature);
 });
}

我计划从图层获取样式并更新它，但我无法执行它。还尝试使用 setStyle 函数设置样式，但也无法实现。 有更简单的方法来执行此操作吗？

Answer 1

使用带有空样式的选择交互，这是一个带有样式函数的矢量图层，用于检查是否选择了任何要素，以及它们是否包含正在设置样式的要素。当选择更改时，在图层上触发更改。

const select = new Select({style: null});

const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: function (feature) {
    const selectedFeatures = select.getFeatures().getArray();
    const opacity =
      selectedFeatures.length === 0 || selectedFeatures.includes(feature)
        ? 1
        : 0.5;
    iconStyle.getImage().setOpacity(opacity);
    return iconStyle;
  },
});

select.on('select', function () {
  vectorLayer.changed();
});

工作示例https://codesandbox.io/s/icon-color-forked-7vx7j2?file=/main.js