如何使用 getBounds() 获取带有 react-leaflet 的拾取地图？

Question

如何使用 react-leaflet.

获取表示地图上可见的 4 个末端的 4 个坐标

我想用contains()函数来return对传递的坐标为真或假，如果为真则表示它在[=13中建立的范围内=]，如果为假则在外面。

只是用 leaflet 纯 JavaScript 我知道如何使用这个功能。但是我正在开发一个 React Web 应用程序，我正在使用 react-leaflet 库并且需要使用这个函数。

提前感谢您的帮助。

的代码

import React from "react";
import { Map, TileLayer } from "react-leaflet";

import "./styles.css";

const App = () => {
  const center = [51.505, -0.09];

  const [map, setMap] = React.useState(null);

  React.useEffect(() => {
    if (map) {
      const contains = map.getBounds().contains(center);
      console.log("contains:: ", contains);
    }
  }, [center, map]);

  return (
    <Map
      ref={setMap}
      style={{ width: "100%", height: "100vh" }}
      center={center}
      zoom={13}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
    </Map>
  );
};

export default App;

Answer 1

您需要获取地图的参考。然后就可以访问ref的.leafletElement属性，也就是map实例：

const App = ({ center }) => {
  const mapRef = useRef();

  React.useEffect(() => {
    if (mapRef) {
      const contains = mapRef.leafletElement.getBounds().contains(center);
    }
  }, [center]);

  return (
    <Map 
      ref={mapRef}
      {...otherProps}
    >
      <TileLayer {...props} />
    </Map>
  );
};

Working codesandbox

react-leaflet v4

的现代答案

您需要对地图的引用，以便您可以调用 L.map.getBounds() 之类的东西。 react-leaflet 自 react-leaflet v3 以来不再使用 .leafletElement 属性。这是 v4 答案：

const App = ({ center }) => {
  const [map, setMap] = useState(null)

  React.useEffect(() => {
    if (map) {
      const contains = map.getBounds().contains(center);
    }
  }, [center]);

  return (
    <Map 
      ref={setMap}
      {...otherProps}
    >
      <TileLayer {...props} />
    </Map>
  );
};

文档中有一些示例，说明如何获取底层 L.map 实例作为引用并使用它，此处：https://react-leaflet.js.org/docs/example-external-state/.

如何使用 getBounds() 获取带有 react-leaflet 的拾取地图？

How to use getBounds() to get pick up map ends with react-leaflet?

javascript

reactjs

leaflet

react-leaflet

Working codesandbox

react-leaflet v4