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

如何解决使用 useRef 更改 React-Leaflet TileLayer 上的 css 过滤器属性

我正在尝试更改 React-Leaflet TileLayer 上的过滤器样式属性。基本上，我想要做的是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 附加一个引用，如下所示：

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 来监视一个 BrightLevel 状态钩子。在 useEffect 中，我使用 tileRef 来访问 .leaflet-tile css 类的 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，就好像它正在更新一样，但显示内容没有任何变化。有什么想法吗？

版本：

• 反应传单：3.1.0
• 传单：1.7.1
• 反应：17.0.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