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与高德路径导航的开发示例如下：

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应用的开发与集成更为快捷灵活。