Блог

Я пытаюсь изменить свойство стиля фильтра в табличном слое React-Leaflet . По сути, то, что я хочу сделать, это затемнить слой плитки без затемнения / изменения маркеров, настроив свойство стиля фильтра в классе .leaflet-tile с помощью кнопки или ползунка.

У меня есть настройка песочницы кода здесь с тем, что я пробовал до сих пор.

Я начал с того, что обернул компонент MapContainer в div и прикрепил ссылку с помощью крючка useRef от React, вот так:

 const tileRef = useRef(null);

<div ref={tileRef}>
    <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
    >
        <TileLayer
            attribution='amp;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, который отслеживает перехват состояния уровня яркости. Внутри useEffect я использую tileRef для доступа к стилю.свойство фильтра css-класса .leaflet-tile. Он обращается к нему и показывает его в 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]);
 

Я не совсем понимаю, почему я могу получить доступ к этому свойству и использовать его консоль.регистрируйте, как будто он обновляется, но ничего на дисплее не меняется. Есть какие-нибудь идеи?

Версии:

• Реагирующая брошюра: 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='amp;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}
      />
    </>
 

ДЕМОНСТРАЦИЯ