React-Leaflet: Как прослушать события щелчка флажка LayersControl.Overlay? - PullRequest
Новая
       4

React-Leaflet: Как прослушать события щелчка флажка LayersControl.Overlay?

0 голосов
/ 26 марта 2020

Я динамически отрисовываю некоторые оверлейные элементы управления и хочу привязать прослушиватель события щелчка к флажку каждого элемента управления. Однако в настоящее время, похоже, нет способа предоставить ссылку React для LayersControl или обработчик onClick для LayersControl.Overlay. Есть ли лучший подход для достижения этой функциональности?

Пример : 

<LayersControl>
  {overlays.map(el => (
    <LayersControl.Overlay
      checked={el.checked}
      key={el.id}
      name={el.label}
    >
      <GeoJsonLayer {...el} />
    </LayersControl.Overlay>
  ))}
</LayersControl>

1 Ответ

1 голос
/ 26 марта 2020

Используйте ссылку для получения экземпляра map и последующего прослушивания события baselayerchange. Затем, используя имя вашего слоя или URL, вы можете реализовать желаемое поведение. 

const mapRef = useRef();

  useEffect(() => {
    const map = mapRef.current.leafletElement;
    map.on("baselayerchange", e => {
      //do whatever
      console.log(e.name);
      switch (e.name) {
        case "OpenStreetMap.Mapnik":
          flyToParis(map);
          break;
        case "OpenStreetMap.BlackAndWhite":
          console.log("do something else");
          break;
        default:
          return;
      }
    });
  }, []);

  const flyToParis = map => {
    console.log(map);
    map.panTo([48.864716, 2.349014]);
  };

Демо

...