如何在Mapboxgl中設置動態中心點？

我正在使用Mapbox-gl.js（v0.38.0）Ionic3 & angular4。我想設置動態中心點。經緯度應根據實時數據庫的經緯度數據進行設置。如何在Mapboxgl中設置動態中心點？

如果我設置靜態中心點硬編碼，當我的實時數據發生變化時，它將顯示按照新標記的中心。所以我想動態設置中心點。

我試過以下鏈接， mapbox example 我已經添加了實時數據和標記。但是，我怎樣才能設定預期的中心點？

其實我的要求：例如：如果實時數據在紐約有多個標記，默認情況下中心點應該指向紐約。下一次數據可能會更改爲加利福尼亞州，那時它應該指向加利福尼亞州。根據標記我應該設置中心點。

來源

2017-06-25 Prince

下面的代碼片段從靈感example on 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 
});

來源

2017-06-28 09:27:04

您可以使用內置的GeolocateControl找到用戶的位置和移動地圖到該位置的中心，結帳這個example

您可以使用watchPosition選項使用戶位置

的跟蹤

Mapbox正在積極努力，以提高定位跟蹤部分，你會在下一版本中有更好的控制此，Checkout this link

來源

2017-06-26 06:56:30 Aravind

阿拉汶，這是好的。我的要求是完全不同的。請參閱更新後的問題 – Prince

您可以使用map.fitBounds方法，我認爲，您可以將所有數據點傳遞給它，它將以所有數據點顯示的方式移動地圖。結帳https://www.mapbox.com/mapbox-gl-js/example/zoomto-linestring/ – Aravind

很好的答案。還有一件事我想在map.fitBounds執行後自定義縮放。我想縮放：14.15因爲之前點擊「縮放到綁定」我的縮放級別如下let map = new mapboxgl.Map（{container：'map'，// container id style：'mapbox：// styles/mapbox/streets-v9'，//樣式表位置 center：[151.207242，-33.868413]， zoom：14.15 }）; – Prince

如何在Mapboxgl中設置動態中心點？

回答

相關問題