Анимация движущегося автомобиля с помощью Mapbox

Day by мобильное приложение является более требовательным, привлекая больше всего клиентов, а также разработчиков. Приложение для отслеживания или любая система отслеживания в реальном времени упростила транспортировку и другие экспортно-импортные операции. Каждый хочет отслеживать свое транспортное средство, будь то компания, водитель или пользователь, который его использует. Они могут получить всю информацию на кончиках своих пальцев.

В настоящее время у разработчиков есть множество вариантов для очень простого создания приложений такого типа с помощью Google Maps, Mapbox или Leaflet и т. д. Полный процесс разработки они могут легко получить на своих официальных сайтах. С чего начать, какой должна быть конфигурация сервера или какие технологии необходимо изучить, четко указано на их сайтах. Помимо официального веб-сайта, в Интернете есть много статей, в которых рассказывается, как отобразить карту с пользовательским автомобильным маркером, как нарисовать маршрут между источником и пунктом назначения, даже кратчайший маршрут между двумя точками. Тем не менее, иногда разработчики могут столкнуться с проблемами при разработке в некоторых случаях.

В этой статье я расскажу, как мы можем интегрировать анимацию движения автомобиля между точками в нашем мобильном или веб-приложении с помощью Mapbox. Потому что об этом очень мало статей. Используя Mapbox API, разработчики могут легко определять текущее местоположение транспортных средств, рисовать маршруты, по которым транспортное средство проехало или собирается путешествовать. Но не могу найти в Интернете ни одной статьи о плавной анимации движения автомобиля. Итак, моя главная задача здесь — помочь разработчикам достичь этого с помощью Mapbox.

Первым шагом является создание HTML-элемента div, присвоение ему имени класса (где импортируется значок маркера автомобиля), создание экземпляра маркера mapboxgl и передача элемента div при создании. Проверьте образец ниже:

var el = document.createElement('div'); el.className = 'carmarker'; var marker = new mapboxgl.Marker(el);

"Читай полную статью здесь"

Наш следующий шаг — установить текущую широту-долготу и вращение для экземпляра маркера и добавить его на карту. Проверьте это ниже:

marker.setLngLat([current_lng, current_lat]); .setRotation(current_rotation_or_heading) 
marker.addTo(map);

Следующим шагом будет плавное перемещение значка автомобиля из текущего положения в новое положение. Для этого нам нужно получить новую широту-долготу и новое вращение автомобиля. И если мы выполним тот же шаг, что и выше, мы получим быстрое движение автомобиля, что является проблемой. Чтобы решить эту проблему, мы создали следующий алгоритм. Алгоритм рассчитает разницу между новой позицией и текущей позицией, затем разделит результат на условную дельту.

var num_deltas = 200;
var steps = 0;
var position = [marker.getLngLat().lng, marker.getLngLat().lat];
var lng = NewLocation_lng - marker.getLngLat().lng;
var lat = NewLocation_lat - marker.getLngLat().lat;
var delta_lng = lng / num_deltas;
var delta_lat = lat / num_deltas;

Теперь мы хотели бы задать направление нашему маркеру, чтобы он двигался. Чтобы определить направление, мы используем библиотеку turf, которая помогает определить угол между двумя позициями. Чтобы узнать угол, мы преобразуем наши координаты в точки с помощью функции turf.point(), затем получаем угол между этими двумя точками с помощью функции turf.rhumbBearing().