並排反應傳單

Question

我想並排顯示兩個平鋪層，就像傳單的並排插件（ https://github.com/digidem/leaflet-side-by-side ）。

但是，我不確定如何通過反應來做到這一點。 有沒有辦法在反應中使用上述插件？ 您對如何完成此功能還有其他建議嗎？

Answer 1

只需在導入插件后創建一個組件並在useEffect使用本機傳單代碼useEffect 。

import "leaflet-side-by-side";
...

const Map = () => {
  useEffect(() => {
    const map = L.map("map").setView([51.505, -0.09], 13);

    const osmLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var stamenLayer = L.tileLayer(
      "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png",
      {
        attribution:
          'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
          '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
          "Map data {attribution.OpenStreetMap}",
        minZoom: 1,
        maxZoom: 16
      }
    ).addTo(map);

    L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
  }, []);

  return <div id="map" />;
};

演示