Посмотрите, как далеко вы можете проехать за отведенное время, с помощью полигонов Leaflet и TravelTime API.
Мы покажем вам, как рисовать полигоны времени в пути, также известные как изохроны, с помощью простого кода HTML и JavaScript и данных, предоставленных API TravelTime, на карте Leaflet.
В этом примере мы будем использовать геокодер TravelTime API, чтобы получить координаты Белого дома в Вашингтоне, округ Колумбия, а затем отправить эти координаты и параметры поездки в качестве поиска по временной карте обратно в API. Полученные полигональные данные будут отображены на карте Leaflet. В конечном результате вы увидите, до каких районов на карте можно добраться за 60 минут на общественном транспорте. Мы также сможем выбирать из различных видов транспорта, таких как ходьба, езда на велосипеде, общественный транспорт и многое другое.
Фрагменты кода, представленные в этом руководстве, вставляются в интегрированное окно разработки CodePen, где вы можете манипулировать кодом и видеть результат в реальном времени. Чтобы образец заработал и нарисовал изохрону, сначала нужно вставить ключ API в CodePen — Запросите ключ API для API поиска TravelTime, нажав здесь.
Основы
Чтобы создать изохрону, пользователь должен указать параметры поискового запроса API, в том числе:
- Место отправления или прибытия;
- Вид транспорта
- Ограничение времени в пути
- Время суток
После отправки запроса API TravelTime получает запрос и возвращает ответ в формате JSON. Ответ включает координаты точек. Эти точки показывают границы фигур, достижимых за время прохождения.
Запрос и ответ карты времени API TravelTime
Связь с API работает путем отправки запроса в формате JSON, и API возвращает ответ в формате JSON с данными многоугольника, которые мы увидим в примере кода.
Вот как выглядит запрос API без информации заголовка, более подробная информация о поиске Time Map и его параметрах доступна в Документация API времени в пути.
Ответ JSON после успешного запроса API включает координаты. Эти точки показывают границы фигур, достижимых за соответствующее время в пути.
Визуализация на карте
Этот ответ должен быть визуализирован на карте. Давайте изучим пример кода, который также доступен в Среда разработки CodePen.
На изображении выше показано, как этот ответ будет отображаться на карте Leaflet. Это может быть реализовано с использованием любого языка программирования или картографической системы, которую вы предпочитаете. Это самый простой способ сгенерировать запрос и отобразить ответ с помощью JavaScript.
Пишем наш пример кода
Во-первых, нам нужно определить параметры для поиска.
- Преобразование названия начального местоположения в координаты с помощью геокодера;
- Введите время отправления в формате ISO.
- Переведите 1 час времени в пути в секунды, что равно 60 минут х 60 секунд.
Эти значения обычно будут в запросе JSON, в нашем примере мы устанавливаем их как переменные.
Как упоминалось ранее, для выполнения запроса к API TravelTime необходим ключ API, что можно получить здесь. Ключ API добавляется в информацию заголовка запроса API, в переменные APPLICATION_ID и API_KEY. Они необходимы для аутентификации запроса и обычно находятся на стороне сервера вашего приложения.
Геокодирование
В качестве начального местоположения мы указали Белый дом, Вашингтон, округ Колумбия, но API принимает только координаты широты и долготы. Чтобы преобразовать адрес в координаты, мы используем TravelTime Geocoder.
Запрос к API
Теперь, когда у нас есть все необходимое для запроса, мы можем использовать код, который будет генерировать запрос к поиску API Time Map. Формируется JSON offset_search и отправляется в HTTP-запросе.
Отрисовка результата
В этом примере мы используем бесплатный Leaflet.js для интерактивной карты и листов карты Mapbox. Переменная mymap задает начальное местоположение карты при загрузке примера кода.
Отрисовка самой изохроны обрабатывается этим скриптом.
Чтобы увидеть весь упомянутый код в действии, попробуйте наш CodePen.
