如何 select React 传单中的一个区域

Question

我正在使用 React 传单与传单地图进行交互。现在我想使用一个名为 leaflet-area-select 的传单插件到 select 地图上的一个区域并获取矩形 selected 的当前长纬度。但是，它是一个传单插件，不能用于 React 传单。我怎样才能使用这个插件？或者您知道哪些图书馆可以 select 传单地图中的区域吗？非常感谢！

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)代码在comp挂载时添加一个矩形，Ctrl+鼠标左键在地图上绘制一个矩形区域后。

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

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

Demo

如何 select React 传单中的一个区域

How to select an area in react leaflet

javascript

leaflet

reactjs

react-leaflet