leaflet 結合 Echarts4 實現遷徙圖(附源碼下載)

前言

leaflet 入門開發系列環境知識點了解：

• leaflet api文檔介紹，詳細介紹 leaflet 每一個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，很是有用

內容概覽

leaflet 結合 Echarts4 實現遷徙圖
源代碼 demo 下載

本篇 demo 利用 leaflet api 結合 Echarts4 實現遷徙圖功能，效果圖以下：

實現思路：在leaflet 結合 Echarts4 實現散點圖(附源碼下載)基礎上實現的

• 地圖初始化

var map = L.map('map'); L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map); map.setView(L.latLng(37.550339, 104.114129), 4); //設置縮放級別及中心點

• Echarts 相關 options 配置

var geoCoordMap = { "海門":[121.15,31.89], "鄂爾多斯":[109.781327,39.608266], …… }; var BJData = [ [{name:'北京'}, {name:'上海',value:95}], [{name:'北京'}, {name:'廣州',value:90}], [{name:'北京'}, {name:'大連',value:80}], [{name:'北京'}, {name:'南寧',value:70}], [{name:'北京'}, {name:'南昌',value:60}], [{name:'北京'}, {name:'拉薩',value:50}], [{name:'北京'}, {name:'長春',value:40}], [{name:'北京'}, {name:'包頭',value:30}], [{name:'北京'}, {name:'重慶',value:20}], [{name:'北京'}, {name:'常州',value:10}] ]; var SHData = [ [{name:'上海'},{name:'包頭',value:95}], [{name:'上海'},{name:'昆明',value:90}], [{name:'上海'},{name:'廣州',value:80}], [{name:'上海'},{name:'鄭州',value:70}], [{name:'上海'},{name:'長春',value:60}], [{name:'上海'},{name:'重慶',value:50}], [{name:'上海'},{name:'長沙',value:40}], [{name:'上海'},{name:'北京',value:30}], [{name:'上海'},{name:'丹東',value:20}], [{name:'上海'},{name:'大連',value:10}] ]; var GZData = [ [{name:'廣州'},{name:'福州',value:95}], [{name:'廣州'},{name:'太原',value:90}], [{name:'廣州'},{name:'長春',value:80}], [{name:'廣州'},{name:'重慶',value:70}], [{name:'廣州'},{name:'西安',value:60}], [{name:'廣州'},{name:'成都',value:50}], [{name:'廣州'},{name:'常州',value:40}], [{name:'廣州'},{name:'北京',value:30}], [{name:'廣州'},{name:'北海',value:20}], [{name:'廣州'},{name:'海口',value:10}] ];
……

• 遷徙圖初始化調用

//將Echarts加到地圖上
var layerWork = L.overlayEcharts(option).addTo(map);

完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波