Mapbox GL JS 轴承

Question

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

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

Answer 1

您可以通过从 Gelocation#getCurrentPosition() and reading Coordinates#heading.

获取 Coordinates object 来获取用户的方位（如果他们的设备有这样的传感器）

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

Answer 2

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

cordova 似乎在 object 位置内置了 "heading" 属性。 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"
  }
});

接下来我检查标题是否实际可用，因为当用户移动时它只显示为 return 一个值（目前仅在 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 现在支持 geolocation，它不仅提供用户的航向，还提供一堆其他有用的数据：

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

然后监听地理定位事件：

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

Mapbox GL JS 轴承

Mapbox GL JS Bearing

direction

bearing

heading

mapbox

mapbox-gl-js