Прекрасные возможности картографирования меняют правила игры в приложениях. Как сделать это в веб-приложении?
Все обращают внимание на приложение, в котором удобно работать с картами. Мы все видели мобильные приложения, благодаря которым это происходит: вы ждете, пока вас заберет, и действительно видите, как ваш водитель приближается! Так как же добиться этого в веб-приложении?
Mapbox
Я предпочитаю Mapbox картам Google по нескольким причинам, в основном из-за того, что я считаю его более производительным. В следующих примерах будет использоваться React и сторонний модуль NPM, react-mapbox-gl. Вы можете сделать все то же самое, используя vanilla JS и вашу библиотеку представлений по своему выбору.
Настройка карты (пример React-mapbox-gl)
После того, как наша карта настроена и отрисована, мы можем создать анимированный маркер. Это может быть маркер или символ, как в примере выше. Также мы собираемся использовать другой пакет под названием Turf. Turf - это в основном lodash для функций карты. Это очень удобно.
Реагировать на хуки
React Hooks - это ажиотаж в последнее время. Хуки позволяют нам использовать многие функции, к которым мы привыкли, с компонентами на основе классов без дополнительных затрат на классы. В этом примере мы собираемся использовать два разных хука, useState и useEffect.
Настройка компонентов
Наш компонент будет принимать опору, которая представляет собой массив местоположений за заданный период времени. Я предполагаю, что ваше приложение обновляет данные о местоположении каждые несколько секунд. Если у вас есть шаблон, более основанный на событиях, такой как веб-сокеты, вам больше возможностей 👏. Первое, что мы хотим сделать, это инициализировать текущее местоположение, которое мы передадим нашему поставщику карт.
const [currentLocation, setCurrentLocation] = useState(null);
Затем мы хотим настроить наш эффект, который, по сути, будет проходить через наш массив координат местоположения. Мы собираемся использовать функцию веб-API под названием requestAnimationFrame:
Еще немного разобрав этот эффект. Прежде всего, мы хотим убедиться, что наша опора местоположений не пуста (length == 0). Если так, мы хотим вернуться и больше ничего не делать. Как только мы узнаем, что у нас есть координаты, мы будем использовать Turf для построения нашего более детального массива координат. Это может принять массив из X элементов и создать массив шнуров, сколько бы шагов ни длилось. Очень полезно! Затем мы хотим определить нашу функцию анимации. Здесь мы фактически установим наше состояние с текущим местоположением из нашего массива. Убедитесь, что у нас есть запасной вариант на случай, если мы найдем undefined.
Предполагая, что наш timeStep не превышает количество шагов, мы продолжим вызывать requestAnimationFrame , передавая ему нашу функцию анимации. Как только у нас закончатся шаги, анимация перестанет вызываться. В приведенном выше примере мы предполагаем, что мы будем получать новые местоположения примерно каждые 30 секунд. Под функцией анимации находится наш вызов для отмены кадра анимации и запуска нового кадра. Это произойдет, когда наш массив локаций изменится. useEffect имеет хороший способ предотвратить запуск во время рендеринга каждого компонента. Это второй параметр useState: массив свойств для просмотра и сравнения.
Оказывать
Наконец, мы визуализируем наш маркер с состоянием текущего местоположения:
