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

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

使用react:

<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>