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

Question

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

<TileLayer url={offlineURL} attribution='&copy; <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}>

我附上了一张图片来展示我所说的图片，显示了经过极点的灰色区域

我一直在寻找解决方案，但找不到任何解决方案。任何帮助都将不胜感激。谢谢

编辑：

Christopher的回答非常有帮助，为我指明了正确的方向，但我的实现是基于类的，所以我不得不稍微修改一下。以下是我的代码现在的样子：

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>

我还提到了以下链接：https://github.com/Leaflet/Leaflet/blob/v1.0.0/debug/map/max-bounds-bouncy.html

Answer 1

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

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]);