Как реализовать сервис Open Route в буклете

Могу ли я использовать API Open Route Service в листовке с картой? Я не могу найти рабочий пример, чтобы показать, как интегрировать ключ api на карту. Теперь я использую graphhopper, и он работает безупречно, но теперь у него есть ограничения на использование до 5 баллов. Когда я пытаюсь создать путевые точки через службу открытых маршрутов, я показываю эту ошибку:Uncaught TypeError: L.Routing.openrouteservice is not a constructorМой код:

  var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors and ORS'
}).addTo(this.mymap);

var control = L.Routing.control({
  waypoints: [
    L.latLng(3.102739, 101.598077),
    L.latLng(3.101861, 101.599037)
  ],
  router: new L.Routing.openrouteservice('5b3ce3597851110001cf6248e3cd48b3c44c4e529f8fac67408d4257')
  // routeWhileDragging: true
}).addTo(this.mymap);
Источник

3 ответа

Я не знаю, работает ли openrouteservice с машиной маршрутизации листовок, но я попробовал с MapBox, и все работает нормально. Теперь моя карта поддерживает пешеходные маршруты.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<!-- Leaflet Map -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.min.js"></script>
<!-- end Leaflet map -->
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
    
var mapboxTiles = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
       attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       tileSize: 512,
       zoomOffset: -1
});

var map = L.map('map')
  .addLayer(mapboxTiles)
  .setView([42.3610, -71.0587], 15);
 L.Routing.control({
                router: L.Routing.mapbox(L.mapbox.accessToken,{
                    profile : 'mapbox/walking',
                    language: 'en',
                }),
                waypoints: [
                    L.latLng(40.779625, -73.969111),
                    L.latLng(40.767949, -73.971855)
                ],
            }).addTo(map);
</script>
</body>
</html>

Источник

Это мой HTML-фрагмент, в который включены все необходимое для карт и маршрутизации:

<script src="scripts/maps/leaflet.js"></script> <!-- Include Leaflet JS -->
<script src="scripts/maps/leaflet-routing-machine.js"></script>  <!-- Include the Leaflet Routing Machine -->
<script src="scripts/maps/polyline.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/lodash.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/corslite.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/L.Routing.OpenRouteService.js"></script>     <!-- Include the Open Route Service for Leaflet Routing Machine -->
<script src="scripts/maps/leaflet-providers.js"></script>

Затем в машинописном тексте:

        let router = (L as any).Routing.control({
            router: new (L as any).Routing.openrouteservice(orsKey),
            waypoints: [
                L.latLng(startLatitude, startLongitude),
                L.latLng(endLatitude, endLongitude)
            ],
            routeWhileDragging: false,
            show: false,
            fitSelectedRoutes: false,
            createMarker: function (i, waypoint, n) {
                return null;
            },
            lineOptions: {
                styles: [{ color: '#9f150b', opacity: 1, weight: 4 }]
            }
        });

        router.addTo(map);

Единственная проблема в том, что служба Open route использует запросы POST в последней версии API. Так что L.Routing.OpenRouteService.js файл требует обновления

Источник

Кто-то обновил плагин для работы с новым API

https://framagit.org/gegeweb/leaflet-routing-machine-openroute/

Источник
Другие вопросы по тегам