请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 526|回复: 0

[分享] ThingJS连系Web舆图API开辟,让数据展现加倍出色!

[复制链接]
avatar

3

主题

3

帖子

0

积分

游客

积分
0
ico_lz  楼主| 发表于 2020-9-21 21:55:58 | 显示全部楼层 |阅读模式

三维舆图,是为了更好的数据可视化,以便更好地停止数据分析。ThingJS连系Web舆图API开辟了更多3D功用,让数据展现加倍出色!

CMap 是基于 ThingJS 实现的舆图组件库,我们与高德舆图导航办事合作开辟导航功用,用到其中的途径计划办事,这里的web办事API对一切用户开放,可以轻松开辟。

ThingJS连系Web舆图API开辟,让数据展现加倍出色!

依照高德的途径计划成果,利用GCJ02坐标系的谷歌影象,导航支持驾车、骑行与步行等交通方式,固然您可以自行开辟更多的出行方式,记得利用API前先获得key:

https://lbs.amap.com/api/webservice/guide/api/direction

ThingJS连系Web舆图API开辟,让数据展现加倍出色!

高德舆图途径计划办事API是一套以HTTP形式供给的步行、公交、驾车查询及行驶间隔计较接口,返回JSON 或 XML格式的查询数据,用于实现途径计划功用的开辟。适用处景包括线路查询,以线路成果页面形式展现换乘计划。按照返回线路数据,自行开辟线路导航。

开辟示例供给起点、尽头的按钮设备,按照分歧交通方式来设定线路。点击起点按钮,则在舆图上单击某处作为起点,尽头按钮也是如此。如上图所示。

ThingJS与高德途径导航的开辟示例以下:

  1. var app = new THING.App();
  2. // 设备app布景为黑色
  3. app.background = [0, 0, 0];
  4. // 高德舆图key 免费版本有次数限制,此处仅供demo利用,若有需要请自行到高德舆图网站申请贸易版key
  5. var amapKey = '5791cdaf02f4d44fd979a9f89739d06c';
  6. THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'],
  7. function () {
  8. var startCoord, endCoord;
  9. var map = app.create({
  10. type: 'Map',
  11. attribution: 'Google'
  12. });
  13. var tileLayer1 = app.create({
  14. type: 'TileLayer',
  15. id: 'tileLayer1',
  16. url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
  17. });
  18. map.addLayer(tileLayer1);
  19. // 建立一个图层展现起点尽头的图标以及导航成果
  20. var thingLayer = app.create({
  21. type: 'ThingLayer',
  22. name: 'thingLayer'
  23. });
  24. map.addLayer(thingLayer);
  25. // 飞到地球上某一个位置
  26. app.camera.earthFlyTo({
  27. lonlat: [116.4365, 39.97479],
  28. height: 6000,
  29. complete: function () {
  30. createUI();
  31. }
  32. });
  33. // 能否点击挑选起点按钮
  34. var selectStart = false;
  35. // 能否点击挑选尽头按钮
  36. var selectEnd = false;
  37. // 导航方式挑选的UI
  38. var radio;
  39. /**
  40. * @param orgin 起点坐标
  41. * @param destination 尽头坐标
  42. * @param transport 交通方式
  43. */
  44. function nav(origin, destination, transport) {
  45. // 先断根导航成果
  46. thingLayer.query('.GeoLine').destroy();
  47. // 构建查询url 分歧出行方式构建url的方式分歧 具体请参考高德途径计划api
  48. var navUrl = '?origin=' + origin + '&destination=' + destination + '&key=' + amapKey;
  49. var drivingUrl = 'https://restapi.amap.com/v3/direction/driving';
  50. var bicyclingUrl = 'https://restapi.amap.com/v4/direction/bicycling';
  51. var walkingUrl = 'https://restapi.amap.com/v3/direction/walking';
  52. if (transport === '驾车') {
  53. navUrl = drivingUrl + navUrl;
  54. }
  55. else if (transport === '骑行') {
  56. navUrl = bicyclingUrl + navUrl;
  57. }
  58. else if (transport === '步行') {
  59. navUrl = walkingUrl + navUrl;
  60. }
  61. // 请求高德舆图导航办事
  62. $.ajax({
  63. type: 'GET',
  64. url: navUrl,
  65. dataType: 'json',
  66. success: function (data) {
  67. // 先判定能否成功
  68. if (data.status === '1' || data.errcode === 0) {
  69. var path;
  70. // 分歧交通方式返回接口结构分歧,具体请参考高德途径计划api
  71. if (transport !== '骑行') {
  72. path = data.route.paths[0];
  73. }
  74. else {
  75. path = data.data.paths[0];
  76. }
  77. var distance = path.distance;
  78. var duration = path.duration;
  79. var steps = path.steps;
  80. var coordinates = [];
  81. for (var i = 0; i < steps.length; i++) {
  82. var polyline = steps[i].polyline;
  83. var coords = polyline.split(';');
  84. for (var j = 0; j < coords.length; j++) {
  85. var coord = coords[j].split(',');
  86. coordinates.push([parseFloat(coord[0]), parseFloat(coord[1])]);
  87. }
  88. }
  89. // 将途径计划成果建立一个GeoLine工具,并增加到图层
  90. var road = app.create({
  91. type: 'GeoLine',
  92. name: 'road' + i,
  93. coordinates: coordinates,
  94. renderer: {
  95. type: 'image',
  96. lineType: 'Plane',
  97. color: [255, 0, 0],
  98. imageUrl: 'https://www.thingjs.com/uearth/uGeo/path.png',
  99. // numPass: 6,
  100. width: 6,
  101. effect: true,
  102. speed: 0.1
  103. }
  104. });
  105. thingLayer.add(road);
  106. // 飞到GeoLine工具
  107. app.camera.earthFlyTo({
  108. object: road
  109. });
  110. }
  111. }
  112. });
  113. }
  114. // 给舆图增加点击事务,点击舆图时挑选起点或尽头,并在舆图上增加一个GeoPoint
  115. map.on('click', function (e) {
  116. if (selectStart) {
  117. startCoord = e.coordinates.toString();
  118. selectStart = false;
  119. document.body.style.cursor = 'default';
  120. var geoPoint = app.create({
  121. type: 'GeoPoint',
  122. name: 'startPoint',
  123. coordinates: e.coordinates,
  124. renderer: {
  125. type: 'image',
  126. url: 'https://www.thingjs.com/uearth/uGeo/start.png',
  127. size: 3
  128. }
  129. });
  130. thingLayer.add(geoPoint);
  131. }
  132. if (selectEnd) {
  133. endCoord = e.coordinates.toString();
  134. selectEnd = false;
  135. document.body.style.cursor = 'default';
  136. var geoPoint = app.create({
  137. type: 'GeoPoint',
  138. name: 'endPoint',
  139. coordinates: e.coordinates,
  140. renderer: {
  141. type: 'image',
  142. url: 'https://www.thingjs.com/uearth/uGeo/end.png',
  143. size: 3
  144. }
  145. });
  146. thingLayer.add(geoPoint);
  147. if (startCoord !== undefined && endCoord !== undefined) {
  148. // 获得当前radio选中的值
  149. var transport = radio.getValue();
  150. nav(startCoord, endCoord, transport);
  151. }
  152. }
  153. });
  154. // 建立UI界面
  155. function createUI() {
  156. // 建立挑选起点按钮
  157. new THING.widget.Button('挑选起点', function () {
  158. selectStart = true;
  159. document.body.style.cursor = 'pointer';
  160. thingLayer.query('.GeoPoint').destroy();
  161. thingLayer.query('.GeoLine').destroy();
  162. });
  163. // 建立挑选尽头按钮
  164. new THING.widget.Button('挑选尽头', function () {
  165. if (selectStart) {
  166. return;
  167. }
  168. selectEnd = true;
  169. document.body.style.cursor = 'pointer';
  170. });
  171. // 建立一个设置界面组件
  172. var panel = new THING.widget.Panel({
  173. titleText: '交通方式',
  174. hasTitle: true,
  175. width: 150
  176. });
  177. panel.positionOrigin = 'TR';// top-right
  178. panel.position = ['100%', 0];
  179. // 增加 单选框 组件
  180. radio = panel.addRadio({ 'radio': '驾车' }, 'radio', ['驾车', '骑行', '步行']);
  181. // 监听单选框选项改变的事务
  182. radio.on('change', function (ev) {
  183. nav(startCoord, endCoord, ev)
  184. })
  185. }
  186. });
复制代码


ThingJS让3D利用的开辟与集成更加速捷灵活。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则