Создайте маршрут с API оптимизации Mapbox, используя turf js

Я использовал strike для создания маршрута между двумя точками прямо на дороге. Я нашел решение с помощью turf js, которое можно решить несколькими способами.

Здесь, чтобы объяснить мой собственный путь!

Что и почему Turf js?

Turf js — это библиотека с открытым исходным кодом. Как правило, он используется для пространственного анализа. Он может использоваться для пространственных операций и имеет встроенные функции для создания данных GeoJSON. Причина, по которой мы выбрали turf js вместо обычной коллекции GeoJSON:

Иметь изогнутые линии вместо прямых линий с прямыми разрезами.
Удобство построения маршрутов

Начало работы:

API оптимизации Mapbox. Это API оптимизации, который поможет вам создать оптимальные маршруты доставки для нескольких остановок по всему автопарку.
Учетная запись Mapbox и токен доступа. вам необходимо зарегистрировать учетную запись на странице mapbox.com/signup. Вы можете найти свои токены доступа на Странице аккаунта.

Шаги для создания маршрута с использованием оптимизированного API с использованием turf js:

Создайте папку, например, для trip-tool
Нам нужно установить turf js и mapbox-gl

npm i mapbox-gl npm i @turf/turf

3. Создайте файл js внутри этой папки, например, для TripFinder.js.

4. нам нужно инициализировать карту с помощью Mapbox GL JS внутри файла js

import React,{ useEffect,useRef } from 'react';
import mapboxgl from 'mapbox-gl'; 
import 'mapbox-gl/dist/mapbox-gl.css';  
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; 
function TripFinder() {   //intializing the longititude and lattitudes   
const coordinates = [-96.5108, 39.1184];   
const mapContainer = useRef(null);    
useEffect(() => {     //intialize the map     
const map = new mapboxgl.Map({       
container: mapContainer.current, 
// container id       
style: 'mapbox://styles/mapbox/light-v11', 
// stylesheet location       
center: coordinates, 
// starting position       
zoom: 12, 
// starting zoom     
});   }, []);   
return (     <>       
<div id="map" ref={mapContainer}>       
</div>     </>   ); } 
export default TripFinder;

4. и создайте новый файл CSS в Trip-Tool, например: TripFinder.css

body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }

5. Откройте файл в браузере, и вы увидите карту, центрированную на

6. теперь нам нужно нанести точку от и до на карте. мы можем использовать для этого mapboxgl.Marker. нам нужно убедиться, что этот график выполняется только после загрузки карты, чтобы он возвращался в методе обратного вызова map.on

например: Из местоположения: PHOENIX, US [-112.073555,33.44793] и Куда: TEXAS, US [-110.965274,32.228759]

создать коллекцию, используя turf js для маркировки

// Create a GeoJSON feature collection for the warehouse
    from = turf.featureCollection([turf.point(FromLocation)]);
    to = turf.featureCollection([turf.point(ToLocation)]);

после создания коллекции нам нужно добавить маркеры с помощью этих коллекций

const addMarker= useCallback(() => {
    map.current.on('load', async () => {
      map.current.addLayer({
        id: 'from',
        type: 'circle',
        source: {
          data: from,
          type: 'geojson',
        },
        paint: {
          'circle-radius': 10,
          'circle-color': 'blue',
          'circle-stroke-color': 'blue',
          'circle-stroke-width': 3,
        },
      });
      map.current.addLayer({
        id: 'to',
        type: 'circle',
        source: {
          data: to,
          type: 'geojson',
        },
        paint: {
          'circle-radius': 10,
          'circle-color': 'red',
          'circle-stroke-color': 'red',
          'circle-stroke-width': 3,
        },
      });
    });
  });

результат будет отображаться следующим образом

Ура 😊..! мы в последних шагах!

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

Запрос к API оптимизации должен содержать от 2 до 12 координат:

мы не будем использовать поведение API оптимизации по умолчанию, которое заключается в возврате маршрутов туда и обратно. Это означает, что первая координата является как начальной, так и конечной точкой поездки.
мы будем использовать другой API Mapbox для получения координат между двумя местоположениями:

https://api.mapbox.com/directions/v5/mapbox/driving/from,to?steps=true&geometries=geojson&access_token=${mapboxgl.AccessToken}

Место посадки также будет учитываться в 12-координатном пределе.
В результате пользователь может выбрать до 10 точек, исключая начальную координату и конечную координату.

Для лучшей практики давайте сделаем так, чтобы API извлекал отдельный файл.

Давайте получим координаты из Mapbox API:

const response = await fetch(
`https://api.mapbox.com/directions/v5/mapbox/driving/${FromLocation.join(',')};
${ToLocation.join(',')}?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken
}`,
 { method: 'GET' });
let data = await response.json();
data = data.routes[0];
// to get the coordinates between the source and destination
let coordinates = data.geometry.coordinates;
console.log(coordinates);

результирующие координаты будут:

8. Поскольку мы получили координаты, нам нужно построить их с помощью Оптимизированного API. В то же время нам нужно убедиться, что значение параметра оптимизированного API по умолчанию равно 12, поэтому нам нужно соединить этот массив координат с диапазоном 12.

const len = coordinates.length;
const distributions = [1, 2];
if (len > 12) {
    coordinates.splice(1, coordinates.length - 12);
}

API оптимизации возвращает оптимизированный по длительности маршрут между двумя и 12 входными координатами.

Запрос API оптимизации имеет два обязательных параметра:

профиль: это вид транспорта, используемый запросом. Выберите один из идентификаторов профиля маршрутизации Mapbox Directions (mapbox/вождение, mapbox/ходьба, mapbox/езда на велосипеде и mapbox/вождение-трафик). В этом руководстве вы будете использовать картографию/профиль вождения.
координаты: Это список разделенных точкой с запятой координат {долгота}, {широта}. Должно быть от 2 до 12 координат, и первая координата является начальной и конечной точкой.

Запрос API оптимизации выглядит следующим образом:

https://api.mapbox.com/optimized-trips/v1/mapbox/driving/-122.42,37.78;-122.45,37.91;-122.48,37.73?access_token=YOUR_MAPBOX_ACCESS_TOKEN

Запрос API оптимизации имеет несколько необязательных параметров:

туда и обратно: по умолчанию API оптимизации будет следовать туда и обратно, чтобы быть правдой. Чтобы изменить это поведение по умолчанию, нам нужно передать параметры источника и назначения.
geometries: этот параметр сообщает API оптимизации, в каком формате должна быть возвращаемая геометрия. Для этого приложения вы запросите geometries=geojson для получения данных GeoJSON.
steps: этот параметр сообщает API оптимизации, должен ли он возвращать пошаговые инструкции.
распределения: Это список пар чисел, разделенных точкой с запятой, которые соответствуют списку координат.

чтобы узнать подробности, см.: https://docs.mapbox.com/api/navigation/optimization-v1/

добавьте следующий фрагмент после получения координат и соединения

return await fetch(
`https://api.mapbox.com/optimized-trips/v1/mapbox/driving/${coordinates.join(';'
)}?distributions=${distributions}&overview=full&steps=true&geometries=geojson&roundtrip=false&source=first&destination=last&access_token=${
mapboxgl.accessToken}`,
{ method: 'GET' }
);

большой прогресс до сих пор! 👌

9. Нанесите полученные координаты с помощью turf js

const query = await fetchLoaction();
const response = await query.json();
const newTurfCollection = turf.featureCollection([]);
// Update the `route` source by getting the route source
// and setting the data equal to routeGeoJSO
const routeGeoJSON = turf.featureCollection([
      turf.feature(response.trips[0].geometry),
]);

// if the route already exists on the map, we'll reset it using setData
    if (map.current.getSource('route')) {
      map.current.getSource('route').setData(routeGeoJSON);
    } 
    else {
    // adding the layer of routeline-active to plot the result
      map.current.addSource('route', {
        type: 'geojson',
        data: newTurfCollection,
      });
      map.current.addLayer(
        {
          id: 'routeline-active',
          type: 'line',
          source: 'route',
          layout: {
            'line-join': 'round',
            'line-cap': 'round',
          },
          paint: {
            'line-color': '#0E3464',
            'line-width': ['interpolate', ['linear'], ['zoom'], 12, 3, 22, 12],
          },
        },
        'waterway-label'
      );
    }

Бум!😌

давайте завернем здесь ..!👋

Ресурсы:

URL-адрес репозитория кода: https://github.com/keerthivasanm20/optimizedmapRoute

Создайте маршрут с API оптимизации Mapbox, используя turf js

Что и почему Turf js?

Начало работы:

Шаги для создания маршрута с использованием оптимизированного API с использованием turf js:

Вопросы по теме