Перемещение маркера по линии, React Native, Mapbox или React Native карты

Я собираюсь отобразить движение нескольких маркеров по их соответствующим траекториям. У меня есть массив координат для каждого маркера.

marker1 = [[lan1, lon1], [lan2, lon2], [lan3, lon3], [lan4, lon4], ....]

Мне удалось нарисовать линейный слой для координат, но мне нужно анимировать маркер, чтобы перемещаться по нему от начальной позиции до места назначения.

У меня также есть дополнительная информация, такая как отметка времени для каждой записанной координаты. Я использую Mapbox, но также может помочь решение для react-native-maps!


react-native mapbox mapbox-gl-js react-native-maps mapbox-gl
person ウィエム    schedule 31.01.2018    source источник
comment
Я буду доволен кодом, в котором вам удалось нарисовать линию на mapbox, чтобы реагировать на родную реакцию. Не могли бы вы поделиться кодом.   -  person Amal p    schedule 20.02.2018
comment
В вашем штате есть переменная, которая является геодезом типа linestring. Это требует более двух координат, которые в основном представляют собой количество точек, через которые вы проходите линию. Когда в замечательной документации по mapbox не упоминается, когда они показывают вам тег полилинии, вам нужно заключить его в тег shapeSource под тегом MapboxGL. В this.state я помещаю переменную geojson с именем route. Вот как вы его рисуете ‹MapboxGL.ShapeSource id = 'line1' shape = {this.state.route}› ‹MapboxGL.LineLayer id = 'linelayer1' /› ‹/MapboxGL.ShapeSource›   -  person ウィエム    schedule 20.02.2018
comment
пожалуйста, дайте мне часть кода для вставки маршрутов с кординатами и создания его geojson типа linestring. если вы достаточно любезны, дайте мне ссылку на googledrive ниже в качестве комментария, который содержит код   -  person Amal p    schedule 28.02.2018
comment
@Amalp, вы должны задать это как вопрос, чтобы каждый мог получить ответ в будущем. Я уже все это объяснил, но могу опубликовать полный пример в качестве ответа, а не комментария. Это не то, как предполагается использовать платформу.   -  person ウィエム    schedule 28.02.2018
comment
Я уже разместил вопрос, вот ссылка, опубликуйте его в качестве ответа, пожалуйста, я отчаялся stackoverflow.com/questions/48878646/   -  person Amal p    schedule 28.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Для анимации вам понадобятся примерно две вещи:

  1. Положение маркера на его пути. У вас уже есть начальная и конечная позиции, поэтому вы можете использовать Turf.along(line, distance для пошаговой позиции.
  2. Анимация. С помощью requestAnimationFrame или даже _ 3_ вы можете обновлять положение маркера каждые x секунд (вы можете изменять его с помощью меток времени ) со следующей позицией (которую вы получаете, увеличивая аргумент distance).

Вы можете найти полный пример на Mapbox GL JS примеры.

person MeltedPenguin    schedule 31.01.2018
comment
Я видел этот пример, но использую react native. Кроме того, примеры на их собственной странице github не задокументированы, поэтому я не смог это понять. Вы можете показать мне пример того, как это использовать? Просто задав ему две позиции, как бы вы его оживили? - person ウィエム; 31.01.2018
comment
Я не знаю React Native, но думаю, вы могли бы использовать таймеры для 2-го шага. - person MeltedPenguin; 31.01.2018