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

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

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

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

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

2. 代码

function searchRoute(){
  var routing;
  switch (routeType) {
    case "drive":
      routing = new BMapGL.DrivingRoute(map,{
        renderOptions :{
          map:map,
          autoViewport: true
        }
      });
      break;
    case "bus":
      routing = new BMapGL.BusLineSearch(map,{
        renderOptions :{
          map:map,
          autoViewport: true
        },
        intercityPolicy:BMAP_INTERCITY_POLICY_EARLY_START,

        transitTypePolicy:BMAP_TRANSIT_TYPE_POLICY_AIRPLANE

      });
      break;
    case "walk":
      routing = new BMapGL.WalkingRoute(map,{
        renderOptions :{
          map:map,
          autoViewport: true
        }
      });
      break;
    // case "ride":
    //   routing = new BMapGL.RidingRoute(map,{
    //     renderOptions :{
    //       map:map,
    //       autoViewport: true
    //     }
    //   });
      break;
  }

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

var startIcon = new BMapGL.Icon('../img/start.png', new BMapGL.Size(60,60));

  var endIcon = new BMapGL.Icon('../img/end.png', new BMapGL.Size(48,48));

  var startMarker = new BMapGL.Marker(startPt,{icon:startIcon});

  var endMarker = new BMapGL.Marker(endPt,{icon:endIcon});


  routing.search(startPt,endPt);

  // let routeResult = routing.getResults();
  //
  // console.log(routeResult);

  routing.setPolylinesSetCallback(function (result) {
    routing.clearResults();
    map.clearOverlays();

    map.addOverlay(startMarker);
    map.addOverlay(endMarker);

    var points = [];
    result[0].getPath().map(function (item) {
      points.push(new BMapGL.Point(item.lng,item.lat));
    });
    var polyline = new BMapGL.Polyline(points,{strokeColor:"#f608f2",strokeWeight:5,strokeOpacity:0.5});
    map.addOverlay(polyline);
  });

  routing.setMarkersSetCallback(function(result){
    var startMarker = new BMapGL.Marker(result[0].marker.point,{icon:startIcon});
    map.addOverlay(startMarker);

    var endMarker = new BMapGL.Marker(result[1].marker.point,{icon:endIcon});
    map.addOverlay(endMarker);
　　　});

4. 页面显示

4. 源码地址

https://github.com/WhatGIS/bdMap