如何在 Leaflet 中实现 Open Route 服务答案

【问题标题】：How to Implement Open Route Service in Leaflet如何在 Leaflet 中实现 Open Route 服务
【发布时间】：2020-10-20 04:59:33
【问题描述】：

我可以在传单地图中使用 Open Route Service api 吗？我找不到工作示例来展示如何在地图上集成 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);

【问题讨论】：

您的项目中确实包含了来自lrm-openrouteservice 的L.Routing.OpenRouteService.js 文件？
我用 npm 安装了它，但它不起作用。我找不到其他 CDN 库可以尝试
你是怎么带进来的？带有import 声明？您还可以将source code 复制到项目中的文件中，并在 html 标头中链接该文件
我现在尝试使用源代码，但它给出了同样的错误。我还包含了所有 js 库 - 传单、路由机，但看不到有什么问题......

标签： leaflet openrouteservice

【解决方案1】：

我不知道 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>

【讨论】：

【解决方案2】：

这是我的 HTML sn-p，用于包含地图和路由所需的内容：

<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);

唯一的问题是开放路由服务在最新 API 中使用 POST 请求。所以L.Routing.OpenRouteService.js 文件需要更新

【讨论】：

"L.Routing.OpenRouteService.js 文件需要更新" - 你有更新版本吗？
@Tikky - 当我发布时，我找不到更新版本。在这里试试：github.com/willmorejg/lrm-openrouteservice/pull/6/files