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

如何在Mapboxgl中设置动态中心点?,mapbox,mapbox-gl-js,mapbox-gl,mapbox-marker,Mapbox,Mapbox Gl Js,Mapbox Gl,Mapbox Marker,我正在使用Mapbox-gl.js(v0.38.0)Ionic3和angular4。我要设置动态中心点。纬度和经度应根据实时数据地点的纬度和经度中的数据进行设置 如果我设置静态中心点硬编码,当我的实时数据更改时,它将根据新标记显示中心。所以我想动态地设置中心点 我尝试了以下链接, 我已经添加了实时数据和标记。但是如何设置预期的中心点呢 其实我的要求是: 例如:如果实时数据在纽约有多个标记,默认情况下,中心点应指向纽约。下一次数据可能会转到Callifornia,那一次应该指向加利福尼亚。 应根据

我正在使用Mapbox-gl.js(v0.38.0)Ionic3和angular4。我要设置动态中心点。纬度和经度应根据实时数据地点的纬度和经度中的数据进行设置

如果我设置静态中心点硬编码,当我的实时数据更改时,它将根据新标记显示中心。所以我想动态地设置中心点

我尝试了以下链接, 我已经添加了实时数据和标记。但是如何设置预期的中心点呢

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

您可以使用内置的
geologateControl
查找用户的位置并将地图的中心移动到该位置,请选中此项

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


Mapbox正在积极改进位置跟踪部分。在下一个版本中,您可以更好地控制该部分。

您可以使用内置的
geologateControl
查找用户的位置,并将地图的中心移动到该位置,然后签出此项

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


Mapbox正在积极改进位置跟踪部件,在下一个版本中,您可以更好地控制该部件。

以下代码片段的灵感来自Mapbox gl上的
缩放到线字符串

正如@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
});

以下代码片段的灵感来自mapbox gl上的“缩放到线字符串”

正如@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
});

阿拉文,这很好。我的要求完全不同。请查看更新的问题您可以使用map.fitbunds方法我认为,您可以将所有数据点传递给它,它将以显示所有数据点的方式移动地图。回答得很好。还有一件事我想在map.fitBounds执行后自定义缩放。我想要zoom:14.15,因为在单击“缩放到绑定”之前,我的缩放级别如下:让map=new mapboxgl.map({container:'map',//container id style:'mapbox://styles/mapbox/streets-v9“,//样式表位置中心:[151.207242,-33.868413],缩放:14.15});阿拉文,这很好。我的要求完全不同。请查看更新的问题您可以使用map.fitbunds方法我认为,您可以将所有数据点传递给它,它将以显示所有数据点的方式移动地图。回答得很好。还有一件事我想在map.fitBounds执行后自定义缩放。我想要zoom:14.15,因为在单击“缩放到绑定”之前,我的缩放级别如下:让map=new mapboxgl.map({container:'map',//container id style:'mapbox://styles/mapbox/streets-v9“,//样式表位置中心:[151.207242,-33.868413],缩放:14.15});