mapbox : 如何在地图上以自定义图标的方式显示所有指定的坐标。

Question

我有一个动态坐标数组。我想调整Mapbox，在地图上以自定义图标的方式显示数组内的所有坐标。

我尝试了Mapbox的flyTo、JumpTo、ZoomTo等功能，但它只缩放到一个坐标值，我想在地图上一次性显示出数组内的所有坐标。

例如：如果我的数组有10个坐标，Mapbox应该调整为在地图上显示所有的10个坐标作为自定义图标，如果我的数组有100个坐标，那么我想在地图上看到所有100个自定义图标。

我真的很感激你的帮助。

Answer 1

这个例子 中的Mapbox GL JS文档中展示了如何将地图适合于一个 LineString. 正如在链接示例的内联注释中进一步详细解释的那样，这种同样的使用 LatLngBounds#extend 办法 来扩展边界以包括给定的 LngLatLike 可以用来将数组中的每个坐标对用 extend 方法。这样做的效果是将数组中的每个点都包含在 bounds 传给 Map#fitBounds它将平移和缩放地图，以包含你的数组中所有点的可见区域。

也就是说，你的代码会像这样。

var coordinatesArray = [/* an array with your coordinates to display */];

var bounds = coordinatesArray.reduce(function(bounds, coord) {
  return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinatesArrray[0], coordinatesArrray[0]));

map.fitBounds(bounds, { padding: 20 });