如何在react传单中选择区域

Question

我正在使用react传单与传单地图进行交互。现在我想使用一个名为传单区域选择的传单插件来选择地图上的一个区域，并获得所选矩形的当前长纬度。然而，它是一个传单插件，不能在react传单上使用。我如何使用这个插件？或者你知道有哪些图书馆可以从传单地图中选择区域吗？非常感谢！

选择区域代码(传单区域选择(：

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

创建您自己的自定义反应传单组件：

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;
}

当comp安装时，使用外部库的(传单区域选择(代码，并在地图上单击Ctrl+鼠标左键绘制矩形区域后添加矩形。

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

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

演示