57753ae423bc603da294db38ce8e8714
Cesium项目实战(9)-路径规划-集成百度、高德、腾讯地图路径规划服务(腾讯篇)

本篇是连续路径规划的最后一篇腾讯篇,介绍一下接入腾讯地图的路径规划服务。

路径规划系列文章:路径规划之百度篇 路径规划之高德篇 路径规划之腾讯篇

提前需要准备的工作:

  1. 注册腾讯位置服务平台,并在 key管理 中申请一个Web服务的key。
  2. 在腾讯 WebServiceAPI文档 中了解每种路径规划的基础说明。
  3. 当然,也要预先了解一下 百度篇 的内容。
  4. 腾讯地图与高德地图一样,使用的均是GCJ02坐标系。

效果图:


接下来,我们开始接入腾讯地图路径服务。

1、准备好路径规划API地址(还是跟其他篇一样,我们接入了公交、驾驶、骑行三种服务)

"公交": "https://apis.map.qq.com/ws/direction/v1/transit/?from={start}&to={end}&key=&output=jsonp&callback=cb",
"驾驶": "https://apis.map.qq.com/ws/direction/v1/driving/?from={start}&to={end}&key=&output=jsonp&callback=cb",
"骑行": "https://apis.map.qq.com/ws/direction/v1/bicycling/?from={start}&to={end}&key=&output=jsonp&callback=cb"

2、发起调用

var startPointA = startPoint.split(",");
var endPointA = endPoint.split(",");
var w = coordinateTransform.wgs84togcj02(startPointA[0], startPointA[1]); // 坐标转换
var g = coordinateTransform.wgs84togcj02(endPointA[0], endPointA[1]); // 坐标转换
// 跟百度坐标一样,需要调整坐标方向
var startPointInverse = w.reverse().join(",");
var endPointInverse = g.reverse().join(",");
var url = routes[dataSource][method].replace("{start}", startPointInverse).replace("{end}", endPointInverse);
fetchJsonp(url, {jsonpCallbackFunction: 'cb'}).then(response => response.json()).then(data => {
  analyzeResponseT(data);
})

在这里,fetchJsonp的函数参数带了一个{jsonpCallbackFunction: 'cb'}参数,告诉jsonp的默认callback函数为cb,这是腾讯跟百度、高德不同的地方,需要注意,否则调用不成功。

3、解析数据,可视化绘制

// 驾车和骑行模式,处理逻辑一致
var path = data.result.routes[0].polyline;
// 额外的坐标处理,腾讯返回的坐标是加密后的坐标,需要解密一下
for (var i = 2; i < path.length; i++) {
  path[i] = path[i - 2] + path[i] / 1000000
}
// 返回的经纬度顺序也是反的
for (var i = 0; i < path.length; i = i + 2) {
  allPath += path[i + 1] + "," + path[i] + ";";
}
var steps = data.result.routes[0].steps;
for (var i = 0; i < steps.length; i++) {
  all_road_name += "<li>" + steps[i].instruction + "</li>";
}

同样的,腾讯的公交出行也是有权重之分的,按照权重进行筛选。

top Created with Sketch.