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

Question

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

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

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

非常感谢您的帮助。

Answer 1

This example in our Mapbox GL JS documentation shows how to fit a map to the bounds of a LineString. As explained in further detail in the inline comments of the linked example, this same technique of using the LatLngBounds#extend method to extend the bounds to include a given LngLatLike can be used to wrap each coordinate pair in your array with the extend method. This will have the effect of including each point in your array in the bounds passed to 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 });

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

mapbox : How to show all the specified coordinates as a custom icons on the map at once

mapbox

mapbox-gl-js