Mapbox GL JS Bearing

Question

Mapbox GL JS是否有可能让用户承担责任？ 我想展示用户面向的方向，以帮助他们导航到附近的POI。 我知道可以设置地图的方位并获得它的当前方位，但我需要用户的实际真实轴承。 与Google地图上的内容相同：

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

Answer 1

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

Mapbox GL JS没有内置的用户界面来显示用户的标题。构建自己的用户界面非常简单。见this example which uses the symbol-rotation property。

Answer 2

所以，经过一段时间花在这上面，我想我会说明我是如何做到这一点的，以防其他人需要或有更好的解决方案。

似乎科尔多瓦有一个内置的＆＃34;标题＆＃34;位置对象中的属性。 https://github.com/apache/cordova-plugin-geolocation

enum RequestType { DO_THIS, DO_THAT };

interface ServerConnectionService<T> {
   List<T> performRequest(RequestType request);
}

首先，我确保标记始终指向标题方向，即使用户通过从用户标题中减去mapBearing（地图从北方转过的度数）来转动地图。

var heading = $rootScope.position.heading;

我在用户位置创建一个图标，添加源并添加包含源的图层。

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

接下来我检查该标题是否实际可用，因为它只在用户移动时返回一个值（目前仅在Android上测试过），如果是，则更新该标题的标题。

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"
  }
});

最后，我在＆＃34; $ watch＆＃34;中更新了该点的位置。位置。

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

这样，即使用户旋转地图，我也可以观察用户标题，并且该点保持正常。

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