如何在 Leaflet 中实现开放路由服务
[英]How to Implement Open Route Service in Leaflet
问题描述
Can I use Open Route Service api in leaflet map?
我可以在 leaflet map 中使用 Open Route Service api 吗？ I can't find working example to show how to integrate api key on the map.我找不到工作示例来展示如何在 map 上集成 api 键。 Now I'm using graphhopper and it's working flawless but now it have restrictions to use up to 5 points.现在我正在使用graphhopper，它工作完美，但现在它最多只能使用5个点。 When I try to make waypoints via open route service I'm showing this error: Uncaught TypeError: L.Routing.openrouteservice is not a constructor My code:当我尝试通过开放路线服务制作航点时，我显示此错误： 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);
2 个解决方案
解决方案1
1 2020-06-30 08:59:35
I don't know does openrouteservice works with leaflet routing machine but I tried with MapBox and everything works fine.我不知道 openrouteservice 是否适用于 leaflet 路由机，但我尝试使用 MapBox，一切正常。 So now my map support walking directions.所以现在我的 map 支持步行方向。
<,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
0 2020-11-28 15:35:02
This is my HTML snippet for including the stuff I need for maps and routing:这是我的 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>
Then in typescript:然后在 typescript 中：
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);
Only problem is the Open route service use POST requests in the latest API.唯一的问题是 Open route 服务在最新的 API 中使用 POST 请求。 So the L.Routing.OpenRouteService.js file needs updating所以L.Routing.OpenRouteService.js文件需要更新
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.