当地图被拖动时，地图周围的灰色区域
我已经实现了一个离线传单地图与反应。当地图被拖来拖去时，会出现灰色区域。为了避免在右边和左边的灰色区域，我在我的<TileLayer>中设置了<TileLayer>，所以我有一个连续的水平地图。这一部分的代码如下：
<TileLayer url={offlineURL} attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' **noWrap={false}** ref={map => {this.map = map; }}/>
然而，在两极附近有灰色区域(顶部和底部)。我知道我有一个地球的二维表示法，所以在技术上不应该在两极附近有连续的流动，但是我不想要灰色区域。相反，我希望以编程方式移动地图或设置一些边界，以避免显示灰色区域。
我还为minZoom设置了MapContainer，如下所示，这也没有解决这个问题。这是有意义的，因为它只设置最大的缩放能力的地图。
<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
回答 1
Stack Overflow用户
发布于 2021-12-21 08:51:34
您可以使用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]);https://stackoverflow.com/questions/70428410
复制相似问题
腾讯云开发者
