• Leaflet结合Echarts实现迁徙图

    效果图如下：

    1. html>
    2. <html>
    3.  
    4. 	<head>
    5. 		<title>Leaflet结合Echarts4实现迁徙图title>
    6. 		<meta charset="utf-8" />
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 		<style>
    9. 			html,
    10. 			body,
    11. 			#map {
    12. 				height: 100%;
    13. 				padding: 0;
    14. 				margin: 0;
    15. 			}
    16. 		style>
    17. 		<script src="../../js/prjconfig.js" maptype="leaflet">script>
    18. 	head>
    19.  
    20. 	<body>
    21. 		<div id="map">div>
    22. 		<script>
    23. 			var map = L.map('map', {
    24. 				crs: L.CRS.EPSG4326, //L.CRS.EPSG3857
    25. 				center: [MAPINIT.Location.lat, MAPINIT.Location.lon], //[40.76339, 106.9477844],
    26. 				zoom: MAPINIT.Location.zoom,
    27. 				minZoom: MAPINIT.zoomsExtent[0],
    28. 				maxZoom: MAPINIT.zoomsExtent[1],
    29. 				zoomControl: true
    30. 			});
    31. 			//使用WMTS Key-Value加载地图服务
    32. 			let _getc = "http://192.168.1.212:8095/server/default/getTile/wmts?request=GetCapabilities&service=wmts&layer=yx";
    33. 			MAPCONFIG.MAPWMTS_IMG = "http://192.168.1.212:8095/server/vtile/getTile/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=yx&STYLE=default&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=''";
    34. 			L.tileLayer(MAPCONFIG.MAPWMTS_IMG, {
    35. 				zoomOffset: 1
    36. 			}).addTo(map);
    37. 			
    38. 			map.setView(L.latLng(37.550339, 104.114129), 4); //设置缩放级别及中心点
    39. 			//Echarts相关options配置
    40. 			var geoCoordMap = {
    41. 				"海门": [121.15, 31.89],
    42. 				"鄂尔多斯": [109.781327, 39.608266],
    43. 				"招远": [120.38, 37.35],
    44. 				"舟山": [122.207216, 29.985295],
    45. 				"齐齐哈尔": [123.97, 47.33],
    46. 				"盐城": [120.13, 33.38],
    47. 				"赤峰": [118.87, 42.28],
    48. 				"青岛": [120.33, 36.07],
    49. 				"乳山": [121.52, 36.89],
    50. 				"金昌": [102.188043, 38.520089],
    51. 				"泉州": [118.58, 24.93],
    52. 				"莱西": [120.53, 36.86],
    53. 				"日照": [119.46, 35.42],
    54. 				"胶南": [119.97, 35.88],
    55. 				"南通": [121.05, 32.08],
    56. 				"拉萨": [91.11, 29.97],
    57. 				"云浮": [112.02, 22.93],
    58. 				"梅州": [116.1, 24.55],
    59. 				"文登": [122.05, 37.2],
    60. 				"上海": [121.48, 31.22],
    61. 				"攀枝花": [101.718637, 26.582347],
    62. 				"威海": [122.1, 37.5],
    63. 				"承德": [117.93, 40.97],
    64. 				"厦门": [118.1, 24.46],
    65. 				"汕尾": [115.375279, 22.786211],
    66. 				"潮州": [116.63, 23.68],
    67. 				"丹东": [124.37, 40.13],
    68. 				"太仓": [121.1, 31.45],
    69. 				"曲靖": [103.79, 25.51],
    70. 				"烟台": [121.39, 37.52],
    71. 				"福州": [119.3, 26.08],
    72. 				"瓦房店": [121.979603, 39.627114],
    73. 				"即墨": [120.45, 36.38],
    74. 				"抚顺": [123.97, 41.97],
    75. 				"玉溪": [102.52, 24.35],
    76. 				"张家口": [114.87, 40.82],
    77. 				"阳泉": [113.57, 37.85],
    78. 				"莱州": [119.942327, 37.177017],
    79. 				"湖州": [120.1, 30.86],
    80. 				"汕头": [116.69, 23.39],
    81. 				"昆山": [120.95, 31.39],
    82. 				"宁波": [121.56, 29.86],
    83. 				"湛江": [110.359377, 21.270708],
    84. 				"揭阳": [116.35, 23.55],
    85. 				"荣成": [122.41, 37.16],
    86. 				"连云港": [119.16, 34.59],
    87. 				"葫芦岛": [120.836932, 40.711052],
    88. 				"常熟": [120.74, 31.64],
    89. 				"东莞": [113.75, 23.04],
    90. 				"河源": [114.68, 23.73],
    91. 				"淮安": [119.15, 33.5],
    92. 				"泰州": [119.9, 32.49],
    93. 				"南宁": [108.33, 22.84],
    94. 				"营口": [122.18, 40.65],
    95. 				"惠州": [114.4, 23.09],
    96. 				"江阴": [120.26, 31.91],
    97. 				"蓬莱": [120.75, 37.8],
    98. 				"韶关": [113.62, 24.84],
    99. 				"嘉峪关": [98.289152, 39.77313],
    100. 				"广州": [113.23, 23.16],
    101. 				"延安": [109.47, 36.6],
    102. 				"太原": [112.53, 37.87],
    103. 				"清远": [113.01, 23.7],
    104. 				"中山": [113.38, 22.52],
    105. 				"昆明": [102.73, 25.04],
    106. 				"寿光": [118.73, 36.86],
    107. 				"盘锦": [122.070714, 41.119997],
    108. 				"长治": [113.08, 36.18],
    109. 				"深圳": [114.07, 22.62],
    110. 				"珠海": [113.52, 22.3],
    111. 				"宿迁": [118.3, 33.96],
    112. 				"咸阳": [108.72, 34.36],
    113. 				"铜川": [109.11, 35.09],
    114. 				"平度": [119.97, 36.77],
    115. 				"佛山": [113.11, 23.05],
    116. 				"海口": [110.35, 20.02],
    117. 				"江门": [113.06, 22.61],
    118. 				"章丘": [117.53, 36.72],
    119. 				"肇庆": [112.44, 23.05],
    120. 				"大连": [121.62, 38.92],
    121. 				"临汾": [111.5, 36.08],
    122. 				"吴江": [120.63, 31.16],
    123. 				"石嘴山": [106.39, 39.04],
    124. 				"沈阳": [123.38, 41.8],
    125. 				"苏州": [120.62, 31.32],
    126. 				"茂名": [110.88, 21.68],
    127. 				"嘉兴": [120.76, 30.77],
    128. 				"长春": [125.35, 43.88],
    129. 				"胶州": [120.03336, 36.264622],
    130. 				"银川": [106.27, 38.47],
    131. 				"张家港": [120.555821, 31.875428],
    132. 				"三门峡": [111.19, 34.76],
    133. 				"锦州": [121.15, 41.13],
    134. 				"南昌": [115.89, 28.68],
    135. 				"柳州": [109.4, 24.33],
    136. 				"三亚": [109.511909, 18.252847],
    137. 				"自贡": [104.778442, 29.33903],
    138. 				"吉林": [126.57, 43.87],
    139. 				"阳江": [111.95, 21.85],
    140. 				"泸州": [105.39, 28.91],
    141. 				"西宁": [101.74, 36.56],
    142. 				"宜宾": [104.56, 29.77],
    143. 				"呼和浩特": [111.65, 40.82],
    144. 				"成都": [104.06, 30.67],
    145. 				"大同": [113.3, 40.12],
    146. 				"镇江": [119.44, 32.2],
    147. 				"桂林": [110.28, 25.29],
    148. 				"张家界": [110.479191, 29.117096],
    149. 				"宜兴": [119.82, 31.36],
    150. 				"北海": [109.12, 21.49],
    151. 				"西安": [108.95, 34.27],
    152. 				"金坛": [119.56, 31.74],
    153. 				"东营": [118.49, 37.46],
    154. 				"牡丹江": [129.58, 44.6],
    155. 				"遵义": [106.9, 27.7],
    156. 				"绍兴": [120.58, 30.01],
    157. 				"扬州": [119.42, 32.39],
    158. 				"常州": [119.95, 31.79],
    159. 				"潍坊": [119.1, 36.62],
    160. 				"重庆": [106.54, 29.59],
    161. 				"台州": [121.420757, 28.656386],
    162. 				"南京": [118.78, 32.04],
    163. 				"滨州": [118.03, 37.36],
    164. 				"贵阳": [106.71, 26.57],
    165. 				"无锡": [120.29, 31.59],
    166. 				"本溪": [123.73, 41.3],
    167. 				"克拉玛依": [84.77, 45.59],
    168. 				"渭南": [109.5, 34.52],
    169. 				"马鞍山": [118.48, 31.56],
    170. 				"宝鸡": [107.15, 34.38],
    171. 				"焦作": [113.21, 35.24],
    172. 				"句容": [119.16, 31.95],
    173. 				"北京": [116.46, 39.92],
    174. 				"徐州": [117.2, 34.26],
    175. 				"衡水": [115.72, 37.72],
    176. 				"包头": [110, 40.58],
    177. 				"绵阳": [104.73, 31.48],
    178. 				"乌鲁木齐": [87.68, 43.77],
    179. 				"枣庄": [117.57, 34.86],
    180. 				"杭州": [120.19, 30.26],
    181. 				"淄博": [118.05, 36.78],
    182. 				"鞍山": [122.85, 41.12],
    183. 				"溧阳": [119.48, 31.43],
    184. 				"库尔勒": [86.06, 41.68],
    185. 				"安阳": [114.35, 36.1],
    186. 				"开封": [114.35, 34.79],
    187. 				"济南": [117, 36.65],
    188. 				"德阳": [104.37, 31.13],
    189. 				"温州": [120.65, 28.01],
    190. 				"九江": [115.97, 29.71],
    191. 				"邯郸": [114.47, 36.6],
    192. 				"临安": [119.72, 30.23],
    193. 				"兰州": [103.73, 36.03],
    194. 				"沧州": [116.83, 38.33],
    195. 				"临沂": [118.35, 35.05],
    196. 				"南充": [106.110698, 30.837793],
    197. 				"天津": [117.2, 39.13],
    198. 				"富阳": [119.95, 30.07],
    199. 				"泰安": [117.13, 36.18],
    200. 				"诸暨": [120.23, 29.71],
    201. 				"郑州": [113.65, 34.76],
    202. 				"哈尔滨": [126.63, 45.75],
    203. 				"聊城": [115.97, 36.45],
    204. 				"芜湖": [118.38, 31.33],
    205. 				"唐山": [118.02, 39.63],
    206. 				"平顶山": [113.29, 33.75],
    207. 				"邢台": [114.48, 37.05],
    208. 				"德州": [116.29, 37.45],
    209. 				"济宁": [116.59, 35.38],
    210. 				"荆州": [112.239741, 30.335165],
    211. 				"宜昌": [111.3, 30.7],
    212. 				"义乌": [120.06, 29.32],
    213. 				"丽水": [119.92, 28.45],
    214. 				"洛阳": [112.44, 34.7],
    215. 				"秦皇岛": [119.57, 39.95],
    216. 				"株洲": [113.16, 27.83],
    217. 				"石家庄": [114.48, 38.03],
    218. 				"莱芜": [117.67, 36.19],
    219. 				"常德": [111.69, 29.05],
    220. 				"保定": [115.48, 38.85],
    221. 				"湘潭": [112.91, 27.87],
    222. 				"金华": [119.64, 29.12],
    223. 				"岳阳": [113.09, 29.37],
    224. 				"长沙": [113, 28.21],
    225. 				"衢州": [118.88, 28.97],
    226. 				"廊坊": [116.7, 39.53],
    227. 				"菏泽": [115.480656, 35.23375],
    228. 				"合肥": [117.27, 31.86],
    229. 				"武汉": [114.31, 30.52],
    230. 				"大庆": [125.03, 46.58]
    231. 			};
    232.  
    233. 			var BJData = [
    234. 				[{
    235. 					name: '北京'
    236. 				}, {
    237. 					name: '上海',
    238. 					value: 95
    239. 				}],
    240. 				[{
    241. 					name: '北京'
    242. 				}, {
    243. 					name: '广州',
    244. 					value: 90
    245. 				}],
    246. 				[{
    247. 					name: '北京'
    248. 				}, {
    249. 					name: '大连',
    250. 					value: 80
    251. 				}],
    252. 				[{
    253. 					name: '北京'
    254. 				}, {
    255. 					name: '南宁',
    256. 					value: 70
    257. 				}],
    258. 				[{
    259. 					name: '北京'
    260. 				}, {
    261. 					name: '南昌',
    262. 					value: 60
    263. 				}],
    264. 				[{
    265. 					name: '北京'
    266. 				}, {
    267. 					name: '拉萨',
    268. 					value: 50
    269. 				}],
    270. 				[{
    271. 					name: '北京'
    272. 				}, {
    273. 					name: '长春',
    274. 					value: 40
    275. 				}],
    276. 				[{
    277. 					name: '北京'
    278. 				}, {
    279. 					name: '包头',
    280. 					value: 30
    281. 				}],
    282. 				[{
    283. 					name: '北京'
    284. 				}, {
    285. 					name: '重庆',
    286. 					value: 20
    287. 				}],
    288. 				[{
    289. 					name: '北京'
    290. 				}, {
    291. 					name: '常州',
    292. 					value: 10
    293. 				}]
    294. 			];
    295.  
    296. 			var SHData = [
    297. 				[{
    298. 					name: '上海'
    299. 				}, {
    300. 					name: '包头',
    301. 					value: 95
    302. 				}],
    303. 				[{
    304. 					name: '上海'
    305. 				}, {
    306. 					name: '昆明',
    307. 					value: 90
    308. 				}],
    309. 				[{
    310. 					name: '上海'
    311. 				}, {
    312. 					name: '广州',
    313. 					value: 80
    314. 				}],
    315. 				[{
    316. 					name: '上海'
    317. 				}, {
    318. 					name: '郑州',
    319. 					value: 70
    320. 				}],
    321. 				[{
    322. 					name: '上海'
    323. 				}, {
    324. 					name: '长春',
    325. 					value: 60
    326. 				}],
    327. 				[{
    328. 					name: '上海'
    329. 				}, {
    330. 					name: '重庆',
    331. 					value: 50
    332. 				}],
    333. 				[{
    334. 					name: '上海'
    335. 				}, {
    336. 					name: '长沙',
    337. 					value: 40
    338. 				}],
    339. 				[{
    340. 					name: '上海'
    341. 				}, {
    342. 					name: '北京',
    343. 					value: 30
    344. 				}],
    345. 				[{
    346. 					name: '上海'
    347. 				}, {
    348. 					name: '丹东',
    349. 					value: 20
    350. 				}],
    351. 				[{
    352. 					name: '上海'
    353. 				}, {
    354. 					name: '大连',
    355. 					value: 10
    356. 				}]
    357. 			];
    358.  
    359. 			var GZData = [
    360. 				[{
    361. 					name: '广州'
    362. 				}, {
    363. 					name: '福州',
    364. 					value: 95
    365. 				}],
    366. 				[{
    367. 					name: '广州'
    368. 				}, {
    369. 					name: '太原',
    370. 					value: 90
    371. 				}],
    372. 				[{
    373. 					name: '广州'
    374. 				}, {
    375. 					name: '长春',
    376. 					value: 80
    377. 				}],
    378. 				[{
    379. 					name: '广州'
    380. 				}, {
    381. 					name: '重庆',
    382. 					value: 70
    383. 				}],
    384. 				[{
    385. 					name: '广州'
    386. 				}, {
    387. 					name: '西安',
    388. 					value: 60
    389. 				}],
    390. 				[{
    391. 					name: '广州'
    392. 				}, {
    393. 					name: '成都',
    394. 					value: 50
    395. 				}],
    396. 				[{
    397. 					name: '广州'
    398. 				}, {
    399. 					name: '常州',
    400. 					value: 40
    401. 				}],
    402. 				[{
    403. 					name: '广州'
    404. 				}, {
    405. 					name: '北京',
    406. 					value: 30
    407. 				}],
    408. 				[{
    409. 					name: '广州'
    410. 				}, {
    411. 					name: '北海',
    412. 					value: 20
    413. 				}],
    414. 				[{
    415. 					name: '广州'
    416. 				}, {
    417. 					name: '海口',
    418. 					value: 10
    419. 				}]
    420. 			];
    421.  
    422. 			var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
    423.  
    424. 			var convertData = function(data) {
    425. 				var res = [];
    426. 				for(var i = 0; i < data.length; i++) {
    427. 					var dataItem = data[i];
    428. 					var fromCoord = geoCoordMap[dataItem[0].name];
    429. 					var toCoord = geoCoordMap[dataItem[1].name];
    430. 					if(fromCoord && toCoord) {
    431. 						res.push({
    432. 							fromName: dataItem[0].name,
    433. 							toName: dataItem[1].name,
    434. 							coords: [fromCoord, toCoord],
    435. 							value: dataItem[1].value
    436. 						});
    437. 					}
    438. 				}
    439. 				return res;
    440. 			};
    441.  
    442. 			var color = ['#a6c84c', '#ffa022', '#46bee9'];
    443. 			var series = [];
    444. 			[
    445. 				['北京', BJData],
    446. 				['上海', SHData],
    447. 				['广州', GZData]
    448. 			].forEach(function(item, i) {
    449. 				series.push({
    450. 					name: item[0] + ' Top10',
    451. 					type: 'lines',
    452. 					coordinateSystem: 'geo',
    453. 					zlevel: 1,
    454. 					effect: {
    455. 						show: true,
    456. 						period: 6,
    457. 						trailLength: 0.7,
    458. 						color: '#fff',
    459. 						symbolSize: 3
    460. 					},
    461. 					lineStyle: {
    462. 						normal: {
    463. 							color: color[i],
    464. 							width: 0,
    465. 							curveness: 0.2
    466. 						}
    467. 					},
    468. 					data: convertData(item[1])
    469. 				}, {
    470. 					name: item[0] + ' Top10',
    471. 					type: 'lines',
    472. 					coordinateSystem: 'geo',
    473. 					zlevel: 2,
    474. 					symbol: ['none', 'arrow'],
    475. 					symbolSize: 10,
    476. 					effect: {
    477. 						show: true,
    478. 						period: 6,
    479. 						trailLength: 0,
    480. 						symbol: planePath,
    481. 						symbolSize: 15
    482. 					},
    483. 					lineStyle: {
    484. 						normal: {
    485. 							color: color[i],
    486. 							width: 1,
    487. 							opacity: 0.6,
    488. 							curveness: 0.2
    489. 						}
    490. 					},
    491. 					data: convertData(item[1])
    492. 				}, {
    493. 					name: item[0] + ' Top10',
    494. 					type: 'effectScatter',
    495. 					coordinateSystem: 'geo',
    496. 					zlevel: 2,
    497. 					rippleEffect: {
    498. 						brushType: 'stroke'
    499. 					},
    500. 					label: {
    501. 						normal: {
    502. 							show: true,
    503. 							position: 'right',
    504. 							formatter: '{b}'
    505. 						}
    506. 					},
    507. 					symbolSize: function(val) {
    508. 						return val[2] / 8;
    509. 					},
    510. 					itemStyle: {
    511. 						normal: {
    512. 							color: color[i]
    513. 						}
    514. 					},
    515. 					data: item[1].map(function(dataItem) {
    516. 						return {
    517. 							name: dataItem[1].name,
    518. 							value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
    519. 						};
    520. 					})
    521. 				});
    522. 			});
    523.  
    524. 			var option = {
    525. 				title: {
    526. 					text: '模拟迁徙图',
    527. 					subtext: '',
    528. 					left: 'center',
    529. 					textStyle: {
    530. 						color: '#fff'
    531. 					}
    532. 				},
    533. 				tooltip: {
    534. 					trigger: 'item',
    535. 					formatter: '{b}'
    536. 				},
    537. 				geo: {
    538. 					//map: 'china',
    539. 					label: {
    540. 						emphasis: {
    541. 							show: false
    542. 						}
    543. 					},
    544. 					itemStyle: {
    545. 						normal: {
    546. 							areaColor: '#323c48',
    547. 							borderColor: '#111'
    548. 						},
    549. 						emphasis: {
    550. 							areaColor: '#2a333d'
    551. 						}
    552. 					}
    553. 				},
    554. 				series: series
    555. 			};
    556. 			//将Echarts加到地图上
    557. 			var layerWork = L.overlayEcharts(option).addTo(map);
    558. 		script>
    559.  
    560. 	body>
    561.  
    562. html>

  • 相关阅读:
    Tomcat8 任意写文件PUT方法 (CVE-2017-12615)
    利用亚马逊 云服务器 EC2 和S3免费套餐搭建私人网盘
    初学Bootstrap
    PTA 甲级 1044 Shopping in Mars
    云原生|kubernetes 你真的学废了吗---实战k8s 一（jsonpath实战）
    AWS无服务器 应用程序开发—第十六章 CI/CD CodeBuild
    淘宝/天猫按图搜索淘宝商品（拍立淘） API 返回值说明
    312.戳气球
    基本组网步骤
    springcloud+nacos+gateway约会
  • 原文地址：https://blog.csdn.net/czj_com/article/details/134557886