如何在左侧并排或传单拆分图中更改平铺层 [英] How to change tile layers in leftlet sidebyside or leaflet splitmap

问题描述

根据此 codesandbox 我试图通过使状态发生变化来更改地图的左侧或右侧，但是当我更改地图时，它会更改整个地图图块.任何想法建议将不胜感激.

according to this codesandbox I was trying to change the left or right layer of my map by mutating the state but it change the whole map tile when I'm changing it. Any idea suggestion would be greatly appreciated.

推荐答案

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

Your code is unreasonably complex in my opinion so I will provide a simple example and you can adjust it to your code.

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

You need to do only two steps to achieve your goal.

1. 页面登陆时并排存储传单实例.
2. 使用它来调用 setLeftLayers ，该方法可以正常工作

1. Store leaflet-side-by-side instance when the page lands.
2. use it to call setLeftLayers which works fine by the way

在useEffect上，您将执行步骤1.在事件处理程序上，执行步骤2.

On useEffect you implement step 1. On the event handler you implement step 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>
    </>
  );
}

查看全文