拖动地图时地图周围的灰色区域

Question

我已经用 React 实现了一个离线传单地图。当地图被拖来拖去时，会出现灰色区域。为了避免左右出现灰色区域，我在我的 <TileLayer> 中设置了 noWrap={false}，因此我有一个水平连续的地图。这部分的代码如下所示：

<TileLayer url={offlineURL} attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' **noWrap={false}** ref={map => {this.map = map; }}/>

但是，在两极附近（顶部和底部）存在灰色区域。我知道我有地球的 2D 表示，因此从技术上讲，两极附近应该没有连续流，但我不想要灰色区域。相反，我想以编程方式移动地图或设置一些边界以不显示灰色区域。

我还为 MapContainer 设置了 minZoom，如下所示，但这也没有解决问题。这是有道理的，因为它只设置了地图的最大缩小能力。

<MapContainer center={[0,0]} zoom={2} maxZoom={9} minZoom={2}>

我附上了一张图片来展示我在说什么image showing gray areas past the poles

我已经搜索过这个问题的解决方案，但没有找到。任何帮助将不胜感激。谢谢！

编辑：

Christopher 的回答非常有帮助，并为我指明了正确的方向，但是我的实现是基于 class 的，因此我不得不对其进行稍微修改。这是我的代码现在的样子：

const worldBounds = new L.LatLngBounds( new L.LatLng(-88, -180), new L.LatLng(88, 180));


<MapContainer center={[0,0]} zoom={2} maxZoom={9} minZoom={2} maxBounds={worldBounds} maxBoundsViscosity={1}>
    <TileLayer url={mapURL}/>           
</MapContainer>

我还参考了以下link：https://github.com/Leaflet/Leaflet/blob/v1.0.0/debug/map/max-bounds-bouncy.html

Answer 1

您可以使用 panInsideBounds 将其捕捉回 drag 事件处理程序中的世界边界。

useEffect(() => {
    const leafletMap = mapRef.current.leafletElement;
    const worldBounds = new LatLngBounds( new LatLng(-88, -180), new LatLng(88, 180));

    leafletMap.on('drag', () => {
        leafletMap.panInsideBounds(worldBounds, { animate: false });
    });   

}, [mapRef]);

拖动地图时地图周围的灰色区域

Gray areas around the map when the map is dragged

maps

leaflet

react-leaflet