Автор оригинала: Louisa Bainbridge.
Мы покажем вам, как нарисовать многоуровневые многоугольники, также известные как изохрон с простым HTML и JavaScript Code и данные, предоставляемые из API Traveltime на карте листовки.
В этом примере мы будем использовать GeoCoder API Travel Travel, чтобы получить координаты Белого дома, Вашингтона, то, затем отправляйте те координаты и параметры поездки как параметры по времени поиск по времени на API. Полученные данные многоугольника будут нарисованы на карт листовки. В конечном итоге вы увидите, какие области на карте могут быть достигнуты в течение 60 минут с использованием общественного транспорта. Мы также сможем выбрать из разных режимов транспорта, таких как ходьба, велосипед, общественный транспорт и многое другое.
Кодовые фрагменты, предоставляемые в этом руководстве, вставляются в окно разработки CodePen Integrated, в котором вы можете манипулировать кодом и увидеть реальный результат. Чтобы образец работать и нарисовать ISOCHRONE, вам сначала нужно вставить ключ API в кодепен – Запросите ключ API для API поиска в пути, нажав здесь Отказ
Основы
Чтобы создать ISOCHRONE, пользователь должен предоставить параметры на запрос на поиск API, в том числе:
- Расположение отправления или прибытия;
- Вид транспорта
- Ограничение времени в пути
- Время дня
После того, как запрос сделан, API Travel Travel принимает запрос и возвращает ответ JSON. Ответ включает в себя координаты для очков. Эти точки показывают границы форм, доступных в течение времени в пути.
Время отпуски API Справочная карта Запрос и ответ
Связь с API Работает, отправив запрос на формат JSON, и API возвращает ответ JSON FORMAT с помощью данных многоугольника, которые мы увидим, нарисованные в приборе.
Вот как запрос API выглядит без информации заголовка, дополнительная информация о поисках отображения времени и его параметров доступна в Документация Twire Time API Отказ
API запрос
Ответ JSON после успешного запроса API включает в себя координаты. Эти точки показывают границы форм, доступных в соответствующем времени в пути.
Ответ API
Визуализация на карте
Этот ответ должен быть визуализирован на карте. Давайте исследуем код пример, который также доступен в Окружающая среда развития кодепена Отказ
Изображение выше показывает, как этот ответ будет отображаться на карте листовки. Он может быть реализован с использованием любого языка программирования или системы отображения, которую вы предпочитаете. Это самый простой способ генерировать запрос и отобразить ответ с помощью JavaScript.
Написание нашего кода образец
Во-первых, нам нужно определить параметры для поиска.
- Преобразуйте имя местоположения начала в координаты с использованием геокодера;
- Введите время отправления в формат ISO.
- Перевести 1-часовое время в пути в секунды, которая составляет 60 минут х 60 секунд.
Эти значения обычно будут в запросе JSON, в нашем образце, мы устанавливаем их в качестве переменных
Как уже упоминалось ранее, чтобы выполнить запрос на API TravelTime, нужен ключ API, которые можно получить здесь Отказ Клавиша API добавляется к информации заголовка запроса API, в переменные Application_ID и API_KEY. Они необходимы для аутентификации запроса и обычно сидеть на стороне сервера вашего приложения.
Переменные
Геокодирование
Для начального местоположения мы указали Белый дом, Вашингтон, округ Колумбия, но API принимает только координаты широты и долготы. Чтобы изменить адрес в координаты, мы используем Geocoder Travel Time.
Геокодирование
Запрос на API Теперь, когда у нас есть все, что нам нужно для запроса, мы можем использовать код, который будет генерировать запрос на поиск карты времени API. JSON DELETORE_SEARCH формируется и отправляется в HTTP-запросе.
Отправка запроса
Рисование результата
В этом образце мы используем бесплатную Lastlet.js для интерактивной карты и плиток карты Mapbox. Переменная MyMap Устанавливает начальное местоположение карты при нагрузке образца кода.
Карта плитки
Рисование самого изохрона обрабатывается этим сценарием.
Рисунок
Чтобы увидеть весь упомянутый код в действии, попробуйте наш кодепен.
Кодепен