如何并排更改传单或传单拆分图中的图块层

Question

根据这个 codesandbox 我试图通过改变状态来改变我的地图的左层或右层，但是当我改变它时它会改变整个地图图块。任何想法建议将不胜感激。

Answer 1

我认为您的代码过于复杂，因此我将提供一个简单的示例，您可以根据自己的代码进行调整。

您只需执行两个步骤即可实现您的目标。

页面登陆时并排存储传单实例。
用它来调用 setLeftLayers 顺便说一句，它工作正常

在 useEffect 上执行步骤 1。在您实现步骤 2 的事件处理程序上。

function App() {
  const position = [51.505, -0.09];
  const [map, setMap] = useState(null);
  const [sideBySide, setSidebySide] = useState(null);

  useEffect(() => {
    if (!map) return;

    var 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);

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

  const handleClick = () => {
    sideBySide.setLeftLayers(
      L.tileLayer("https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map)
    );
  };

  return (
    <>
      <MapContainer
        center={position}
        zoom={13}
        style={{ height: "90vh" }}
        whenCreated={setMap}
      ></MapContainer>
      <button onClick={handleClick}>Change left tiles</button>
    </>
  );
}

Demo

如何并排更改传单或传单拆分图中的图块层

How to change tile layers in leftlet sidebyside or leaflet splitmap

leaflet

reactjs

react-leaflet

use-effect

react-leaflet-v3