打开图层 Angular 如何使用滑块调整不透明度

Question

我有一个在组件 init 上生成的地图，它运行一个名为 makeMap() 的方法，该方法创建一个如下所示的地图

makeMap() {

  var osm = new TileLayer({
    source: new OSM(),
  });

  ...

  this.map = new Map({
    layers: [osm, wktLayer, this.tiles],
    target: 'ol-map',
    view: new View({
      center: proj.fromLonLat(coordinates),
      zoom: 9,
      minZoom: 8.75,
    }),
  });
}

我正在尝试在前端添加一个滑块，可以调整图层“this.tiles”的不透明度。 我有以下用于滑块的 html。 现在进行测试，我正在尝试按如下方式对其进行调整。

  setOpacity() {
    this.tiles.setOpacity(0);
    this.map.render()
  }

问题是，当我在创建地图后尝试调用该方法时，只有当我在创建地图之前调用它时才更新图层。 我试图将它连接到一个滑块如下

      <input
        id="opacity-input"
        type="range"
        min="0"
        max="1"
        step="0.01"
        value="1"
      />

当滑块更改值时，如何更新图层的不透明度？ 我是 angular 和 openlayers 的新手，所以我不确定如何创建这个功能。

Answer 1

像这样对我有用，反应：

<RangeInput onValueChanged={(value) => handleOpcitry(value)} />

const handleOpcitry = useCallback(
    (value: number) => {
      if (!osmLayer) {
        return;
      }

      const opacity = value / 100;

      console.log(opacity);

      osmLayer.setOpacity(opacity);
    },
    [osmLayer]
  );

范围输入：

<input
        type="range"
        min="0"
        max="100"
        value={100}
        onChange={handleValueChange}
></input>