Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
Leaflet快速入門與加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
Leaflet有很多插件，比如地圖上顯示Echarts的遷徙圖的插件leaflet-echarts
插件地址：
https://github.com/wandergis/leaflet-echarts
在線演示地址:
Baidu migration Echarts Map By Leaflet
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、將上面代碼克隆下來，本地新建html以及需要的js文件等
需要一個leaflet-echarts.js的核心js文件，需要一個echart的源碼js文件，還需要一個遷徙數據的mihration.json數據文件。
js文件都可以在代碼倉庫中找到，json文件可以在在線演示地址中訪問接口地址，并且另存為獲取。
2、html中再加上leaflet本身需要的css和js文件
? <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script src="./js/leaflet-echarts.js"></script><script src="./js/echarts.source.js"></script><script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>?為了方便使用ajax模擬請求json數據，這里還引入了jquery。
3、需要使用ajax模擬請求后臺獲取json數據。
??????? $.ajax({url: 'http://localhost:3000/json/migration.json',type: "get",dataType: 'json',success: function (data) {for (var key in data) {data[key].forEach(function (value, index) {data[key][index].num = Number(value.num);})}option.series[0].markLine.data = data.allLine.sort(function (a, b) {return b.num - a.num}).slice(0, 3000).map(function (line) {return [{geoCoord: getGeoCoord(line.start)}, {geoCoord: getGeoCoord(line.end)}]});option.series[0].markPoint.data = data.topCityOut.map(function (point) {return {geoCoord: getGeoCoord(point.name)}});overlay.setOption(option);}});這里可以使用很多種方式，可以使用js請求本地json(注意跨域問題)，或者使用java編寫后臺接口返回數據。
這里使用nginx映射的方式去模擬返回json數據。
Nginx映射本地json文件，配置解決瀏覽器跨域問題，提供前端get請求模擬數據：
Nginx映射本地json文件，配置解決瀏覽器跨域問題，提供前端get請求模擬數據_BADAO_LIUMANG_QIZHI的博客-CSDN博客
4、完整html代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet結合Echarts實現遷徙圖</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style> </head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script src="./js/leaflet-echarts.js"></script><script src="./js/echarts.source.js"></script><script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);var overlay = new L.echartsLayer(map, echarts);var chartsContainer = overlay.getEchartsContainer();var myChart = overlay.initECharts(chartsContainer);window.onresize = myChart.onresize;//這里跟百度echarts的map的option一樣var option = {legend: {show: true,x: 'right',orient: 'vertical',textStyle: {color: 'red'},data: []},series: [{name: "訂單流向",type: 'map',mapType: 'none',itemStyle: {normal: {borderColor: 'rgba(100,149,237,0.2)',borderWidth: 0.5,areaStyle: {color: '#1b1b1b'}}},data: [{}],hoverable: false,clickable: false,roam: true,markLine: {effect: {color: 'rgba(204, 246, 255, 0.09)',show: true,period: 40},bundling: {enable: true},large: true,smooth: true,smoothness: 0.1,symbol: ['none', 'none'],itemStyle: {normal: {lineStyle: {color: 'rgba(252,0,0, 0.05)',type: 'solid',width: 0.5,opacity: 0.2}}},data: []},markPoint: {symbol: 'circle',symbolSize: 1.5,itemStyle: {normal: {color: 'rgba(252,255,0, 0.5)'}},data: []}}]};var geoCoord = {"北京": [116.395645, 39.929986],"上海": [121.487899, 31.249162],"天津": [117.210813, 39.14393],"重慶": [106.530635, 29.544606],"安徽": [117.216005, 31.859252],"合肥": [117.282699, 31.866942],"安慶": [117.058739, 30.537898],"蚌埠": [117.35708, 32.929499],"亳州": [115.787928, 33.871211],"巢湖": [117.88049, 31.608733],"池州": [117.494477, 30.660019],"滁州": [118.32457, 32.317351],"阜陽": [115.820932, 32.901211],"淮北": [116.791447, 33.960023],"淮南": [117.018639, 32.642812],"黃山": [118.29357, 29.734435],"六安": [116.505253, 31.755558],"馬鞍山": [118.515882, 31.688528],"宿州": [116.988692, 33.636772],"銅陵": [117.819429, 30.94093],"蕪湖": [118.384108, 31.36602],"宣城": [118.752096, 30.951642],"福建": [117.984943, 26.050118],"福州": [119.330221, 26.047125],"龍巖": [117.017997, 25.078685],"南平": [118.181883, 26.643626],"寧德": [119.542082, 26.656527],"莆田": [119.077731, 25.44845],"泉州": [118.600362, 24.901652],"三明": [117.642194, 26.270835],"廈門": [118.103886, 24.489231],"漳州": [117.676205, 24.517065],"甘肅": [102.457625, 38.103267],"蘭州": [103.823305, 36.064226],"白銀": [104.171241, 36.546682],"定西": [104.626638, 35.586056],"甘南": [102.917442, 34.992211],"嘉峪關": [98.281635, 39.802397],"金昌": [102.208126, 38.516072],"酒泉": [98.508415, 39.741474],"臨夏": [103.215249, 35.598514],"隴南": [104.934573, 33.39448],"平涼": [106.688911, 35.55011],"慶陽": [107.644227, 35.726801],"天水": [105.736932, 34.584319],"武威": [102.640147, 37.933172],"張掖": [100.459892, 38.93932],"廣東": [113.394818, 23.408004],"廣州": [113.30765, 23.120049],"潮州": [116.630076, 23.661812],"東莞": [113.763434, 23.043024],"佛山": [113.134026, 23.035095],"河源": [114.713721, 23.757251],"惠州": [114.410658, 23.11354],"江門": [113.078125, 22.575117],"揭陽": [116.379501, 23.547999],"茂名": [110.931245, 21.668226],"梅州": [116.126403, 24.304571],"清遠": [113.040773, 23.698469],"汕頭": [116.72865, 23.383908],"汕尾": [115.372924, 22.778731],"韶關": [113.594461, 24.80296],"深圳": [114.025974, 22.546054],"陽江": [111.97701, 21.871517],"云浮": [112.050946, 22.937976],"湛江": [110.365067, 21.257463],"肇慶": [112.479653, 23.078663],"中山": [113.42206, 22.545178],"珠海": [113.562447, 22.256915],"東沙群島": [117.309186, 19.083978],"廣西": [108.924274, 23.552255],"南寧": [108.297234, 22.806493],"百色": [106.631821, 23.901512],"北海": [109.122628, 21.472718],"崇左": [107.357322, 22.415455],"防城港": [108.351791, 21.617398],"桂林": [110.26092, 25.262901],"貴港": [109.613708, 23.103373],"河池": [108.069948, 24.699521],"賀州": [111.552594, 24.411054],"來賓": [109.231817, 23.741166],"柳州": [109.422402, 24.329053],"欽州": [108.638798, 21.97335],"梧州": [111.305472, 23.485395],"玉林": [110.151676, 22.643974],"貴州": [106.734996, 26.902826],"貴陽": [106.709177, 26.629907],"安順": [105.92827, 26.228595],"畢節": [105.300492, 27.302612],"六盤水": [104.852087, 26.591866],"銅仁": [109.196161, 27.726271],"遵義": [106.93126, 27.699961],"黔西南": [104.900558, 25.095148],"黔東南": [107.985353, 26.583992],"黔南": [107.523205, 26.264536],"海南": [100.624066, 36.284364],"海口": [110.330802, 20.022071],"白沙": [109.358586, 19.216056],"保亭": [109.656113, 18.597592],"昌江": [109.0113, 19.222483],"儋州": [109.413973, 19.571153],"澄邁": [109.996736, 19.693135],"東方": [108.85101, 18.998161],"定安": [110.32009, 19.490991],"瓊海": [110.414359, 19.21483],"瓊中": [109.861849, 19.039771],"樂東": [109.062698, 18.658614],"臨高": [109.724101, 19.805922],"陵水": [109.948661, 18.575985],"三亞": [109.522771, 18.257776],"屯昌": [110.063364, 19.347749],"萬寧": [110.292505, 18.839886],"文昌": [110.780909, 19.750947],"五指山": [109.51775, 18.831306],"三沙": [112.342491, 16.843901],"西沙群島": [111.79977, 16.219423],"南沙群島": [114.736439, 10.370353],"河北": [115.661434, 38.61384],"石家莊": [114.522082, 38.048958],"保定": [115.49481, 38.886565],"滄州": [116.863806, 38.297615],"承德": [117.933822, 40.992521],"邯鄲": [114.482694, 36.609308],"衡水": [115.686229, 37.746929],"廊坊": [116.703602, 39.518611],"秦皇島": [119.604368, 39.945462],"唐山": [118.183451, 39.650531],"邢臺": [114.520487, 37.069531],"張家口": [114.893782, 40.811188],"河南": [113.486804, 34.157184],"濟源": [112.609183, 35.073092],"鄭州": [113.649644, 34.75661],"安陽": [114.351807, 36.110267],"鶴壁": [114.29777, 35.755426],"焦作": [113.211836, 35.234608],"開封": [114.351642, 34.801854],"洛陽": [112.447525, 34.657368],"漯河": [114.046061, 33.576279],"南陽": [112.542842, 33.01142],"平頂山": [113.300849, 33.745301],"濮陽": [115.026627, 35.753298],"三門峽": [111.181262, 34.78332],"商丘": [115.641886, 34.438589],"新鄉": [113.91269, 35.307258],"信陽": [114.085491, 32.128582],"許昌": [113.835312, 34.02674],"周口": [114.654102, 33.623741],"駐馬店": [114.049154, 32.983158],"黑龍江": [128.047414, 47.356592],"哈爾濱": [126.657717, 45.773225],"大慶": [125.02184, 46.596709],"大興安嶺": [124.196104, 51.991789],"鶴崗": [130.292472, 47.338666],"黑河": [127.50083, 50.25069],"雞西": [130.941767, 45.32154],"佳木斯": [130.284735, 46.81378],"牡丹江": [129.608035, 44.588521],"七臺河": [131.019048, 45.775005],"齊齊哈爾": [123.987289, 47.3477],"雙鴨山": [131.171402, 46.655102],"綏化": [126.989095, 46.646064],"伊春": [128.910766, 47.734685],"湖北": [112.410562, 31.209316],"武漢": [114.3162, 30.581084],"鄂州": [114.895594, 30.384439],"恩施": [109.517433, 30.308978],"黃岡": [114.906618, 30.446109],"黃石": [115.050683, 30.216127],"荊門": [112.21733, 31.042611],"荊州": [112.241866, 30.332591],"潛江": [112.768768, 30.343116],"神農架": [110.487231, 31.595768],"十堰": [110.801229, 32.636994],"隨州": [113.379358, 31.717858],"天門": [113.12623, 30.649047],"仙桃": [113.387448, 30.293966],"咸寧": [114.300061, 29.880657],"襄陽": [112.176326, 32.094934],"孝感": [113.935734, 30.927955],"宜昌": [111.310981, 30.732758],"湖南": [111.720664, 27.695864],"長沙": [112.979353, 28.213478],"常德": [111.653718, 29.012149],"郴州": [113.037704, 25.782264],"衡陽": [112.583819, 26.898164],"懷化": [109.986959, 27.557483],"婁底": [111.996396, 27.741073],"邵陽": [111.461525, 27.236811],"湘潭": [112.935556, 27.835095],"湘西": [109.745746, 28.317951],"益陽": [112.366547, 28.588088],"永州": [111.614648, 26.435972],"岳陽": [113.146196, 29.378007],"張家界": [110.48162, 29.124889],"株洲": [113.131695, 27.827433],"江蘇": [119.368489, 33.013797],"南京": [118.778074, 32.057236],"常州": [119.981861, 31.771397],"淮安": [119.030186, 33.606513],"連云港": [119.173872, 34.601549],"南通": [120.873801, 32.014665],"蘇州": [120.619907, 31.317987],"宿遷": [118.296893, 33.95205],"泰州": [119.919606, 32.476053],"無錫": [120.305456, 31.570037],"徐州": [117.188107, 34.271553],"鹽城": [120.148872, 33.379862],"揚州": [119.427778, 32.408505],"鎮江": [119.455835, 32.204409],"江西": [115.676082, 27.757258],"南昌": [115.893528, 28.689578],"撫州": [116.360919, 27.954545],"贛州": [114.935909, 25.845296],"吉安": [114.992039, 27.113848],"景德鎮": [117.186523, 29.303563],"九江": [115.999848, 29.71964],"萍鄉": [113.859917, 27.639544],"上饒": [117.955464, 28.457623],"新余": [114.947117, 27.822322],"宜春": [114.400039, 27.81113],"鷹潭": [117.03545, 28.24131],"吉林": [126.564544, 43.871988],"長春": [125.313642, 43.898338],"白城": [122.840777, 45.621086],"白山": [126.435798, 41.945859],"遼源": [125.133686, 42.923303],"四平": [124.391382, 43.175525],"松原": [124.832995, 45.136049],"通化": [125.94265, 41.736397],"延邊": [129.485902, 42.896414],"遼寧": [122.753592, 41.6216],"沈陽": [123.432791, 41.808645],"鞍山": [123.007763, 41.118744],"本溪": [123.778062, 41.325838],"朝陽": [120.446163, 41.571828],"大連": [121.593478, 38.94871],"丹東": [124.338543, 40.129023],"撫順": [123.92982, 41.877304],"阜新": [121.660822, 42.01925],"葫蘆島": [120.860758, 40.74303],"錦州": [121.147749, 41.130879],"遼陽": [123.172451, 41.273339],"盤錦": [122.073228, 41.141248],"鐵嶺": [123.85485, 42.299757],"營口": [122.233391, 40.668651],"內蒙古": [114.415868, 43.468238],"呼和浩特": [111.660351, 40.828319],"阿拉善": [105.695683, 38.843075],"包頭": [109.846239, 40.647119],"巴彥淖爾": [107.423807, 40.76918],"赤峰": [118.930761, 42.297112],"鄂爾多斯": [109.993706, 39.81649],"呼倫貝爾": [119.760822, 49.201636],"通遼": [122.260363, 43.633756],"烏海": [106.831999, 39.683177],"烏蘭察布": [113.112846, 41.022363],"錫林郭勒": [116.02734, 43.939705],"興安盟": [122.048167, 46.083757],"寧夏": [106.155481, 37.321323],"銀川": [106.206479, 38.502621],"固原": [106.285268, 36.021523],"石嘴山": [106.379337, 39.020223],"吳忠": [106.208254, 37.993561],"中衛": [105.196754, 37.521124],"青海": [96.202544, 35.499761],"西寧": [101.767921, 36.640739],"果洛": [100.223723, 34.480485],"海東": [102.085207, 36.51761],"海北": [100.879802, 36.960654],"海西": [97.342625, 37.373799],"黃南": [102.0076, 35.522852],"玉樹": [97.013316, 33.00624],"山東": [118.527663, 36.09929],"濟南": [117.024967, 36.682785],"濱州": [117.968292, 37.405314],"東營": [118.583926, 37.487121],"德州": [116.328161, 37.460826],"菏澤": [115.46336, 35.26244],"濟寧": [116.600798, 35.402122],"萊蕪": [117.684667, 36.233654],"聊城": [115.986869, 36.455829],"臨沂": [118.340768, 35.072409],"青島": [120.384428, 36.105215],"日照": [119.50718, 35.420225],"泰安": [117.089415, 36.188078],"威海": [122.093958, 37.528787],"濰坊": [119.142634, 36.716115],"煙臺": [121.309555, 37.536562],"棗莊": [117.279305, 34.807883],"淄博": [118.059134, 36.804685],"山西": [112.515496, 37.866566],"太原": [112.550864, 37.890277],"長治": [113.120292, 36.201664],"大同": [113.290509, 40.113744],"晉城": [112.867333, 35.499834],"晉中": [112.738514, 37.693362],"臨汾": [111.538788, 36.099745],"呂梁": [111.143157, 37.527316],"朔州": [112.479928, 39.337672],"忻州": [112.727939, 38.461031],"陽泉": [113.569238, 37.869529],"運城": [111.006854, 35.038859],"陜西": [109.503789, 35.860026],"西安": [108.953098, 34.2778],"安康": [109.038045, 32.70437],"寶雞": [107.170645, 34.364081],"漢中": [107.045478, 33.081569],"商洛": [109.934208, 33.873907],"銅川": [108.968067, 34.908368],"渭南": [109.483933, 34.502358],"咸陽": [108.707509, 34.345373],"延安": [109.50051, 36.60332],"榆林": [109.745926, 38.279439],"四川": [102.89916, 30.367481],"成都": [104.067923, 30.679943],"阿壩": [102.228565, 31.905763],"巴中": [106.757916, 31.869189],"達州": [107.494973, 31.214199],"德陽": [104.402398, 31.13114],"甘孜": [101.969232, 30.055144],"廣安": [106.63572, 30.463984],"廣元": [105.819687, 32.44104],"樂山": [103.760824, 29.600958],"涼山": [102.259591, 27.892393],"瀘州": [105.44397, 28.89593],"南充": [106.105554, 30.800965],"眉山": [103.84143, 30.061115],"綿陽": [104.705519, 31.504701],"內江": [105.073056, 29.599462],"攀枝花": [101.722423, 26.587571],"遂寧": [105.564888, 30.557491],"雅安": [103.009356, 29.999716],"宜賓": [104.633019, 28.769675],"資陽": [104.63593, 30.132191],"自貢": [104.776071, 29.359157],"西藏": [89.137982, 31.367315],"拉薩": [91.111891, 29.662557],"阿里": [81.107669, 30.404557],"昌都": [97.185582, 31.140576],"林芝": [94.349985, 29.666941],"那曲": [92.067018, 31.48068],"日喀則": [88.891486, 29.269023],"山南": [91.750644, 29.229027],"新疆": [85.614899, 42.127001],"烏魯木齊": [87.564988, 43.84038],"阿拉爾": [81.291737, 40.61568],"阿克蘇": [80.269846, 41.171731],"阿勒泰": [88.137915, 47.839744],"巴音郭楞": [86.121688, 41.771362],"博爾塔拉": [82.052436, 44.913651],"昌吉": [87.296038, 44.007058],"哈密": [93.528355, 42.858596],"和田": [79.930239, 37.116774],"喀什": [75.992973, 39.470627],"克拉瑪依": [84.88118, 45.594331],"克孜勒蘇": [76.137564, 39.750346],"石河子": [86.041865, 44.308259],"塔城": [82.974881, 46.758684],"圖木舒克": [79.198155, 39.889223],"吐魯番": [89.181595, 42.96047],"五家渠": [87.565449, 44.368899],"伊犁": [81.297854, 43.922248],"云南": [101.592952, 24.864213],"昆明": [102.714601, 25.049153],"保山": [99.177996, 25.120489],"楚雄": [101.529382, 25.066356],"大理": [100.223675, 25.5969],"德宏": [98.589434, 24.44124],"迪慶": [99.713682, 27.831029],"紅河": [103.384065, 23.367718],"麗江": [100.229628, 26.875351],"臨滄": [100.092613, 23.887806],"怒江": [98.859932, 25.860677],"普洱": [100.980058, 22.788778],"曲靖": [103.782539, 25.520758],"昭通": [103.725021, 27.340633],"文山": [104.089112, 23.401781],"西雙版納": [100.803038, 22.009433],"玉溪": [102.545068, 24.370447],"浙江": [119.957202, 29.159494],"杭州": [120.219375, 30.259244],"湖州": [120.137243, 30.877925],"嘉興": [120.760428, 30.773992],"金華": [119.652576, 29.102899],"麗水": [119.929576, 28.4563],"寧波": [121.579006, 29.885259],"衢州": [118.875842, 28.95691],"紹興": [120.592467, 30.002365],"臺州": [121.440613, 28.668283],"溫州": [120.690635, 28.002838],"舟山": [122.169872, 30.03601],"香港": [114.186124, 22.293586],"澳門": [113.557519, 22.204118],"臺灣": [120.961454, 23.80406],"臺北": [121.489971, 25.094466]};function getGeoCoord(name) {var city = name.split('_').pop();var coord;coord = geoCoord[city];return coord;}//http://wandergis.com/leaflet-echarts/src/migration.json$.ajax({url: 'http://localhost:3000/json/migration.json',type: "get",dataType: 'json',success: function (data) {for (var key in data) {data[key].forEach(function (value, index) {data[key][index].num = Number(value.num);})}option.series[0].markLine.data = data.allLine.sort(function (a, b) {return b.num - a.num}).slice(0, 3000).map(function (line) {return [{geoCoord: getGeoCoord(line.start)}, {geoCoord: getGeoCoord(line.end)}]});option.series[0].markPoint.data = data.topCityOut.map(function (point) {return {geoCoord: getGeoCoord(point.name)}});overlay.setOption(option);}});</script> </body></html>?5、本地運行效果，這里的地圖底圖使用的是osm地圖
?
總結
以上是生活随笔為你收集整理的Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nginx映射本地json文件，配置解决
- 下一篇： Leaflet中使用leaflet-ec