Mapbox gl long/lat 超出边界

Question

我正在尝试使用 aws amplify react ui 库在地图上显示一个简单的标记。我能够让地图显示没有问题，但只有在使用不超出范围 [90，-90] 的坐标时才会显示。如果我尝试使用该区域之外的坐标渲染地图，我会得到：

Error: Invalid LngLat latitude value: must be between -90 and 90
at new Ou (maplibre-gl.js?48ec:31:280338)
at Ou.convert (maplibre-gl.js?48ec:31:280974)
at Map.jumpTo (maplibre-gl.js?48ec:35:288561)
at new Map (maplibre-gl.js?48ec:35:318676)
at Mapbox._initialize (mapbox.js?699b:219:1)
at new Mapbox (mapbox.js?699b:131:1)
at eval (map.js?48e9:61:1)

我查看了 react-map-gl api 参考，我发现您可以指定地图的初始边界。当试图将 [90, -90] 范围之外的东西传递给它时，我仍然会遇到同样的错误。我也尝试查找该错误，但无法获得与之相关的任何结果。这是我的组件的样子：

import { MapView } from '@aws-amplify/ui-react';
import 'maplibre-gl/dist/maplibre-gl.css';
import 'maplibre-gl-js-amplify/dist/public/amplify-map.css';
import '@aws-amplify/ui-react/styles.css';
import { Marker, LngLatBounds } from 'react-map-gl';

<MapView
      initialViewState={{
        longitude: location.longitude,
        latitude: location.latitude,
        zoom: 16,
        bounds: [-200, 200],
      }}
      style={{ width: '600px', height: '600px' }}
    >
      <Marker latitude={location.latitude} longitude={location.longitude} />
    </MapView>

作为参考，我要渲染的经/纬度是

{longitude: -79.3783434, latitude: 243.6539116}

。我对 mapbox 的工作不多，但我觉得我遗漏了一些明显的东西，因为边界这么小并没有什么意义。任何帮助将不胜感激，谢谢。

Answer 1

我觉得你的债券概念有点不对。 根据 docs on bounds 和 lnglat：

bounds?: LngLatBoundsLike - 地图的初始边界。如果指定，它将覆盖经度、纬度和缩放选项。默认为空。

LngLatBounds 对象，按 [sw, ne] 顺序排列的 LngLatLike 对象数组，或按 [west, south, east, north] 顺序排列的数字数组。

bounds 设置为矩形，需要提供角点。西南 (sw) 和东北 (ne) 角。

这意味着：

1. 边界是可选的。你可以省略它们，因为你提供了纬度、经度和缩放级别。
2. 如果你想提供边界，它们应该是这些格式之一（注意有 4 个数字，而不仅仅是 2 个）：

   1. [[sw_longitude, sw_latitude], [ne_longitude, ne_latitude]]

      ，或

   2. [sw_longitude, sw_latitude, ne_longitude, ne_latitude]

它们的最小/最大值是：

1. sw_longitude = -180/180
2. sw_latitude = -90/90
3. ne_longitude = -180/180
4. ne_latitude = -90/90

此外，这些被称为归一化经度和纬度。 要标准化您的经度和纬度值，您需要将它们环绕地球。这是一个 snippet 做到这一点。

请注意，对于经度，您只需将 +- 360 添加到该值，直到该值落在 -180 180 范围内。但是，对于纬度，您需要将它绕在杆子上并翻转经度，因为当您穿过杆子时，您开始一个接一个地减去纬度值，并以与旧经度相反的方式结束。 图像here可能使它更清晰地可视化：