Mapbox GL JS 轴承答案

【问题标题】：Mapbox GL JS BearingMapbox GL JS 轴承
【发布时间】：2017-01-26 04:31:58
【问题描述】：

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

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

【问题讨论】：

标签： mapbox direction mapbox-gl-js heading bearing

【解决方案1】：

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

Mapbox GL JS 没有用于显示用户标题的内置用户界面。构建自己的用户界面很容易。见this example which uses the symbol-rotation property。

【讨论】：

感谢您的回答，抱歉回复晚了。我调查了一下，您的意见实际上帮助我找到了答案。

【解决方案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);

这样，即使用户旋转地图，我也可以观察用户的航向，并且该点保持在轨道上。

【讨论】：

【解决方案3】：

对于 2020 年后来到这里的用户（真是一年哈哈），mapbox gl js 现在支持geolocation，它不仅提供用户的标题，还提供一堆其他有用的数据：

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

【讨论】：