地图框 :如何一次在地图上将所有指定的坐标显示为自定义图标

Question

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

我已经尝试了Mapbox的flyTo，JumpTo，ZoomTo功能。 但它仅缩放到单个坐标值。 我想一次在地图上显示数组中的所有坐标。

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

我真的很感谢你的帮助。

Answer 1

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

也就是说，您的代码将如下所示：

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