百度地图（33）-GL 路径规划

1. 三维 GL库中的路径规划功能和二维中的区别不大，连调用方式都类似。

直接上代码，至于要获取路径的查询结果，这里就没有写，请参考官网地址。

其中支持驾驶、公交、步行、骑行模式。

1  *  http://lbsyun.baidu.com/jsdemo.htm#sCaculateDriveTime
2  *  http://lbsyun.baidu.com/jsdemo.htm#uWalkNavPanel
3  *  http://lbsyun.baidu.com/jsdemo.htm#tBusLngLatSearch

2. 代码

 1 function searchRoute(){
 2   var routing;
 3   switch (routeType) {
 4     case "drive":
 5       routing = new BMapGL.DrivingRoute(map,{
 6         renderOptions :{
 7           map:map,
 8           autoViewport: true
 9         }
10       });
11       break;
12     case "bus":
13       routing = new BMapGL.BusLineSearch(map,{
14         renderOptions :{
15           map:map,
16           autoViewport: true
17         },
18         intercityPolicy:BMAP_INTERCITY_POLICY_EARLY_START,
19 
20         transitTypePolicy:BMAP_TRANSIT_TYPE_POLICY_AIRPLANE
21 
22       });
23       break;
24     case "walk":
25       routing = new BMapGL.WalkingRoute(map,{
26         renderOptions :{
27           map:map,
28           autoViewport: true
29         }
30       });
31       break;
32     // case "ride":
33     //   routing = new BMapGL.RidingRoute(map,{
34     //     renderOptions :{
35     //       map:map,
36     //       autoViewport: true
37     //     }
38     //   });
39       break;
40   }

3. 代码中的其它地方，有针对性的更换了起始和终止点的图标，并替换了路线的颜色。

 1 var startIcon = new BMapGL.Icon('../img/start.png', new BMapGL.Size(60,60));
 2 
 3   var endIcon = new BMapGL.Icon('../img/end.png', new BMapGL.Size(48,48));
 4 
 5   var startMarker = new BMapGL.Marker(startPt,{icon:startIcon});
 6 
 7   var endMarker = new BMapGL.Marker(endPt,{icon:endIcon});
 8 
 9 
10   routing.search(startPt,endPt);
11 
12   // let routeResult = routing.getResults();
13   //
14   // console.log(routeResult);
15 
16   routing.setPolylinesSetCallback(function (result) {
17     routing.clearResults();
18     map.clearOverlays();
19 
20     map.addOverlay(startMarker);
21     map.addOverlay(endMarker);
22 
23     var points = [];
24     result[0].getPath().map(function (item) {
25       points.push(new BMapGL.Point(item.lng,item.lat));
26     });
27     var polyline = new BMapGL.Polyline(points,{strokeColor:"#f608f2",strokeWeight:5,strokeOpacity:0.5});
28     map.addOverlay(polyline);
29   });
30 
31   routing.setMarkersSetCallback(function(result){
32     var startMarker = new BMapGL.Marker(result[0].marker.point,{icon:startIcon});
33     map.addOverlay(startMarker);
34 
35     var endMarker = new BMapGL.Marker(result[1].marker.point,{icon:endIcon});
36     map.addOverlay(endMarker);
　　　});

4. 页面显示

4. 源码地址

https://github.com/WhatGIS/bdMap