地图在城市大屏展现中扮演着必不可缺的角色。想展现动静门路？ThingJS与高德门路布局单干计划新鲜出炉！
CMap 是基于 ThingJS 实现的地图组件库，咱们与高德地图导航服务合作开发导航性能，用到其中的门路布局服务，这里的web服务API对所有用户凋谢，能够轻松开发。
依照高德的门路布局后果，应用GCJ02坐标系的谷歌影像，导航反对驾车、骑行与步行等交通形式，当然您能够自行开发更多的出行形式，记得应用API前先获取key：
https://lbs.amap.com/api/webs...
高德地图门路布局服务API是一套以HTTP模式提供的步行、公交、驾车查问及行驶间隔计算接口，返回JSON 或 XML格局的查问数据，用于实现门路布局性能的开发。实用场景包含线路查问，以线路后果页面模式展示换乘计划。依据返回线路数据，自行开发线路导航。
开发示例提供终点、起点的按钮设置，依据不同交通形式来设定线路。点击终点按钮，则在地图上单击某处作为终点，起点按钮也是如此。如上图所示。
ThingJS与高德门路导航的开发示例如下：
var app = new THING.App();// 设置app背景为彩色app.background = [0, 0, 0];// 高德地图key 收费版本有次数限度，此处仅供demo应用，如有须要请自行到高德地图网站申请商业版keyvar amapKey = '5791cdaf02f4d44fd979a9f89739d06c';THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () { var startCoord, endCoord; var map = app.create({ type: 'Map', attribution: 'Google' }); var tileLayer1 = app.create({ type: 'TileLayer', id: 'tileLayer1', url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}' }); map.addLayer(tileLayer1); // 创立一个图层展现终点起点的图标以及导航后果 var thingLayer = app.create({ type: 'ThingLayer', name: 'thingLayer' }); map.addLayer(thingLayer); // 飞到地球上某一个地位 app.camera.earthFlyTo({ lonlat: [116.4365, 39.97479], height: 6000, complete: function () { createUI(); } }); // 是否点击抉择终点按钮 var selectStart = false; // 是否点击抉择起点按钮 var selectEnd = false; // 导航形式抉择的UI var radio; /** * @param orgin 终点坐标 * @param destination 起点坐标 * @param transport 交通形式 */ function nav(origin, destination, transport) { // 先革除导航后果 thingLayer.query('.GeoLine').destroy(); // 构建查问url 不同出行形式构建url的形式不同 具体请参考高德门路布局api var navUrl = '?origin=' + origin + '&destination=' + destination + '&key=' + amapKey; var drivingUrl = 'https://restapi.amap.com/v3/direction/driving'; var bicyclingUrl = 'https://restapi.amap.com/v4/direction/bicycling'; var walkingUrl = 'https://restapi.amap.com/v3/direction/walking'; if (transport === '驾车') { navUrl = drivingUrl + navUrl; } else if (transport === '骑行') { navUrl = bicyclingUrl + navUrl; } else if (transport === '步行') { navUrl = walkingUrl + navUrl; } // 申请高德地图导航服务 $.ajax({ type: 'GET', url: navUrl, dataType: 'json', success: function (data) { // 先判断是否胜利 if (data.status === '1' || data.errcode === 0) { var path; // 不同交通形式返回接口构造不同，具体请参考高德门路布局api if (transport !== '骑行') { path = data.route.paths[0]; } else { path = data.data.paths[0]; } var distance = path.distance; var duration = path.duration; var steps = path.steps; var coordinates = []; for (var i = 0; i < steps.length; i++) { var polyline = steps[i].polyline; var coords = polyline.split(';'); for (var j = 0; j < coords.length; j++) { var coord = coords[j].split(','); coordinates.push([parseFloat(coord[0]), parseFloat(coord[1])]); } } // 将门路布局后果创立一个GeoLine对象,并增加到图层 var road = app.create({ type: 'GeoLine', name: 'road' + i, coordinates: coordinates, renderer: { type: 'image', lineType: 'Plane', color: [255, 0, 0], imageUrl: 'https://www.thingjs.com/uearth/uGeo/path.png', // numPass: 6, width: 6, effect: true, speed: 0.1 } }); thingLayer.add(road); // 飞到GeoLine对象 app.camera.earthFlyTo({ object: road }); } } }); } // 给地图增加点击事件,点击地图时抉择终点或起点,并在地图上增加一个GeoPoint map.on('click', function (e) { if (selectStart) { startCoord = e.coordinates.toString(); selectStart = false; document.body.style.cursor = 'default'; var geoPoint = app.create({ type: 'GeoPoint', name: 'startPoint', coordinates: e.coordinates, renderer: { type: 'image', url: 'https://www.thingjs.com/uearth/uGeo/start.png', size: 3 } }); thingLayer.add(geoPoint); } if (selectEnd) { endCoord = e.coordinates.toString(); selectEnd = false; document.body.style.cursor = 'default'; var geoPoint = app.create({ type: 'GeoPoint', name: 'endPoint', coordinates: e.coordinates, renderer: { type: 'image', url: 'https://www.thingjs.com/uearth/uGeo/end.png', size: 3 } }); thingLayer.add(geoPoint); if (startCoord !== undefined && endCoord !== undefined) { // 获取以后radio选中的值 var transport = radio.getValue(); nav(startCoord, endCoord, transport); } } }); // 创立UI界面 function createUI() { // 创立抉择终点按钮 new THING.widget.Button('抉择终点', function () { selectStart = true; document.body.style.cursor = 'pointer'; thingLayer.query('.GeoPoint').destroy(); thingLayer.query('.GeoLine').destroy(); }); // 创立抉择起点按钮 new THING.widget.Button('抉择起点', function () { if (selectStart) { return; } selectEnd = true; document.body.style.cursor = 'pointer'; }); // 创立一个配置界面组件 var panel = new THING.widget.Panel({ titleText: '交通形式', hasTitle: true, width: 150 }); panel.positionOrigin = 'TR';// top-right panel.position = ['100%', 0]; // 增加 单选框 组件 radio = panel.addRadio({ 'radio': '驾车' }, 'radio', ['驾车', '骑行', '步行']); // 监听单选框选项扭转的事件 radio.on('change', function (ev) { nav(startCoord, endCoord, ev) }) } });ThingJS反对地图在线进行二次开发和分享。