Mapbox GL JS Подшипник

Question

Возможно ли, что в Mapbox GL JS вы найдете подшипников? Я хотел бы показать направление, в котором находится пользователь, чтобы помочь им в навигации к ближайшему POI. Я понимаю, что можно установить опору карты, а также получить текущий подшипник, но мне нужен реальный жизненный подшипник пользователя. Вид одно и то же, как на Google Maps:

Сервис предназначен для работы в качестве приложения Ионного на прошивке и Android, а также помощь в подшипнике является ключевым элементом, помогая им найти близлежащий POI на хорошо населенной карты.

Answer 1

Итак, после некоторого времени потратить на это, я подумал, что покажу, как я это сделал, на тот случай, если кому-то это понадобится или у вас будет лучшее решение.

Кажется, что 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 2

Вы можете получить подшипник пользователя (если его устройство имеет такой датчик) путем получения объекта Coordinates от Gelocation#getCurrentPosition() и чтения Coordinates#heading.

Mapbox GL JS не имеет встроенного пользовательского интерфейса для отображения заголовка пользователя. Построение собственного пользовательского интерфейса легко. См. this example which uses the symbol-rotation property.