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将为您提供用户的方向。 由于地理定位控件不断自动触发，因此可以实时获取用户的方向以及速度和高度等，并使用它在地图上显示数据驱动的符号。