共计 4196 个字符，预计需要花费 11 分钟才能阅读完成。
地图在城市大屏展现中扮演着必不可缺的角色。想展现动静门路？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 应用，如有须要请自行到高德地图网站申请商业版 key
var 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 反对地图在线进行二次开发和分享。
正文完
发表至： javascript
2020-09-21
