Mapbox GL JS 軸承

Question

Mapbox GL JS 是否有可能讓用戶承受？ 我想顯示用戶面對的方向，以幫助他們導航到附近的 POI。 我知道可以設置地圖的方位並獲取它的當前方位，但我需要用戶的實際生活方位。 與谷歌地圖上的類似：

該服務旨在作為 iOS 和 Android 上的 Ionic 應用程序運行，方位幫助是幫助他們在人口眾多的地圖上定位附近 POI 的關鍵功能。

Answer 1

您可以通過從Gelocation#getCurrentPosition()獲取Coordinates對象並讀取Coordinates#heading來獲取用戶的方位（如果他們的設備有這樣的傳感器）。

Mapbox GL JS 沒有用於顯示用戶標題的內置用戶界面。 構建您自己的用戶界面很容易。 請參閱此示例，該示例使用symbol-rotation屬性。

Answer 2

因此，在花了一些時間之后，我想我會展示我最終是如何做到這一點的，以防其他人需要它或有更好的解決方案。

似乎cordova在位置對象中有一個內置的“標題”屬性。 https://github.com/apache/cordova-plugin-geolocation

var heading = $rootScope.position.heading;

首先，我確保標記始終指向航向方向，即使用戶轉動地圖，通過從用戶航向減去 mapBearing（地圖從北轉向的度數）。

map.on('rotate', function(){
    map.setLayoutProperty('drone', 'icon-rotate', heading - map.getBearing())
});

我在用戶位置創建一個圖標，添加源並添加帶有源的圖層。

map.on('load', function () {
  var point = {"type": "Point", "coordinates": [$rootScope.position.long, $rootScope.position.lat]};
  map.addSource('drone', {type: 'geojson', data: point });
  map.addLayer({
    "id": "drone",
    "type": "symbol",
    "source": "drone"
  }
});

接下來我檢查標題實際上是否可用，因為它似乎只在用戶移動時返回一個值（目前僅在 Android 上測試過），如果是，則更新該點的標題。

if($rootScope.position.heading){
    var heading = $rootScope.position.heading; 
    map.setLayoutProperty('drone', 'icon-rotate', $rootScope.position.heading);
};

最后我更新點的位置，在“$watch”位置。

map.getSource('drone').setData(point);

這樣，即使用戶旋轉地圖，我也可以觀察用戶的前進方向，並且該點保持在軌道上。

Answer 3

對於 2020 年之后（哈哈）來這里的用戶，mapbox gl js 現在支持地理定位，它不僅提供用戶的標題，還提供一堆其他有用的數據：

const geolocate = map.addControl(
 new mapboxgl.GeolocateControl({
   positionOptions: {
      enableHighAccuracy: true
   },
   trackUserLocation: true
 })
)

然后監聽 geolocate 事件：

geolocate.on('geolocate', (e) => {
     console.log(e); 
});

這將為您提供以下對象：

{
coords: {
    accuracy: number;
    altitude: number;
    altitudeAccuracy: number;
    heading: number;
    latitude: number;
    longitude: number;
    speed: number;
  };
  timestamp: number;
 

heading將為您提供用戶的方向。 由於地理定位控件不斷自動觸發，因此可以實時獲取用戶的方向以及速度和高度等，並使用它在地圖上顯示數據驅動的符號。