文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在单张中实施开放路线服务

问如何在单张中实施开放路线服务
EN

Stack Overflow用户

提问于 2020-06-30 07:28:38

回答 2查看 1.8K关注 0票数 1

我可以在单张地图中使用开放路线服务api吗？我找不到工作示例来说明如何在地图上集成api密钥。现在我使用的是graphhopper，它工作得很完美，但现在它有限制，最多只能使用5个点。当我尝试通过开放路线服务创建路点时，我显示了这个错误：Uncaught TypeError: L.Routing.openrouteservice is not a constructor My code：

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

leaflet

openrouteservice

回答 2

Stack Overflow用户

发布于 2020-06-30 16:59:36

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

票数 1

Stack Overflow用户

发布于 2020-11-28 23:35:02

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

然后在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);

唯一的问题是Open route服务在最新的API中使用POST请求。因此L.Routing.OpenRouteService.js文件需要更新

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62648150

复制

相似问题

问如何在单张中实施开放路线服务
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单张中实施开放路线服务EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单张中实施开放路线服务
EN