如何在反应传单中选择一个区域

Question

我正在使用反应传单与传单地图进行交互。现在我想使用一个名为 Leaflet-area-select 的传单插件来选择地图上的一个区域，并获取所选矩形的当前长纬度。但是，它是一个传单插件，不能在反应传单上使用。我怎样才能使用这个插件？或者你知道任何可以从传单地图中选择区域的图书馆吗？非常感谢！

选择区号（leaflet-area-select）：

let map = new L.Map('map', {
  selectArea: true // will enable it by default
});
 
// or
map.selectArea.enable();
 
map.on('areaselected', (e) => {
  console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
});
 
// You can restrict selection area like this:
const bounds = map.getBounds().pad(-0.25); // save current map bounds as restriction area
// check restricted area on start and move
map.selectArea.setValidate((layerPoint) => {
  return bounds.contains(
    this._map.layerPointToLatLng(layerPoint)
  );
});
 
// now switch it off
map.selectArea.setValidate();

我的代码：

export default function Home(){
    return(
        <>
        <Header/>
            <MapContainer center={[10.7743, 106.6669]} zoom={6}>
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          {/* <GeoJSON
          style = {this.countryStyle}
          data={polygonData.features}
          onEachFeature={this.onEachContry}
          
          /> */}
        </MapContainer>
        </>
    )
}

Answer 1

创建您自己的自定义 React-leaflet 组件：

function AreaSelect() {
  const map = useMap();
  console.log(map);

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

    map.selectArea.enable();

    map.on("areaselected", (e) => {
      console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
      L.rectangle(e.bounds, { color: "blue", weight: 1 }).addTo(map);
    });

    // You can restrict selection area like this:
    const bounds = map.getBounds().pad(-0.25); // save current map bounds as restriction area
    // check restricted area on start and move
    map.selectArea.setValidate((layerPoint) => {
      return bounds.contains(this._map.layerPointToLatLng(layerPoint));
    });

    // now switch it off
    map.selectArea.setValidate();
  }, []);

  return null;
}

当组件安装并添加一个矩形时，使用外部库的（leaflet-area-select）代码，然后按 Ctrl + 鼠标左键单击在地图上绘制一个矩形区域。

包含您的自定义新组件作为MapContainer子组件：

<MapContainer center={position} zoom={13} style={{ height: "100vh" }}>
    ...
    <AreaSelect />
  </MapContainer>

演示