如何在Mapboxgl中设置动态中心点？

Question

我正在工作Mapbox-gl.js（v0.38.0）Ionic3＆amp; angular4。我想设置动态中心点。纬度和经度应根据实时数据位置的纬度和经度设置。

如果我将静态中心点设置为硬编码，当我的实时数据发生变化时，它将根据新标记显示中心。所以我想动态设置中心点。

我尝试了以下链接， mapbox example 我添加了实时数据和标记。但是如何设置预期的中心点？

其实我的要求是： 例如：如果实时数据在纽约有多个标记，默认情况下，中心点应指向纽约。下次数据可能会更改为Callifornia，那时它应指向加利福尼亚州。 根据标记，我的中心点应该设置。

Answer 1

您可以使用内置GeolocateControl查找用户的位置，并将地图中心移动到该位置，结帐example

您可以使用watchPosition选项启用跟踪用户位置

Mapbox正积极致力于改进位置跟踪部分，您可以在下一个版本中更好地控制它，Checkout this link

Answer 2

以下代码段的灵感来自于mapbox-gl上的zoom-to-linestring example

正如@Aravind上面提到的，我们使用map.fitBounds，但是，我们必须确定边界，我们必须减少特征数组以确定LngLatBounds。

只需确保您已加载要素数据。

示例

let features = [feature, feature]  // ... array of features

// first coordinate in features
let co = features[0].geometry.coordinates;

// we want to determine the bounds for the features data
let bounds = features.reduce((bounds, feature) => {
  return bounds.extend(feature.geometry.coordinates);
}, new mapboxgl.LngLatBounds(co[0].lng, co[0].lat));

// set bounds according to features
map.fitBounds(bounds, {
  padding: 50,
  maxZoom: 14.15,
  duration: 2000
});