开发者问题收集

如何将 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