将地图范围拟合到栅格图层

问题描述

我已经遍历了所有关于Mapbox的fitbounds教程，但仍然无法弄清楚如何将地图重新​​聚焦在给定的栅格图层上.我有一个菜单，可以切换许多较旧的地图，并希望每次翻新地图.

I've ran across all fitbounds tutorials for Mapbox and still cannot figure out how refocus my map on a given raster layer. I have a menu that toggles a number of older maps and would like to refit the map at each turn.

这是我到目前为止所拥有的. mapnumber是我的栅格地图的字符串.

Here's what I have so far. mapnumber is the string for my raster map.

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

边界是存在的，我只是不能在它们上使用fitbounds.这是错误.

The bounds are there, I just cannot use fitbounds on them. This is the error.

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>]

推荐答案

您似乎错误地使用了mapboxgl.LngLatBounds.您将需要传入两个LngLat实例，而不是两个坐标. API文档的示例为西南地区创建了一个点和边界框的东北角:

It looks like you're using mapboxgl.LngLatBounds incorrectly. You'll need to pass in two LngLat instances, rather than two coordinates. The API docs have an example that creates a point for the southwest and northeast corners of your bounding box:

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()与边界框一起使用

Then you can use map.fitBounds() with the bounding box

map.fitBounds(llb);

更新:回答后续问题

您可以使用 map.getSource()方法 .传递栅格图层的源ID，这将返回具有bounds属性的对象.使用此bounds属性传递到map.fitBounds().

You can use the map.getSource() method. Pass in the source ID of your raster layer and that will return an object that has a bounds property. Use this bounds property to pass into map.fitBounds().

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

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

这篇关于将地图范围拟合到栅格图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！