0

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

4

1 回答 1

1

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

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

  1. 当页面登陆时存储传单并排实例。
  2. 顺便说一句，用它来调用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>
    </>
  );
}

演示

于 2021-03-06T17:34:20.543 回答