mapbox：如何一次将所有指定坐标显示为 map 上的自定义图标

Question

我有一个动态的坐标数组。 我想调整 Mapbox 以将数组中的所有坐标显示为 map 上的自定义图标。

我尝试过 Mapbox 的 flyTo、JumpTo、ZoomTo 功能。 但它只缩放到一个坐标值。 我想一次在 Map 上显示数组内的所有坐标。

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

我真的很感激帮助。

Answer 1

我们的 Mapbox GL JS 文档中的这个示例展示了如何将 map 拟合到LineString的边界。 正如链接示例的内联注释中进一步详细解释的那样，使用LatLngBounds#extend方法扩展边界以包含给定LngLatLike的相同技术可用于使用extend方法包装数组中的每个坐标对。 这将具有将数组中的每个点包含在传递给Map#fitBounds的bounds中的效果，这将平移和缩放 map 以包含可见区域，包括数组中的所有点。

也就是说，您的代码将类似于：

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 });