如何将 React-mapbox-gl 约束到它的容器？

Question

我有一张带有 maxBounds 属性设置的地图，地图工作正常，但我们使用的是来自第三方的图块集，它只提供英国的整个地图，所以我想知道是否有可能将地图限制在其容器 div 中，以便不呈现的空白 space 对用户保持隐藏状态？

这是我的设置：

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

下图显示了地图被拖到左上角的情况，因为没有更多的图块可用于渲染，您看到的是空的 space，所以我想将地图限制在用红线标记的容器 div。

Answer 1

您可以使用地图的 maxBounds 属性 - 文档 here

要与 react-map-gl 集成，看起来您必须将其作为 mapOptions object property, not as part of the viewport. As react-map-gl docs explain, the mapOptions prop of an InteractiveMap 继承自 StaticMap mapOptions 道具的一部分。你可以试试这个：

return (
  <ReactMapGL
    {...props}
    mapOptions={{
      maxBounds={[
        [-10.76418, 49.528423],
        [1.9134116, 61.331151],
      ]}
    }}
  />
);

如何将 React-mapbox-gl 约束到它的容器？

How to constrain React-mapbox-gl to its container?

javascript

reactjs

mapbox-gl-js

react-map-gl