[英]Open layers Angular how to adjust opacity with a slider
I have a map thats generated on the components init that runs a method called makeMap() that creates a map that looks like follows我有一个在组件 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,
}),
});
}
I am trying to add a slider on the front end that can adjust the opacity of the layer "this.tiles".我正在尝试在前端添加一个滑块,可以调整图层“this.tiles”的不透明度。 I have the following html for a slider.
我有以下用于滑块的 html。 for testing right now im trying to adjust it as follows.
现在进行测试,我正在尝试按如下方式对其进行调整。
setOpacity() {
this.tiles.setOpacity(0);
this.map.render()
}
the issue is when I try to call the method after the map is created it doesnt update the layer only if I call it before its made.问题是,当我在创建地图后尝试调用该方法时,只有当我在创建地图之前调用它时才更新图层。 Im trying to connect it to a slider as follows
我试图将它连接到一个滑块如下
<input
id="opacity-input"
type="range"
min="0"
max="1"
step="0.01"
value="1"
/>
How can I update the opacity of the layer when the slider changes value?当滑块更改值时,如何更新图层的不透明度? I am new to angular and openlayers so im not sure how to create this functionality.
我是 angular 和 openlayers 的新手,所以我不确定如何创建这个功能。
Works for me like this with 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]
);
Range Input:范围输入:
<input
type="range"
min="0"
max="100"
value={100}
onChange={handleValueChange}
></input>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.