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

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

我有一个带有 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线。

解决方法

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

要与 react-map-gl 集成，您似乎必须将其作为 mapOptions object property 的一部分，而不是视口的一部分。正如 react-map-gl 文档所解释的， mapOptions prop of an InteractiveMap 继承自 StaticMap mapOptions 道具。你可以试试这个：

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