Tengo un mapa que se genera en los componentes init que ejecuta un método llamado makeMap() que crea un mapa que se parece a lo siguiente
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, }), }); }Estoy tratando de agregar un control deslizante en la parte frontal que pueda ajustar la opacidad de la capa "this.tiles". Tengo el siguiente html para un control deslizante. para probar ahora estoy tratando de ajustarlo de la siguiente manera.
setOpacity() { this.tiles.setOpacity(0); this.map.render() }el problema es que cuando trato de llamar al método después de crear el mapa, no actualiza la capa solo si lo llamo antes de que esté hecho. Estoy tratando de conectarlo a un control deslizante de la siguiente manera
<input id="opacity-input" type="range" min="0" max="1" step="0.01" value="1" />¿Cómo puedo actualizar la opacidad de la capa cuando el control deslizante cambia de valor? Soy nuevo en angular y openlayers, así que no estoy seguro de cómo crear esta funcionalidad.
Funciona para mí así con reaccionar:
<RangeInput onValueChanged={(value) => handleOpcitry(value)} /> const handleOpcitry = useCallback( (value: number) => { if (!osmLayer) { return; } const opacity = value / 100; console.log(opacity); osmLayer.setOpacity(opacity); }, [osmLayer] );Entrada de rango:
<input type="range" min="0" max="100" value={100} onChange={handleValueChange} ></input>