ThingJS结合Web地图API开发,让数据展示更加出色!
时间:2022-07-25
本文章向大家介绍ThingJS结合Web地图API开发,让数据展示更加出色!,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
三维地图,是为了更好的数据可视化,以便更好地进行数据分析。ThingJS结合Web地图API开发了更多3D功能,让数据展示更加出色!
CMap 是基于 ThingJS 实现的地图组件库,我们与高德地图导航服务合作开发导航功能,用到其中的路径规划服务,这里的web服务API对所有用户开放,可以轻松开发。
按照高德的路径规划结果,使用GCJ02坐标系的谷歌影像,导航支持驾车、骑行与步行等交通方式,当然您可以自行开发更多的出行方式,记得使用API前先获取key:
https://lbs.amap.com/api/webservice/guide/api/direction
高德地图路径规划服务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让3D应用的开发与集成更为快捷灵活。
- 每周.NET前沿技术文章摘要(2017-05-17)
- 每周.NET前沿技术文章摘要(2017-05-24)
- ruby学习笔记(10)-puts,p,print的区别
- Linux下的Mongodb部署应用梳理
- Ocelot API网关的实现剖析
- ruby学习笔记(9)-别名(alias)与方法取消(undef,remove_method)
- Pupet自动化管理环境部署记录
- ruby学习笔记(8)-"静态方法的4种写法"与"单例方法的2种写法"
- Puppet常识梳理
- linux下增加磁盘改变指定文件路径分区挂载点和迁移数据
- 手动编写的几个简单的puppet管理配置
- 选择一款适合自己的ruby on rails IDE开发工具
- 微信的两种用途
- Sqlite快速上手使用指南
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 最全Vue开发环境搭建
- apicloud api.openwin
- C#观察者模式实例
- xml序列化和反序列化(二)
- xml序列化和反序列化(一)
- js this问题和es6箭头函数this问题
- 元素淡入淡出效果实现
- Asp.Net Mvc表单提交(批量提交)
- Vue 基本指令和html常用标签结合使用综合案例(含代码)
- ef和mysql使用(二)--让mysql支持EntityFramework.Extended实现批量更新和删除
- EF 多种查询方式
- (mysql)找不到请求的 .Net Framework Data Provider。可能没有安装
- Vue 中的 v-cloak 解读
- ef和mysql使用(一)
- 浏览器工作原理