给leaflet地图局部做拖拽限制

地图是先知道某市这个区域，超过这个区域的一律不让进行鼠标拖拽，因为还有缩放，这里也给进行了缩小处理，放大不做限制。

const [map, setMap] = useState<any>();
const TiledMapLayer = useMemo(() => tiledMapLayer(MapUrl), []);
const boundsHandler = debounce(() => {
    // 给地图区域做限制的上下左右四部分
    const bounds = L.latLngBounds([
      [22.285236, 113.464256], // 下
      [22.553914, 113.331012], // 上
      [22.420586, 113.331012], // 左
      [22.451933, 113.27746], // 右
    ]);
    map.setMaxBounds(bounds);
    map.panInsideBounds(bounds, { animate: false });
}, 1000);
useEffect(() => {
    if (map) {
     // 注：drag是拖动事件，这里也可以有move，click等
      map.on('drag', boundsHandler);
      map.setView(opt.center, opt.zoom);
    }
}, [opt, map]);

<MapContainer
    whenCreated={setMap}
    crs={CRS_4490}
    attributionControl={false}
    // zoomDelta={0.4}
    minZoom={9}
    // zoomSnap={0.1}
    center={opt.center}
    zoom={opt.zoom}
    layers={TiledMapLayer}
    style={{ height, backgroundColor: '#fff', border: '1px dashed #e0e0e0' }}
>
    <GeoJSON data={GeoData as any} />
</MapContainer>

参考：https://qa.1r1g.com/sf/ask/1801907271/
参考演示地址：http://jsfiddle.net/asleepwalker/exqar2w4/
注：关于中山这个区域的上下左右的坐标是在“高德地图 —— 在哪儿”，然后在network中获取给接口传递的参数得到的