使用 useRef 在 React-Leaflet TileLayer 上更改 css 过滤器 属性

Question

我正在尝试使用按钮或滑块更改 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 上的过滤器样式 属性。

我有 Code Sandbox setup here 到目前为止我尝试过的东西。

我首先将 MapContainer 组件包装在 div 中，然后使用 React's useRef hook 附加一个 ref，如下所示：

const tileRef = useRef(null);

<div ref={tileRef}>
    <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
    >
        <TileLayer
            attribution='&copy; <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>

然后，我设置了一个 useEffect 来监视 brightnessLevel 状态挂钩。在 useEffect 中，我使用 tileRef 访问 .leaflet-tile css class 的 style.filter 属性。它正在访问它并在 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]);

我不太确定为什么我可以访问 属性，并且 console.log 好像它正在更新，但显示中没有任何变化。有什么想法吗？

版本：

• React-传单：3.1.0
• 传单：1.7.1
• 反应：17.0.1

Answer 1

您应该将 tileRef 分配给 TileLayer 而不是父级 MapContainer's div。使用

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='&copy; <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}
      />
    </>

Demo