2

我可以在传单地图中使用 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);
4

2 回答 2

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>

于 2020-06-30T08:59:35.763 回答
0

这是我的 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);

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

于 2020-11-28T15:35:02.430 回答