mapbox - Mapbox GL JS 轴承

Question

在 Mapbox GL JS 中是否有可能让用户承受？我想显示用户面对的方向，以帮助他们导航到附近的 POI。我知道可以设置地图的方位并获取它的当前方位，但我需要用户的实际生活方位。与谷歌地图上的类似：

该服务旨在作为 Ionic 应用程序在 iOS 和 Android 上运行，方位辅助是帮助他们在人口众多的地图上定位附近 POI 的关键功能。

Answer 1

您可以通过获取Coordinates对象Gelocation#getCurrentPosition()并读取来获取用户的方位（如果他们的设备有这样的传感器） Coordinates#heading。

Mapbox GL JS 没有用于显示用户标题的内置用户界面。构建自己的用户界面很容易。请参阅使用该symbol-rotation属性的此示例。

Answer 2

所以，在花了一些时间之后，我想我会展示我最终是如何做到这一点的，以防其他人需要它或有更好的解决方案。

似乎科尔多瓦在位置对象中有一个内置的“标题”属性。 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会给你用户的方向。由于地理定位控件不断自动触发，因此可以实时获取用户的方向以及速度和高度等，并使用它在地图上显示数据驱动的符号。