将地图边界拟合到栅格图层

Question

我已经运行学习了 Mapbox 的所有 fitbounds 教程，但仍然无法弄清楚如何将我的地图重新聚焦在给定的栅格图层上。我有一个菜单可以切换一些旧地图，并且想在每次转弯时重新调整地图。

这是我目前所拥有的。 mapnumber 是我的栅格地图的字符串。

      var coordinates = map.getBounds(mapnumber);
      var bounds = new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]);
      map.fitBounds({bounds});

界限就在那里，我只是不能对它们使用 fitbounds。这是错误。

lng_lat.js:97 Uncaught Error: `LngLatLike` argument must be specified 
as a LngLat instance, an object {lng: <lng>, lat: <lat>}, or an array 
of [<lng>, <lat>]

Answer 1

Uncaught Error: LngLatLike argument must be specified as a LngLat instance

您似乎没有正确使用 mapboxgl.LngLatBounds。您需要传入两个 LngLat 实例，而不是两个坐标。 API docs 有一个为边界框的西南角和东北角创建点的示例：

var sw = new mapboxgl.LngLat(-73.9876, 40.7661);
var ne = new mapboxgl.LngLat(-73.9397, 40.8002);
var llb = new mapboxgl.LngLatBounds(sw, ne);

然后你可以使用map.fitBounds()和边界框

map.fitBounds(llb);

更新：回答跟进问题

how can I extract the two sets (sw and ne) from the raster?

可以使用map.getSource() method。传入栅格图层的源 ID，这将 return 一个具有 bounds 属性的对象。使用此边界属性传递到 map.fitBounds().

var bounds = map.getSource('mapbox://username.source-id').bounds;
map.fitBounds(bounds);

这是一个工作示例：https://codepen.io/mapsam/pen/RZvyBQ

将地图边界拟合到栅格图层

Fitting map bounds to raster layer

javascript

mapbox