You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  6. <title>dc-example</title>
  7. <script src="/libs/dc-sdk/dc.min.js"></script>
  8. <script src="../echarts.min.js"></script>
  9. <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
  10. <link href="../index.css" type="text/css" rel="stylesheet" />
  11. </head>
  12. <body>
  13. <div id="viewer-container" class="viewer-container"></div>
  14. <script>
  15. DC.registerLib('echarts', window.echarts)
  16. let viewer = undefined
  17. function initViewer() {
  18. viewer = new DC.Viewer('viewer-container')
  19. let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
  20. DC.ImageryType.AMAP,
  21. {
  22. crs: 'WGS84',
  23. }
  24. )
  25. viewer.addBaseLayer(baseLayer, {
  26. brightness: 0.1,
  27. })
  28. let layer = new DC.ChartLayer('layer', viewer)
  29. layer.setOption(getOption())
  30. viewer.addLayer(layer)
  31. viewer.flyToPosition(
  32. '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
  33. )
  34. }
  35. function getOption(e) {
  36. let geoCoordMap = {
  37. 上海: [121.4648, 31.2891],
  38. 东莞: [113.8953, 22.901],
  39. 东营: [118.7073, 37.5513],
  40. 中山: [113.4229, 22.478],
  41. 临汾: [111.4783, 36.1615],
  42. 临沂: [118.3118, 35.2936],
  43. 丹东: [124.541, 40.4242],
  44. 丽水: [119.5642, 28.1854],
  45. 乌鲁木齐: [87.9236, 43.5883],
  46. 佛山: [112.8955, 23.1097],
  47. 保定: [115.0488, 39.0948],
  48. 兰州: [103.5901, 36.3043],
  49. 包头: [110.3467, 41.4899],
  50. 北京: [116.4551, 40.2539],
  51. 北海: [109.314, 21.6211],
  52. 南京: [118.8062, 31.9208],
  53. 南宁: [108.479, 23.1152],
  54. 南昌: [116.0046, 28.6633],
  55. 赣州: [116.0046, 25.6633],
  56. 南通: [121.1023, 32.1625],
  57. 厦门: [118.1689, 24.6478],
  58. 台州: [121.1353, 28.6688],
  59. 合肥: [117.29, 32.0581],
  60. 呼和浩特: [111.4124, 40.4901],
  61. 咸阳: [108.4131, 34.8706],
  62. 哈尔滨: [127.9688, 45.368],
  63. 唐山: [118.4766, 39.6826],
  64. 嘉兴: [120.9155, 30.6354],
  65. 大同: [113.7854, 39.8035],
  66. 大连: [122.2229, 39.4409],
  67. 天津: [117.4219, 39.4189],
  68. 太原: [112.3352, 37.9413],
  69. 威海: [121.9482, 37.1393],
  70. 宁波: [121.5967, 29.6466],
  71. 宝鸡: [107.1826, 34.3433],
  72. 宿迁: [118.5535, 33.7775],
  73. 宿州: [117.5535, 33.7775],
  74. 常州: [119.4543, 31.5582],
  75. 广州: [113.5107, 23.2196],
  76. 廊坊: [116.521, 39.0509],
  77. 延安: [109.1052, 36.4252],
  78. 张家口: [115.1477, 40.8527],
  79. 徐州: [117.5208, 34.3268],
  80. 德州: [116.6858, 37.2107],
  81. 惠州: [114.6204, 23.1647],
  82. 成都: [103.9526, 30.7617],
  83. 扬州: [119.4653, 32.8162],
  84. 承德: [117.5757, 41.4075],
  85. 拉萨: [91.1865, 30.1465],
  86. 无锡: [120.3442, 31.5527],
  87. 日照: [119.2786, 35.5023],
  88. 昆明: [102.9199, 25.4663],
  89. 杭州: [119.5313, 29.8773],
  90. 枣庄: [117.323, 34.8926],
  91. 曲阜: [117.323, 35.8926],
  92. 柳州: [109.3799, 24.9774],
  93. 株洲: [113.5327, 27.0319],
  94. 武汉: [114.3896, 30.6628],
  95. 汕头: [117.1692, 23.3405],
  96. 江门: [112.6318, 22.1484],
  97. 沈阳: [123.1238, 42.1216],
  98. 沧州: [116.8286, 38.2104],
  99. 河源: [114.917, 23.9722],
  100. 泉州: [118.3228, 25.1147],
  101. 泰安: [117.0264, 36.0516],
  102. 泰州: [120.0586, 32.5525],
  103. 济南: [117.1582, 36.8701],
  104. 济宁: [116.8286, 35.3375],
  105. 海口: [110.3893, 19.8516],
  106. 淄博: [118.0371, 36.6064],
  107. 淮安: [118.927, 33.4039],
  108. 深圳: [114.5435, 22.5439],
  109. 清远: [112.9175, 24.3292],
  110. 温州: [120.498, 27.8119],
  111. 渭南: [109.7864, 35.0299],
  112. 湖州: [119.8608, 30.7782],
  113. 湘潭: [112.5439, 27.7075],
  114. 滨州: [117.8174, 37.4963],
  115. 潍坊: [119.0918, 36.524],
  116. 烟台: [120.7397, 37.5128],
  117. 玉溪: [101.9312, 23.8898],
  118. 珠海: [113.7305, 22.1155],
  119. 盐城: [120.2234, 33.5577],
  120. 盘锦: [121.9482, 41.0449],
  121. 石家庄: [114.4995, 38.1006],
  122. 福州: [119.4543, 25.9222],
  123. 秦皇岛: [119.2126, 40.0232],
  124. 绍兴: [120.564, 29.7565],
  125. 聊城: [115.9167, 36.4032],
  126. 肇庆: [112.1265, 23.5822],
  127. 舟山: [122.2559, 30.2234],
  128. 苏州: [120.6519, 31.3989],
  129. 莱芜: [117.6526, 36.2714],
  130. 菏泽: [115.6201, 35.2057],
  131. 营口: [122.4316, 40.4297],
  132. 葫芦岛: [120.1575, 40.578],
  133. 衡水: [115.8838, 37.7161],
  134. 衢州: [118.6853, 28.8666],
  135. 西宁: [101.4038, 36.8207],
  136. 西安: [109.1162, 34.2004],
  137. 贵阳: [106.6992, 26.7682],
  138. 连云港: [119.1248, 34.552],
  139. 邢台: [114.8071, 37.2821],
  140. 邯郸: [114.4775, 36.535],
  141. 郑州: [113.4668, 34.6234],
  142. 鄂尔多斯: [108.9734, 39.2487],
  143. 重庆: [107.7539, 30.1904],
  144. 金华: [120.0037, 29.1028],
  145. 铜川: [109.0393, 35.1947],
  146. 银川: [106.3586, 38.1775],
  147. 镇江: [119.4763, 31.9702],
  148. 长春: [125.8154, 44.2584],
  149. 长沙: [113.0823, 28.2568],
  150. 长治: [112.8625, 36.4746],
  151. 阳泉: [113.4778, 38.0951],
  152. 青岛: [120.4651, 36.3373],
  153. 韶关: [113.7964, 24.7028],
  154. }
  155. let chatData = [
  156. [
  157. '北京',
  158. [
  159. [
  160. {
  161. name: '北京',
  162. value: 100,
  163. },
  164. {
  165. name: '无锡',
  166. },
  167. ],
  168. [
  169. {
  170. name: '上海',
  171. value: 30,
  172. },
  173. {
  174. name: '无锡',
  175. },
  176. ],
  177. [
  178. {
  179. name: '广州',
  180. value: 20,
  181. },
  182. {
  183. name: '无锡',
  184. },
  185. ],
  186. [
  187. {
  188. name: '大连',
  189. value: 10,
  190. },
  191. {
  192. name: '无锡',
  193. },
  194. ],
  195. [
  196. {
  197. name: '青岛',
  198. value: 20,
  199. },
  200. {
  201. name: '无锡',
  202. },
  203. ],
  204. [
  205. {
  206. name: '石家庄',
  207. value: 20,
  208. },
  209. {
  210. name: '无锡',
  211. },
  212. ],
  213. [
  214. {
  215. name: '南昌',
  216. value: 10,
  217. },
  218. {
  219. name: '无锡',
  220. },
  221. ],
  222. [
  223. {
  224. name: '合肥',
  225. value: 30,
  226. },
  227. {
  228. name: '无锡',
  229. },
  230. ],
  231. [
  232. {
  233. name: '呼和浩特',
  234. value: 10,
  235. },
  236. {
  237. name: '无锡',
  238. },
  239. ],
  240. [
  241. {
  242. name: '宿州',
  243. value: 10,
  244. },
  245. {
  246. name: '无锡',
  247. },
  248. ],
  249. [
  250. {
  251. name: '曲阜',
  252. value: 10,
  253. },
  254. {
  255. name: '无锡',
  256. },
  257. ],
  258. [
  259. {
  260. name: '杭州',
  261. value: 10,
  262. },
  263. {
  264. name: '无锡',
  265. },
  266. ],
  267. [
  268. {
  269. name: '武汉',
  270. value: 10,
  271. },
  272. {
  273. name: '无锡',
  274. },
  275. ],
  276. [
  277. {
  278. name: '深圳',
  279. value: 10,
  280. },
  281. {
  282. name: '无锡',
  283. },
  284. ],
  285. [
  286. {
  287. name: '珠海',
  288. value: 10,
  289. },
  290. {
  291. name: '无锡',
  292. },
  293. ],
  294. [
  295. {
  296. name: '福州',
  297. value: 20,
  298. },
  299. {
  300. name: '无锡',
  301. },
  302. ],
  303. [
  304. {
  305. name: '西安',
  306. value: 60,
  307. },
  308. {
  309. name: '无锡',
  310. },
  311. ],
  312. [
  313. {
  314. name: '赣州',
  315. value: 10,
  316. },
  317. {
  318. name: '无锡',
  319. },
  320. ],
  321. ],
  322. ],
  323. ]
  324. let convertData = function (data) {
  325. let res = []
  326. for (let i = 0; i < data.length; i++) {
  327. let dataItem = data[i]
  328. let fromCoord = geoCoordMap[dataItem[0].name]
  329. let toCoord = geoCoordMap[dataItem[1].name]
  330. if (fromCoord && toCoord) {
  331. res.push({
  332. fromName: dataItem[0].name,
  333. toName: dataItem[1].name,
  334. coords: [fromCoord, toCoord],
  335. value: dataItem[1].value,
  336. })
  337. }
  338. }
  339. return res
  340. }
  341. let n = []
  342. chatData.forEach(function (e, a) {
  343. n.push(
  344. {
  345. name: e[2],
  346. type: 'lines',
  347. coordinateSystem: 'GLMap',
  348. zlevel: 2,
  349. effect: {
  350. show: !0,
  351. period: 6,
  352. trailLength: 0.1,
  353. symbol: 'arrow',
  354. symbolSize: 5,
  355. },
  356. lineStyle: {
  357. normal: {
  358. color: '#60ff44',
  359. width: 1,
  360. opacity: 0.4,
  361. curveness: 0.2,
  362. },
  363. },
  364. data: convertData(e[1]),
  365. },
  366. {
  367. type: 'effectScatter',
  368. coordinateSystem: 'GLMap',
  369. zlevel: 2,
  370. rippleEffect: {
  371. brushType: 'stroke',
  372. },
  373. label: {
  374. normal: {
  375. show: !0,
  376. position: 'right',
  377. formatter: '{b}',
  378. },
  379. },
  380. symbolSize: function (e) {
  381. return 3 + e[2] / 10
  382. },
  383. itemStyle: {
  384. normal: {
  385. color: '#60ff44',
  386. },
  387. },
  388. data: e[1].map(function (e) {
  389. return {
  390. name: e[0].name,
  391. value: geoCoordMap[e[0].name].concat([e[0].value]),
  392. }
  393. }),
  394. }
  395. )
  396. })
  397. return {
  398. series: n,
  399. }
  400. }
  401. DC.ready({
  402. baseUrl: '../libs/dc-sdk/resources/',
  403. }).then(initViewer)
  404. </script>
  405. </body>
  406. </html>