[英]Change css filter property on React-Leaflet TileLayer with useRef
I am trying to change the filter style property on the React-Leaflet TileLayer .我正在尝试更改React-Leaflet TileLayer上的过滤器样式属性。 Basically, what I want to do is to dim the tile layer without dimming/altering the markers by adjusting the filter style property on the.leaflet-tile class using a button or slider.基本上,我想做的是通过使用按钮或 slider 调整 the.leaflet-tile class 上的过滤器样式属性来使平铺层变暗而不使标记变暗/更改。
I have a Code Sandbox setup here with what I have tried so far.我在这里有一个代码沙箱设置,到目前为止我已经尝试过。
I started by wrapping the MapContainer component in a div and attaching a ref with React's useRef hook , like this:我首先将 MapContainer 组件包装在一个 div 中,并使用React 的useRef hook附加一个 ref,如下所示:
const tileRef = useRef(null);
<div ref={tileRef}>
<MapContainer
center={[51.505, -0.09]}
zoom={13}
scrollWheelZoom={false}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
Then, I have set up a useEffect that watches a brightnessLevel state hook.然后,我设置了一个 useEffect 来监视 BrightnessLevel state 挂钩。 Inside the useEffect, I am using the tileRef to access the style.filter property of the.leaflet-tile css class.在 useEffect 中,我使用 tileRef 来访问 .leaflet-tile css class 的 style.filter 属性。 It is accessing it and is showing it in console.log, but nothing is changing in the display:它正在访问它并在 console.log 中显示它,但显示中没有任何变化:
const [brightLevel, setBrightLevel] = useState(100);
useEffect(() => {
if (tileRef.current) {
if (tileRef.current.querySelector(".leaflet-tile")) {
if (tileRef.current.querySelector(".leaflet-tile").style) {
console.log(tileRef.current.querySelector(".leaflet-tile").style);
if (
tileRef.current.querySelector(".leaflet-tile").style.filter ||
tileRef.current.querySelector(".leaflet-tile").style.filter === ""
) {
console.log("Check Four pass");
console.log(tileRef.current.querySelector(".leaflet-tile").style.filter);
tileRef.current.querySelector(".leaflet-tile").style.filter = `brightness(${parseInt(brightLevel)}%)`;
}
}
}
} else {
console.log("No Ref");
}
}, [brightLevel]);
I'm not really sure why I can access the property, and have it console.log as if it is updating, but nothing in the display is changing.我不确定为什么我可以访问该属性,并让它 console.log 就好像它正在更新一样,但显示中没有任何变化。 Any ideas?有任何想法吗?
Versions:版本:
You should assign tileRef
to TileLayer
and not the parent MapContainer's
div
.您应该将tileRef
分配给TileLayer
而不是父MapContainer's
div
。 Use利用
tileRef's.getContainer().style.setProperty
to change a css property in combination with an effect. tileRef's.getContainer().style.setProperty
结合效果更改 css 属性。
const tileRef = useRef();
const [map, setMap] = useState(null);
const [filter, setFilter] = useState(100);
useEffect(() => {
if (map) {
tileRef.current
.getContainer()
.style.setProperty("filter", `brightness(${filter}%)`);
}
}, [map, filter]);
<>
<MapContainer
center={[51.505, -0.09]}
zoom={13}
style={{ height: "90vh" }}
whenReady={setMap}
>
<TileLayer
ref={tileRef}
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
Change filter property
<input
type="text"
name="name"
onChange={(e) => setFilter(e.target.value)}
value={filter}
/>
</>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.