小编Ngu*_* Tu的帖子

我正在使用反应传单与传单地图进行交互。现在我想使用一个名为 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(){ …

我正在尝试在反应传单中将鼠标悬停在图层上时显示弹出窗口。我使用 GeoJson 渲染地图上的所有图层，并使用 onEachFeature() 在悬停图层时显示弹出窗口。但是，当我将鼠标移入图层时，弹出窗口没有显示。它仅在单击时显示。这是我的代码和我的地图（图层为蓝色）。

import { MapContainer, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';
import './index.css'
import React, { useEffect, useState } from 'react';
import "leaflet/dist/leaflet.css";
import Header from '../common/header'
import { PixiOverlay } from 'react-leaflet-pixi-overlay';
import * as polygonData from '../../data/tinh.json';
import axios from 'axios'
import * as Request from '../../services';

export default function Home() {
  // const [display, setDisplay]=useState(false);
  // const [options, setOptions]=useState([]);
  // const [search, setSearch]= useState("");

  //function to show popup when hover
  const onEachContry = …