m30_echarts_sandian2.html 26 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  6. <meta name="author" content="火星科技 http://mars3d.cn " />
  7. <meta name="apple-touch-fullscreen" content="yes" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  10. <meta name="format-detection" content="telephone=no" />
  11. <meta name="x5-fullscreen" content="true" />
  12. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  13. <!-- 标题及搜索关键字 -->
  14. <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
  15. <meta
  16. name="description"
  17. content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型 gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包 地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
  18. />
  19. <link rel="shortcut icon" type="image/x-icon" href="" />
  20. <title>散点图 城市空气质量| Echarts扩展支持 | 三维地图 </title>
  21. <!--第三方lib-->
  22. <script
  23. type="text/javascript"
  24. src="../lib/include-lib.js"
  25. libpath="../lib/"
  26. include="jquery,font-awesome,bootstrap,layer,haoutil,turf,mars3d,mars3d-echarts"
  27. ></script>
  28. <link href="css/style.css" rel="stylesheet" />
  29. </head>
  30. <body class="dark">
  31. <!--加载前进行操作提示,优化用户体验-->
  32. <div id="mask" class="signmask" onclick="removeMask()"></div>
  33. <div id="mars3dContainer" class="mars3d-container"></div>
  34. <script src="./js/common.js"></script>
  35. <script type="text/javascript">
  36. "use script"; //开发环境建议开启严格模式
  37. var map;
  38. function initMap(options) {
  39. //合并属性参数,可覆盖config.json中的对应配置
  40. var mapOptions = mars3d.Util.merge(options, {
  41. scene: {
  42. center: { lat: 20.71756, lng: 111.57217, alt: 5902792, heading: 354, pitch: -78 },
  43. },
  44. });
  45. //创建三维地球场景
  46. map = new mars3d.Map("mars3dContainer", mapOptions);
  47. //创建Echarts图层
  48. createEchartsLayer();
  49. }
  50. function createEchartsLayer() {
  51. var options = getEchartsOption();
  52. var echartsLayer = new mars3d.layer.EchartsLayer(options);
  53. map.addLayer(echartsLayer);
  54. }
  55. function getEchartsOption() {
  56. var geoCoordMap = {
  57. 海门: [121.15, 31.89],
  58. 鄂尔多斯: [109.781327, 39.608266],
  59. 招远: [120.38, 37.35],
  60. 舟山: [122.207216, 29.985295],
  61. 齐齐哈尔: [123.97, 47.33],
  62. 盐城: [120.13, 33.38],
  63. 赤峰: [118.87, 42.28],
  64. 青岛: [120.33, 36.07],
  65. 乳山: [121.52, 36.89],
  66. 金昌: [102.188043, 38.520089],
  67. 泉州: [118.58, 24.93],
  68. 莱西: [120.53, 36.86],
  69. 日照: [119.46, 35.42],
  70. 胶南: [119.97, 35.88],
  71. 南通: [121.05, 32.08],
  72. 拉萨: [91.11, 29.97],
  73. 云浮: [112.02, 22.93],
  74. 梅州: [116.1, 24.55],
  75. 文登: [122.05, 37.2],
  76. 上海: [121.48, 31.22],
  77. 攀枝花: [101.718637, 26.582347],
  78. 威海: [122.1, 37.5],
  79. 承德: [117.93, 40.97],
  80. 厦门: [118.1, 24.46],
  81. 汕尾: [115.375279, 22.786211],
  82. 潮州: [116.63, 23.68],
  83. 丹东: [124.37, 40.13],
  84. 太仓: [121.1, 31.45],
  85. 曲靖: [103.79, 25.51],
  86. 烟台: [121.39, 37.52],
  87. 福州: [119.3, 26.08],
  88. 瓦房店: [121.979603, 39.627114],
  89. 即墨: [120.45, 36.38],
  90. 抚顺: [123.97, 41.97],
  91. 玉溪: [102.52, 24.35],
  92. 张家口: [114.87, 40.82],
  93. 阳泉: [113.57, 37.85],
  94. 莱州: [119.942327, 37.177017],
  95. 湖州: [120.1, 30.86],
  96. 汕头: [116.69, 23.39],
  97. 昆山: [120.95, 31.39],
  98. 宁波: [121.56, 29.86],
  99. 湛江: [110.359377, 21.270708],
  100. 揭阳: [116.35, 23.55],
  101. 荣成: [122.41, 37.16],
  102. 连云港: [119.16, 34.59],
  103. 葫芦岛: [120.836932, 40.711052],
  104. 常熟: [120.74, 31.64],
  105. 东莞: [113.75, 23.04],
  106. 河源: [114.68, 23.73],
  107. 淮安: [119.15, 33.5],
  108. 泰州: [119.9, 32.49],
  109. 南宁: [108.33, 22.84],
  110. 营口: [122.18, 40.65],
  111. 惠州: [114.4, 23.09],
  112. 江阴: [120.26, 31.91],
  113. 蓬莱: [120.75, 37.8],
  114. 韶关: [113.62, 24.84],
  115. 嘉峪关: [98.289152, 39.77313],
  116. 广州: [113.23, 23.16],
  117. 延安: [109.47, 36.6],
  118. 太原: [112.53, 37.87],
  119. 清远: [113.01, 23.7],
  120. 中山: [113.38, 22.52],
  121. 昆明: [102.73, 25.04],
  122. 寿光: [118.73, 36.86],
  123. 盘锦: [122.070714, 41.119997],
  124. 长治: [113.08, 36.18],
  125. 深圳: [114.07, 22.62],
  126. 珠海: [113.52, 22.3],
  127. 宿迁: [118.3, 33.96],
  128. 咸阳: [108.72, 34.36],
  129. 铜川: [109.11, 35.09],
  130. 平度: [119.97, 36.77],
  131. 佛山: [113.11, 23.05],
  132. 海口: [110.35, 20.02],
  133. 江门: [113.06, 22.61],
  134. 章丘: [117.53, 36.72],
  135. 肇庆: [112.44, 23.05],
  136. 大连: [121.62, 38.92],
  137. 临汾: [111.5, 36.08],
  138. 吴江: [120.63, 31.16],
  139. 石嘴山: [106.39, 39.04],
  140. 沈阳: [123.38, 41.8],
  141. 苏州: [120.62, 31.32],
  142. 茂名: [110.88, 21.68],
  143. 嘉兴: [120.76, 30.77],
  144. 长春: [125.35, 43.88],
  145. 胶州: [120.03336, 36.264622],
  146. 银川: [106.27, 38.47],
  147. 张家港: [120.555821, 31.875428],
  148. 三门峡: [111.19, 34.76],
  149. 锦州: [121.15, 41.13],
  150. 南昌: [115.89, 28.68],
  151. 柳州: [109.4, 24.33],
  152. 三亚: [109.511909, 18.252847],
  153. 自贡: [104.778442, 29.33903],
  154. 吉林: [126.57, 43.87],
  155. 阳江: [111.95, 21.85],
  156. 泸州: [105.39, 28.91],
  157. 西宁: [101.74, 36.56],
  158. 宜宾: [104.56, 29.77],
  159. 呼和浩特: [111.65, 40.82],
  160. 成都: [104.06, 30.67],
  161. 大同: [113.3, 40.12],
  162. 镇江: [119.44, 32.2],
  163. 桂林: [110.28, 25.29],
  164. 张家界: [110.479191, 29.117096],
  165. 宜兴: [119.82, 31.36],
  166. 北海: [109.12, 21.49],
  167. 西安: [108.95, 34.27],
  168. 金坛: [119.56, 31.74],
  169. 东营: [118.49, 37.46],
  170. 牡丹江: [129.58, 44.6],
  171. 遵义: [106.9, 27.7],
  172. 绍兴: [120.58, 30.01],
  173. 扬州: [119.42, 32.39],
  174. 常州: [119.95, 31.79],
  175. 潍坊: [119.1, 36.62],
  176. 重庆: [106.54, 29.59],
  177. 台州: [121.420757, 28.656386],
  178. 南京: [118.78, 32.04],
  179. 滨州: [118.03, 37.36],
  180. 贵阳: [106.71, 26.57],
  181. 无锡: [120.29, 31.59],
  182. 本溪: [123.73, 41.3],
  183. 克拉玛依: [84.77, 45.59],
  184. 渭南: [109.5, 34.52],
  185. 马鞍山: [118.48, 31.56],
  186. 宝鸡: [107.15, 34.38],
  187. 焦作: [113.21, 35.24],
  188. 句容: [119.16, 31.95],
  189. 北京: [116.46, 39.92],
  190. 徐州: [117.2, 34.26],
  191. 衡水: [115.72, 37.72],
  192. 包头: [110, 40.58],
  193. 绵阳: [104.73, 31.48],
  194. 乌鲁木齐: [87.68, 43.77],
  195. 枣庄: [117.57, 34.86],
  196. 杭州: [120.19, 30.26],
  197. 淄博: [118.05, 36.78],
  198. 鞍山: [122.85, 41.12],
  199. 溧阳: [119.48, 31.43],
  200. 库尔勒: [86.06, 41.68],
  201. 安阳: [114.35, 36.1],
  202. 开封: [114.35, 34.79],
  203. 济南: [117, 36.65],
  204. 德阳: [104.37, 31.13],
  205. 温州: [120.65, 28.01],
  206. 九江: [115.97, 29.71],
  207. 邯郸: [114.47, 36.6],
  208. 临安: [119.72, 30.23],
  209. 兰州: [103.73, 36.03],
  210. 沧州: [116.83, 38.33],
  211. 临沂: [118.35, 35.05],
  212. 南充: [106.110698, 30.837793],
  213. 天津: [117.2, 39.13],
  214. 富阳: [119.95, 30.07],
  215. 泰安: [117.13, 36.18],
  216. 诸暨: [120.23, 29.71],
  217. 郑州: [113.65, 34.76],
  218. 哈尔滨: [126.63, 45.75],
  219. 聊城: [115.97, 36.45],
  220. 芜湖: [118.38, 31.33],
  221. 唐山: [118.02, 39.63],
  222. 平顶山: [113.29, 33.75],
  223. 邢台: [114.48, 37.05],
  224. 德州: [116.29, 37.45],
  225. 济宁: [116.59, 35.38],
  226. 荆州: [112.239741, 30.335165],
  227. 宜昌: [111.3, 30.7],
  228. 义乌: [120.06, 29.32],
  229. 丽水: [119.92, 28.45],
  230. 洛阳: [112.44, 34.7],
  231. 秦皇岛: [119.57, 39.95],
  232. 株洲: [113.16, 27.83],
  233. 石家庄: [114.48, 38.03],
  234. 莱芜: [117.67, 36.19],
  235. 常德: [111.69, 29.05],
  236. 保定: [115.48, 38.85],
  237. 湘潭: [112.91, 27.87],
  238. 金华: [119.64, 29.12],
  239. 岳阳: [113.09, 29.37],
  240. 长沙: [113, 28.21],
  241. 衢州: [118.88, 28.97],
  242. 廊坊: [116.7, 39.53],
  243. 菏泽: [115.480656, 35.23375],
  244. 合肥: [117.27, 31.86],
  245. 武汉: [114.31, 30.52],
  246. 大庆: [125.03, 46.58],
  247. };
  248. var datapoint = [
  249. {
  250. name: "海门",
  251. value: 9,
  252. },
  253. {
  254. name: "鄂尔多斯",
  255. value: 12,
  256. },
  257. {
  258. name: "招远",
  259. value: 12,
  260. },
  261. {
  262. name: "舟山",
  263. value: 12,
  264. },
  265. {
  266. name: "齐齐哈尔",
  267. value: 14,
  268. },
  269. {
  270. name: "盐城",
  271. value: 15,
  272. },
  273. {
  274. name: "赤峰",
  275. value: 16,
  276. },
  277. {
  278. name: "青岛",
  279. value: 18,
  280. },
  281. {
  282. name: "乳山",
  283. value: 18,
  284. },
  285. {
  286. name: "金昌",
  287. value: 19,
  288. },
  289. {
  290. name: "泉州",
  291. value: 21,
  292. },
  293. {
  294. name: "莱西",
  295. value: 21,
  296. },
  297. {
  298. name: "日照",
  299. value: 21,
  300. },
  301. {
  302. name: "胶南",
  303. value: 22,
  304. },
  305. {
  306. name: "南通",
  307. value: 23,
  308. },
  309. {
  310. name: "拉萨",
  311. value: 24,
  312. },
  313. {
  314. name: "云浮",
  315. value: 24,
  316. },
  317. {
  318. name: "梅州",
  319. value: 25,
  320. },
  321. {
  322. name: "文登",
  323. value: 25,
  324. },
  325. {
  326. name: "上海",
  327. value: 25,
  328. },
  329. {
  330. name: "攀枝花",
  331. value: 25,
  332. },
  333. {
  334. name: "威海",
  335. value: 25,
  336. },
  337. {
  338. name: "承德",
  339. value: 25,
  340. },
  341. {
  342. name: "厦门",
  343. value: 26,
  344. },
  345. {
  346. name: "汕尾",
  347. value: 26,
  348. },
  349. {
  350. name: "潮州",
  351. value: 26,
  352. },
  353. {
  354. name: "丹东",
  355. value: 27,
  356. },
  357. {
  358. name: "太仓",
  359. value: 27,
  360. },
  361. {
  362. name: "曲靖",
  363. value: 27,
  364. },
  365. {
  366. name: "烟台",
  367. value: 28,
  368. },
  369. {
  370. name: "福州",
  371. value: 29,
  372. },
  373. {
  374. name: "瓦房店",
  375. value: 30,
  376. },
  377. {
  378. name: "即墨",
  379. value: 30,
  380. },
  381. {
  382. name: "抚顺",
  383. value: 31,
  384. },
  385. {
  386. name: "玉溪",
  387. value: 31,
  388. },
  389. {
  390. name: "张家口",
  391. value: 31,
  392. },
  393. {
  394. name: "阳泉",
  395. value: 31,
  396. },
  397. {
  398. name: "莱州",
  399. value: 32,
  400. },
  401. {
  402. name: "湖州",
  403. value: 32,
  404. },
  405. {
  406. name: "汕头",
  407. value: 32,
  408. },
  409. {
  410. name: "昆山",
  411. value: 33,
  412. },
  413. {
  414. name: "宁波",
  415. value: 33,
  416. },
  417. {
  418. name: "湛江",
  419. value: 33,
  420. },
  421. {
  422. name: "揭阳",
  423. value: 34,
  424. },
  425. {
  426. name: "荣成",
  427. value: 34,
  428. },
  429. {
  430. name: "连云港",
  431. value: 35,
  432. },
  433. {
  434. name: "葫芦岛",
  435. value: 35,
  436. },
  437. {
  438. name: "常熟",
  439. value: 36,
  440. },
  441. {
  442. name: "东莞",
  443. value: 36,
  444. },
  445. {
  446. name: "河源",
  447. value: 36,
  448. },
  449. {
  450. name: "淮安",
  451. value: 36,
  452. },
  453. {
  454. name: "泰州",
  455. value: 36,
  456. },
  457. {
  458. name: "南宁",
  459. value: 37,
  460. },
  461. {
  462. name: "营口",
  463. value: 37,
  464. },
  465. {
  466. name: "惠州",
  467. value: 37,
  468. },
  469. {
  470. name: "江阴",
  471. value: 37,
  472. },
  473. {
  474. name: "蓬莱",
  475. value: 37,
  476. },
  477. {
  478. name: "韶关",
  479. value: 38,
  480. },
  481. {
  482. name: "嘉峪关",
  483. value: 38,
  484. },
  485. {
  486. name: "广州",
  487. value: 38,
  488. },
  489. {
  490. name: "延安",
  491. value: 38,
  492. },
  493. {
  494. name: "太原",
  495. value: 39,
  496. },
  497. {
  498. name: "清远",
  499. value: 39,
  500. },
  501. {
  502. name: "中山",
  503. value: 39,
  504. },
  505. {
  506. name: "昆明",
  507. value: 39,
  508. },
  509. {
  510. name: "寿光",
  511. value: 40,
  512. },
  513. {
  514. name: "盘锦",
  515. value: 40,
  516. },
  517. {
  518. name: "长治",
  519. value: 41,
  520. },
  521. {
  522. name: "深圳",
  523. value: 41,
  524. },
  525. {
  526. name: "珠海",
  527. value: 42,
  528. },
  529. {
  530. name: "宿迁",
  531. value: 43,
  532. },
  533. {
  534. name: "咸阳",
  535. value: 43,
  536. },
  537. {
  538. name: "铜川",
  539. value: 44,
  540. },
  541. {
  542. name: "平度",
  543. value: 44,
  544. },
  545. {
  546. name: "佛山",
  547. value: 44,
  548. },
  549. {
  550. name: "海口",
  551. value: 44,
  552. },
  553. {
  554. name: "江门",
  555. value: 45,
  556. },
  557. {
  558. name: "章丘",
  559. value: 45,
  560. },
  561. {
  562. name: "肇庆",
  563. value: 46,
  564. },
  565. {
  566. name: "大连",
  567. value: 47,
  568. },
  569. {
  570. name: "临汾",
  571. value: 47,
  572. },
  573. {
  574. name: "吴江",
  575. value: 47,
  576. },
  577. {
  578. name: "石嘴山",
  579. value: 49,
  580. },
  581. {
  582. name: "沈阳",
  583. value: 50,
  584. },
  585. {
  586. name: "苏州",
  587. value: 50,
  588. },
  589. {
  590. name: "茂名",
  591. value: 50,
  592. },
  593. {
  594. name: "嘉兴",
  595. value: 51,
  596. },
  597. {
  598. name: "长春",
  599. value: 51,
  600. },
  601. {
  602. name: "胶州",
  603. value: 52,
  604. },
  605. {
  606. name: "银川",
  607. value: 52,
  608. },
  609. {
  610. name: "张家港",
  611. value: 52,
  612. },
  613. {
  614. name: "三门峡",
  615. value: 53,
  616. },
  617. {
  618. name: "锦州",
  619. value: 54,
  620. },
  621. {
  622. name: "南昌",
  623. value: 54,
  624. },
  625. {
  626. name: "柳州",
  627. value: 54,
  628. },
  629. {
  630. name: "三亚",
  631. value: 54,
  632. },
  633. {
  634. name: "自贡",
  635. value: 56,
  636. },
  637. {
  638. name: "吉林",
  639. value: 56,
  640. },
  641. {
  642. name: "阳江",
  643. value: 57,
  644. },
  645. {
  646. name: "泸州",
  647. value: 57,
  648. },
  649. {
  650. name: "西宁",
  651. value: 57,
  652. },
  653. {
  654. name: "宜宾",
  655. value: 58,
  656. },
  657. {
  658. name: "呼和浩特",
  659. value: 58,
  660. },
  661. {
  662. name: "成都",
  663. value: 58,
  664. },
  665. {
  666. name: "大同",
  667. value: 58,
  668. },
  669. {
  670. name: "镇江",
  671. value: 59,
  672. },
  673. {
  674. name: "桂林",
  675. value: 59,
  676. },
  677. {
  678. name: "张家界",
  679. value: 59,
  680. },
  681. {
  682. name: "宜兴",
  683. value: 59,
  684. },
  685. {
  686. name: "北海",
  687. value: 60,
  688. },
  689. {
  690. name: "西安",
  691. value: 61,
  692. },
  693. {
  694. name: "金坛",
  695. value: 62,
  696. },
  697. {
  698. name: "东营",
  699. value: 62,
  700. },
  701. {
  702. name: "牡丹江",
  703. value: 63,
  704. },
  705. {
  706. name: "遵义",
  707. value: 63,
  708. },
  709. {
  710. name: "绍兴",
  711. value: 63,
  712. },
  713. {
  714. name: "扬州",
  715. value: 64,
  716. },
  717. {
  718. name: "常州",
  719. value: 64,
  720. },
  721. {
  722. name: "潍坊",
  723. value: 65,
  724. },
  725. {
  726. name: "重庆",
  727. value: 66,
  728. },
  729. {
  730. name: "台州",
  731. value: 67,
  732. },
  733. {
  734. name: "南京",
  735. value: 67,
  736. },
  737. {
  738. name: "滨州",
  739. value: 70,
  740. },
  741. {
  742. name: "贵阳",
  743. value: 71,
  744. },
  745. {
  746. name: "无锡",
  747. value: 71,
  748. },
  749. {
  750. name: "本溪",
  751. value: 71,
  752. },
  753. {
  754. name: "克拉玛依",
  755. value: 72,
  756. },
  757. {
  758. name: "渭南",
  759. value: 72,
  760. },
  761. {
  762. name: "马鞍山",
  763. value: 72,
  764. },
  765. {
  766. name: "宝鸡",
  767. value: 72,
  768. },
  769. {
  770. name: "焦作",
  771. value: 75,
  772. },
  773. {
  774. name: "句容",
  775. value: 75,
  776. },
  777. {
  778. name: "北京",
  779. value: 79,
  780. },
  781. {
  782. name: "徐州",
  783. value: 79,
  784. },
  785. {
  786. name: "衡水",
  787. value: 80,
  788. },
  789. {
  790. name: "包头",
  791. value: 80,
  792. },
  793. {
  794. name: "绵阳",
  795. value: 80,
  796. },
  797. {
  798. name: "乌鲁木齐",
  799. value: 84,
  800. },
  801. {
  802. name: "枣庄",
  803. value: 84,
  804. },
  805. {
  806. name: "杭州",
  807. value: 84,
  808. },
  809. {
  810. name: "淄博",
  811. value: 85,
  812. },
  813. {
  814. name: "鞍山",
  815. value: 86,
  816. },
  817. {
  818. name: "溧阳",
  819. value: 86,
  820. },
  821. {
  822. name: "库尔勒",
  823. value: 86,
  824. },
  825. {
  826. name: "安阳",
  827. value: 90,
  828. },
  829. {
  830. name: "开封",
  831. value: 90,
  832. },
  833. {
  834. name: "济南",
  835. value: 92,
  836. },
  837. {
  838. name: "德阳",
  839. value: 93,
  840. },
  841. {
  842. name: "温州",
  843. value: 95,
  844. },
  845. {
  846. name: "九江",
  847. value: 96,
  848. },
  849. {
  850. name: "邯郸",
  851. value: 98,
  852. },
  853. {
  854. name: "临安",
  855. value: 99,
  856. },
  857. {
  858. name: "兰州",
  859. value: 99,
  860. },
  861. {
  862. name: "沧州",
  863. value: 100,
  864. },
  865. {
  866. name: "临沂",
  867. value: 103,
  868. },
  869. {
  870. name: "南充",
  871. value: 104,
  872. },
  873. {
  874. name: "天津",
  875. value: 105,
  876. },
  877. {
  878. name: "富阳",
  879. value: 106,
  880. },
  881. {
  882. name: "泰安",
  883. value: 112,
  884. },
  885. {
  886. name: "诸暨",
  887. value: 112,
  888. },
  889. {
  890. name: "郑州",
  891. value: 113,
  892. },
  893. {
  894. name: "哈尔滨",
  895. value: 114,
  896. },
  897. {
  898. name: "聊城",
  899. value: 116,
  900. },
  901. {
  902. name: "芜湖",
  903. value: 117,
  904. },
  905. {
  906. name: "唐山",
  907. value: 119,
  908. },
  909. {
  910. name: "平顶山",
  911. value: 119,
  912. },
  913. {
  914. name: "邢台",
  915. value: 119,
  916. },
  917. {
  918. name: "德州",
  919. value: 120,
  920. },
  921. {
  922. name: "济宁",
  923. value: 120,
  924. },
  925. {
  926. name: "荆州",
  927. value: 127,
  928. },
  929. {
  930. name: "宜昌",
  931. value: 130,
  932. },
  933. {
  934. name: "义乌",
  935. value: 132,
  936. },
  937. {
  938. name: "丽水",
  939. value: 133,
  940. },
  941. {
  942. name: "洛阳",
  943. value: 134,
  944. },
  945. {
  946. name: "秦皇岛",
  947. value: 136,
  948. },
  949. {
  950. name: "株洲",
  951. value: 143,
  952. },
  953. {
  954. name: "石家庄",
  955. value: 147,
  956. },
  957. {
  958. name: "莱芜",
  959. value: 148,
  960. },
  961. {
  962. name: "常德",
  963. value: 152,
  964. },
  965. {
  966. name: "保定",
  967. value: 153,
  968. },
  969. {
  970. name: "湘潭",
  971. value: 154,
  972. },
  973. {
  974. name: "金华",
  975. value: 157,
  976. },
  977. {
  978. name: "岳阳",
  979. value: 169,
  980. },
  981. {
  982. name: "长沙",
  983. value: 175,
  984. },
  985. {
  986. name: "衢州",
  987. value: 177,
  988. },
  989. {
  990. name: "廊坊",
  991. value: 193,
  992. },
  993. {
  994. name: "菏泽",
  995. value: 194,
  996. },
  997. {
  998. name: "合肥",
  999. value: 229,
  1000. },
  1001. {
  1002. name: "武汉",
  1003. value: 273,
  1004. },
  1005. {
  1006. name: "大庆",
  1007. value: 279,
  1008. },
  1009. ];
  1010. var convertData = function (data) {
  1011. var res = [];
  1012. for (var i = 0; i < data.length; i++) {
  1013. var geoCoord = geoCoordMap[data[i].name];
  1014. if (geoCoord) {
  1015. res.push({
  1016. name: data[i].name,
  1017. value: geoCoord.concat(data[i].value),
  1018. });
  1019. }
  1020. }
  1021. return res;
  1022. };
  1023. var option = {
  1024. animation: false,
  1025. backgroundColor: "rgba(17, 19, 42, 0.4)",
  1026. title: {
  1027. text: "全国主要城市空气质量",
  1028. subtext: "data from PM25.in",
  1029. x: "center",
  1030. textStyle: {
  1031. color: "#fff",
  1032. },
  1033. },
  1034. tooltip: {
  1035. trigger: "item",
  1036. formatter: function (params) {
  1037. return params.name + " : " + params.value[2];
  1038. },
  1039. },
  1040. legend: {
  1041. orient: "vertical",
  1042. y: "bottom",
  1043. x: "right",
  1044. data: ["pm2.5"],
  1045. textStyle: {
  1046. color: "#fff",
  1047. },
  1048. },
  1049. visualMap: {
  1050. min: 0,
  1051. max: 200,
  1052. calculable: true,
  1053. color: ["#d94e5d", "#eac736", "#50a3ba"],
  1054. textStyle: {
  1055. color: "#fff",
  1056. },
  1057. },
  1058. series: [
  1059. {
  1060. name: "pm2.5",
  1061. type: "scatter",
  1062. coordinateSystem: "mars3dMap",
  1063. data: convertData(datapoint),
  1064. symbolSize: 12,
  1065. label: {
  1066. normal: {
  1067. show: false,
  1068. },
  1069. emphasis: {
  1070. show: false,
  1071. },
  1072. },
  1073. itemStyle: {
  1074. emphasis: {
  1075. borderColor: "#fff",
  1076. borderWidth: 1,
  1077. },
  1078. },
  1079. },
  1080. ],
  1081. };
  1082. return option;
  1083. }
  1084. </script>
  1085. </body>
  1086. </html>