打開圖層 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>