如何将 React-mapbox-gl 限制在其容器中?
2021-06-29
1561
我有一张带有
maxBounds
属性设置的地图,该地图工作正常,但我们使用的是第三方的图块集,该图块集仅提供英国的整个地图,因此我想知道是否有可能将地图限制在其容器
div
中,以便不呈现的空白处对用户保持隐藏?
这是我的设置:
const [viewport, setViewport] = useState({
latitude: 53.55,
longitude: -2.39,
width: '100%',
height: '450px',
zoom: zoom,
maxBounds: [
[-10.76418, 49.528423],
[1.9134116, 61.331151],
],
});
return (
<ReactMapGL
{...viewport}
onViewportChange={(newViewport) => {
setViewport({ ...newViewport })
}}
fitBounds={bounds}
center={centre}
mapStyle={style}
ref={mapRef}
>
{* My Markers logic... *}
</ReactMapGL>
);
下图显示地图被拖到左上角,由于没有更多可用于渲染的图块,您会看到一个空白区域,因此我想将地图限制在标有红线的容器 div 中。
1个回答
您可以使用地图的
maxBounds
属性 - 文档
此处
要与 react-map-gl 集成,您似乎必须将其作为
mapOptions
对象属性
的一部分包含在内,而不是作为视口的一部分。正如 react-map-gl 文档所解释的那样,InteractiveMap 的
mapOptions 属性
继承自 StaticMap 的 mapOptions 属性。您可以尝试这样做:
return (
<ReactMapGL
{...props}
mapOptions={{
maxBounds={[
[-10.76418, 49.528423],
[1.9134116, 61.331151],
]}
}}
/>
);
Seth Lutske
2021-06-29