devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图_js leaflet+echarts实现迁徙图

作者：我家自动化 | 2024-06-16 20:49:38

赞

踩

js leaflet+echarts实现迁徙图

场景

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文件

  1. ​
  2. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  3.  
  4. <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  5.  
  6. <script src="./js/leaflet-echarts.js"></script>
  7.  
  8. <script src="./js/echarts.source.js"></script>
  9.  
  10. <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  11.  
  12. ​

为了方便使用ajax模拟请求json数据，这里还引入了jquery。

3、需要使用ajax模拟请求后台获取json数据。

  1.         $.ajax({
  2.             url: 'http://localhost:3000/json/migration.json',
  3.             type: "get",
  4.             dataType: 'json',
  5.             success: function (data) {
  6.                 for (var key in data) {
  7.                     data[key].forEach(function (value, index) {
  8.                         data[key][index].num = Number(value.num);
  9.                     })
  10.                 }
  11.                 option.series[0].markLine.data = data.allLine.sort(function (a, b) {
  12.                     return b.num - a.num
  13.                 }).slice(0, 3000).map(function (line) {
  14.                     return [{
  15.                         geoCoord: getGeoCoord(line.start)
  16.                     }, {
  17.                         geoCoord: getGeoCoord(line.end)
  18.                     }]
  19.                 });
  20.  
  21.                 option.series[0].markPoint.data = data.topCityOut.map(function (point) {
  22.                     return {
  23.                         geoCoord: getGeoCoord(point.name)
  24.                     }
  25.                 });
  26.                 overlay.setOption(option);
  27.             }
  28.         });

这里可以使用很多种方式，可以使用js请求本地json(注意跨域问题)，或者使用java编写后台接口返回数据。

这里使用nginx映射的方式去模拟返回json数据。

Nginx映射本地json文件，配置解决浏览器跨域问题，提供前端get请求模拟数据：

Nginx映射本地json文件，配置解决浏览器跨域问题，提供前端get请求模拟数据_BADAO_LIUMANG_QIZHI的博客-CSDN博客

4、完整html代码

  1. ​
  2. <!doctype html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>leaflet结合Echarts实现迁徙图</title>
  8.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  9.     <style>
  10.         html,
  11.         body,
  12.         #map {
  13.             padding: 0;
  14.             margin: 0;
  15.             width: 100%;
  16.             height: 100%;
  17.             overflow: hidden;
  18.         }
  19.     </style>
  20. </head>
  21.  
  22. <body>
  23.     <div id="map"></div>
  24.     <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  25.     <script src="./js/leaflet-echarts.js"></script>
  26.     <script src="./js/echarts.source.js"></script>
  27.     <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  28.     <script type="text/javascript">
  29.         var map = L.map('map').setView([36.09, 120.35], 13);
  30.         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  31.             attribution: ''
  32.         }).addTo(map);
  33.  
  34.         var overlay = new L.echartsLayer(map, echarts);
  35.         var chartsContainer = overlay.getEchartsContainer();
  36.         var myChart = overlay.initECharts(chartsContainer);
  37.         window.onresize = myChart.onresize;
  38.         //这里跟百度echarts的map的option一样
  39.         var option = {
  40.             legend: {
  41.                 show: true,
  42.                 x: 'right',
  43.                 orient: 'vertical',
  44.                 textStyle: {
  45.                     color: 'red'
  46.                 },
  47.                 data: []
  48.             },
  49.             series: [{
  50.                 name: "订单流向",
  51.                 type: 'map',
  52.                 mapType: 'none',
  53.                 itemStyle: {
  54.                     normal: {
  55.                         borderColor: 'rgba(100,149,237,0.2)',
  56.                         borderWidth: 0.5,
  57.                         areaStyle: {
  58.                             color: '#1b1b1b'
  59.                         }
  60.                     }
  61.                 },
  62.                 data: [{}],
  63.                 hoverable: false,
  64.                 clickable: false,
  65.                 roam: true,
  66.                 markLine: {
  67.                     effect: {
  68.                         color: 'rgba(204, 246, 255, 0.09)',
  69.                         show: true,
  70.                         period: 40
  71.                     },
  72.                     bundling: {
  73.                         enable: true
  74.                     },
  75.                     large: true,
  76.                     smooth: true,
  77.                     smoothness: 0.1,
  78.                     symbol: ['none', 'none'],
  79.                     itemStyle: {
  80.                         normal: {
  81.                             lineStyle: {
  82.                                 color: 'rgba(252,0,0, 0.05)',
  83.                                 type: 'solid',
  84.                                 width: 0.5,
  85.                                 opacity: 0.2
  86.                             }
  87.                         }
  88.                     },
  89.                     data: []
  90.                 },
  91.                 markPoint: {
  92.                     symbol: 'circle',
  93.                     symbolSize: 1.5,
  94.                     itemStyle: {
  95.                         normal: {
  96.                             color: 'rgba(252,255,0, 0.5)'
  97.                         }
  98.                     },
  99.                     data: []
  100.                 }
  101.             }]
  102.         };
  103.         var geoCoord = {
  104.             "北京": [116.395645, 39.929986],
  105.             "上海": [121.487899, 31.249162],
  106.             "天津": [117.210813, 39.14393],
  107.             "重庆": [106.530635, 29.544606],
  108.             "安徽": [117.216005, 31.859252],
  109.             "合肥": [117.282699, 31.866942],
  110.             "安庆": [117.058739, 30.537898],
  111.             "蚌埠": [117.35708, 32.929499],
  112.             "亳州": [115.787928, 33.871211],
  113.             "巢湖": [117.88049, 31.608733],
  114.             "池州": [117.494477, 30.660019],
  115.             "滁州": [118.32457, 32.317351],
  116.             "阜阳": [115.820932, 32.901211],
  117.             "淮北": [116.791447, 33.960023],
  118.             "淮南": [117.018639, 32.642812],
  119.             "黄山": [118.29357, 29.734435],
  120.             "六安": [116.505253, 31.755558],
  121.             "马鞍山": [118.515882, 31.688528],
  122.             "宿州": [116.988692, 33.636772],
  123.             "铜陵": [117.819429, 30.94093],
  124.             "芜湖": [118.384108, 31.36602],
  125.             "宣城": [118.752096, 30.951642],
  126.             "福建": [117.984943, 26.050118],
  127.             "福州": [119.330221, 26.047125],
  128.             "龙岩": [117.017997, 25.078685],
  129.             "南平": [118.181883, 26.643626],
  130.             "宁德": [119.542082, 26.656527],
  131.             "莆田": [119.077731, 25.44845],
  132.             "泉州": [118.600362, 24.901652],
  133.             "三明": [117.642194, 26.270835],
  134.             "厦门": [118.103886, 24.489231],
  135.             "漳州": [117.676205, 24.517065],
  136.             "甘肃": [102.457625, 38.103267],
  137.             "兰州": [103.823305, 36.064226],
  138.             "白银": [104.171241, 36.546682],
  139.             "定西": [104.626638, 35.586056],
  140.             "甘南": [102.917442, 34.992211],
  141.             "嘉峪关": [98.281635, 39.802397],
  142.             "金昌": [102.208126, 38.516072],
  143.             "酒泉": [98.508415, 39.741474],
  144.             "临夏": [103.215249, 35.598514],
  145.             "陇南": [104.934573, 33.39448],
  146.             "平凉": [106.688911, 35.55011],
  147.             "庆阳": [107.644227, 35.726801],
  148.             "天水": [105.736932, 34.584319],
  149.             "武威": [102.640147, 37.933172],
  150.             "张掖": [100.459892, 38.93932],
  151.             "广东": [113.394818, 23.408004],
  152.             "广州": [113.30765, 23.120049],
  153.             "潮州": [116.630076, 23.661812],
  154.             "东莞": [113.763434, 23.043024],
  155.             "佛山": [113.134026, 23.035095],
  156.             "河源": [114.713721, 23.757251],
  157.             "惠州": [114.410658, 23.11354],
  158.             "江门": [113.078125, 22.575117],
  159.             "揭阳": [116.379501, 23.547999],
  160.             "茂名": [110.931245, 21.668226],
  161.             "梅州": [116.126403, 24.304571],
  162.             "清远": [113.040773, 23.698469],
  163.             "汕头": [116.72865, 23.383908],
  164.             "汕尾": [115.372924, 22.778731],
  165.             "韶关": [113.594461, 24.80296],
  166.             "深圳": [114.025974, 22.546054],
  167.             "阳江": [111.97701, 21.871517],
  168.             "云浮": [112.050946, 22.937976],
  169.             "湛江": [110.365067, 21.257463],
  170.             "肇庆": [112.479653, 23.078663],
  171.             "中山": [113.42206, 22.545178],
  172.             "珠海": [113.562447, 22.256915],
  173.             "东沙群岛": [117.309186, 19.083978],
  174.             "广西": [108.924274, 23.552255],
  175.             "南宁": [108.297234, 22.806493],
  176.             "百色": [106.631821, 23.901512],
  177.             "北海": [109.122628, 21.472718],
  178.             "崇左": [107.357322, 22.415455],
  179.             "防城港": [108.351791, 21.617398],
  180.             "桂林": [110.26092, 25.262901],
  181.             "贵港": [109.613708, 23.103373],
  182.             "河池": [108.069948, 24.699521],
  183.             "贺州": [111.552594, 24.411054],
  184.             "来宾": [109.231817, 23.741166],
  185.             "柳州": [109.422402, 24.329053],
  186.             "钦州": [108.638798, 21.97335],
  187.             "梧州": [111.305472, 23.485395],
  188.             "玉林": [110.151676, 22.643974],
  189.             "贵州": [106.734996, 26.902826],
  190.             "贵阳": [106.709177, 26.629907],
  191.             "安顺": [105.92827, 26.228595],
  192.             "毕节": [105.300492, 27.302612],
  193.             "六盘水": [104.852087, 26.591866],
  194.             "铜仁": [109.196161, 27.726271],
  195.             "遵义": [106.93126, 27.699961],
  196.             "黔西南": [104.900558, 25.095148],
  197.             "黔东南": [107.985353, 26.583992],
  198.             "黔南": [107.523205, 26.264536],
  199.             "海南": [100.624066, 36.284364],
  200.             "海口": [110.330802, 20.022071],
  201.             "白沙": [109.358586, 19.216056],
  202.             "保亭": [109.656113, 18.597592],
  203.             "昌江": [109.0113, 19.222483],
  204.             "儋州": [109.413973, 19.571153],
  205.             "澄迈": [109.996736, 19.693135],
  206.             "东方": [108.85101, 18.998161],
  207.             "定安": [110.32009, 19.490991],
  208.             "琼海": [110.414359, 19.21483],
  209.             "琼中": [109.861849, 19.039771],
  210.             "乐东": [109.062698, 18.658614],
  211.             "临高": [109.724101, 19.805922],
  212.             "陵水": [109.948661, 18.575985],
  213.             "三亚": [109.522771, 18.257776],
  214.             "屯昌": [110.063364, 19.347749],
  215.             "万宁": [110.292505, 18.839886],
  216.             "文昌": [110.780909, 19.750947],
  217.             "五指山": [109.51775, 18.831306],
  218.             "三沙": [112.342491, 16.843901],
  219.             "西沙群岛": [111.79977, 16.219423],
  220.             "南沙群岛": [114.736439, 10.370353],
  221.             "河北": [115.661434, 38.61384],
  222.             "石家庄": [114.522082, 38.048958],
  223.             "保定": [115.49481, 38.886565],
  224.             "沧州": [116.863806, 38.297615],
  225.             "承德": [117.933822, 40.992521],
  226.             "邯郸": [114.482694, 36.609308],
  227.             "衡水": [115.686229, 37.746929],
  228.             "廊坊": [116.703602, 39.518611],
  229.             "秦皇岛": [119.604368, 39.945462],
  230.             "唐山": [118.183451, 39.650531],
  231.             "邢台": [114.520487, 37.069531],
  232.             "张家口": [114.893782, 40.811188],
  233.             "河南": [113.486804, 34.157184],
  234.             "济源": [112.609183, 35.073092],
  235.             "郑州": [113.649644, 34.75661],
  236.             "安阳": [114.351807, 36.110267],
  237.             "鹤壁": [114.29777, 35.755426],
  238.             "焦作": [113.211836, 35.234608],
  239.             "开封": [114.351642, 34.801854],
  240.             "洛阳": [112.447525, 34.657368],
  241.             "漯河": [114.046061, 33.576279],
  242.             "南阳": [112.542842, 33.01142],
  243.             "平顶山": [113.300849, 33.745301],
  244.             "濮阳": [115.026627, 35.753298],
  245.             "三门峡": [111.181262, 34.78332],
  246.             "商丘": [115.641886, 34.438589],
  247.             "新乡": [113.91269, 35.307258],
  248.             "信阳": [114.085491, 32.128582],
  249.             "许昌": [113.835312, 34.02674],
  250.             "周口": [114.654102, 33.623741],
  251.             "驻马店": [114.049154, 32.983158],
  252.             "黑龙江": [128.047414, 47.356592],
  253.             "哈尔滨": [126.657717, 45.773225],
  254.             "大庆": [125.02184, 46.596709],
  255.             "大兴安岭": [124.196104, 51.991789],
  256.             "鹤岗": [130.292472, 47.338666],
  257.             "黑河": [127.50083, 50.25069],
  258.             "鸡西": [130.941767, 45.32154],
  259.             "佳木斯": [130.284735, 46.81378],
  260.             "牡丹江": [129.608035, 44.588521],
  261.             "七台河": [131.019048, 45.775005],
  262.             "齐齐哈尔": [123.987289, 47.3477],
  263.             "双鸭山": [131.171402, 46.655102],
  264.             "绥化": [126.989095, 46.646064],
  265.             "伊春": [128.910766, 47.734685],
  266.             "湖北": [112.410562, 31.209316],
  267.             "武汉": [114.3162, 30.581084],
  268.             "鄂州": [114.895594, 30.384439],
  269.             "恩施": [109.517433, 30.308978],
  270.             "黄冈": [114.906618, 30.446109],
  271.             "黄石": [115.050683, 30.216127],
  272.             "荆门": [112.21733, 31.042611],
  273.             "荆州": [112.241866, 30.332591],
  274.             "潜江": [112.768768, 30.343116],
  275.             "神农架": [110.487231, 31.595768],
  276.             "十堰": [110.801229, 32.636994],
  277.             "随州": [113.379358, 31.717858],
  278.             "天门": [113.12623, 30.649047],
  279.             "仙桃": [113.387448, 30.293966],
  280.             "咸宁": [114.300061, 29.880657],
  281.             "襄阳": [112.176326, 32.094934],
  282.             "孝感": [113.935734, 30.927955],
  283.             "宜昌": [111.310981, 30.732758],
  284.             "湖南": [111.720664, 27.695864],
  285.             "长沙": [112.979353, 28.213478],
  286.             "常德": [111.653718, 29.012149],
  287.             "郴州": [113.037704, 25.782264],
  288.             "衡阳": [112.583819, 26.898164],
  289.             "怀化": [109.986959, 27.557483],
  290.             "娄底": [111.996396, 27.741073],
  291.             "邵阳": [111.461525, 27.236811],
  292.             "湘潭": [112.935556, 27.835095],
  293.             "湘西": [109.745746, 28.317951],
  294.             "益阳": [112.366547, 28.588088],
  295.             "永州": [111.614648, 26.435972],
  296.             "岳阳": [113.146196, 29.378007],
  297.             "张家界": [110.48162, 29.124889],
  298.             "株洲": [113.131695, 27.827433],
  299.             "江苏": [119.368489, 33.013797],
  300.             "南京": [118.778074, 32.057236],
  301.             "常州": [119.981861, 31.771397],
  302.             "淮安": [119.030186, 33.606513],
  303.             "连云港": [119.173872, 34.601549],
  304.             "南通": [120.873801, 32.014665],
  305.             "苏州": [120.619907, 31.317987],
  306.             "宿迁": [118.296893, 33.95205],
  307.             "泰州": [119.919606, 32.476053],
  308.             "无锡": [120.305456, 31.570037],
  309.             "徐州": [117.188107, 34.271553],
  310.             "盐城": [120.148872, 33.379862],
  311.             "扬州": [119.427778, 32.408505],
  312.             "镇江": [119.455835, 32.204409],
  313.             "江西": [115.676082, 27.757258],
  314.             "南昌": [115.893528, 28.689578],
  315.             "抚州": [116.360919, 27.954545],
  316.             "赣州": [114.935909, 25.845296],
  317.             "吉安": [114.992039, 27.113848],
  318.             "景德镇": [117.186523, 29.303563],
  319.             "九江": [115.999848, 29.71964],
  320.             "萍乡": [113.859917, 27.639544],
  321.             "上饶": [117.955464, 28.457623],
  322.             "新余": [114.947117, 27.822322],
  323.             "宜春": [114.400039, 27.81113],
  324.             "鹰潭": [117.03545, 28.24131],
  325.             "吉林": [126.564544, 43.871988],
  326.             "长春": [125.313642, 43.898338],
  327.             "白城": [122.840777, 45.621086],
  328.             "白山": [126.435798, 41.945859],
  329.             "辽源": [125.133686, 42.923303],
  330.             "四平": [124.391382, 43.175525],
  331.             "松原": [124.832995, 45.136049],
  332.             "通化": [125.94265, 41.736397],
  333.             "延边": [129.485902, 42.896414],
  334.             "辽宁": [122.753592, 41.6216],
  335.             "沈阳": [123.432791, 41.808645],
  336.             "鞍山": [123.007763, 41.118744],
  337.             "本溪": [123.778062, 41.325838],
  338.             "朝阳": [120.446163, 41.571828],
  339.             "大连": [121.593478, 38.94871],
  340.             "丹东": [124.338543, 40.129023],
  341.             "抚顺": [123.92982, 41.877304],
  342.             "阜新": [121.660822, 42.01925],
  343.             "葫芦岛": [120.860758, 40.74303],
  344.             "锦州": [121.147749, 41.130879],
  345.             "辽阳": [123.172451, 41.273339],
  346.             "盘锦": [122.073228, 41.141248],
  347.             "铁岭": [123.85485, 42.299757],
  348.             "营口": [122.233391, 40.668651],
  349.             "内蒙古": [114.415868, 43.468238],
  350.             "呼和浩特": [111.660351, 40.828319],
  351.             "阿拉善": [105.695683, 38.843075],
  352.             "包头": [109.846239, 40.647119],
  353.             "巴彦淖尔": [107.423807, 40.76918],
  354.             "赤峰": [118.930761, 42.297112],
  355.             "鄂尔多斯": [109.993706, 39.81649],
  356.             "呼伦贝尔": [119.760822, 49.201636],
  357.             "通辽": [122.260363, 43.633756],
  358.             "乌海": [106.831999, 39.683177],
  359.             "乌兰察布": [113.112846, 41.022363],
  360.             "锡林郭勒": [116.02734, 43.939705],
  361.             "兴安盟": [122.048167, 46.083757],
  362.             "宁夏": [106.155481, 37.321323],
  363.             "银川": [106.206479, 38.502621],
  364.             "固原": [106.285268, 36.021523],
  365.             "石嘴山": [106.379337, 39.020223],
  366.             "吴忠": [106.208254, 37.993561],
  367.             "中卫": [105.196754, 37.521124],
  368.             "青海": [96.202544, 35.499761],
  369.             "西宁": [101.767921, 36.640739],
  370.             "果洛": [100.223723, 34.480485],
  371.             "海东": [102.085207, 36.51761],
  372.             "海北": [100.879802, 36.960654],
  373.             "海西": [97.342625, 37.373799],
  374.             "黄南": [102.0076, 35.522852],
  375.             "玉树": [97.013316, 33.00624],
  376.             "山东": [118.527663, 36.09929],
  377.             "济南": [117.024967, 36.682785],
  378.             "滨州": [117.968292, 37.405314],
  379.             "东营": [118.583926, 37.487121],
  380.             "德州": [116.328161, 37.460826],
  381.             "菏泽": [115.46336, 35.26244],
  382.             "济宁": [116.600798, 35.402122],
  383.             "莱芜": [117.684667, 36.233654],
  384.             "聊城": [115.986869, 36.455829],
  385.             "临沂": [118.340768, 35.072409],
  386.             "青岛": [120.384428, 36.105215],
  387.             "日照": [119.50718, 35.420225],
  388.             "泰安": [117.089415, 36.188078],
  389.             "威海": [122.093958, 37.528787],
  390.             "潍坊": [119.142634, 36.716115],
  391.             "烟台": [121.309555, 37.536562],
  392.             "枣庄": [117.279305, 34.807883],
  393.             "淄博": [118.059134, 36.804685],
  394.             "山西": [112.515496, 37.866566],
  395.             "太原": [112.550864, 37.890277],
  396.             "长治": [113.120292, 36.201664],
  397.             "大同": [113.290509, 40.113744],
  398.             "晋城": [112.867333, 35.499834],
  399.             "晋中": [112.738514, 37.693362],
  400.             "临汾": [111.538788, 36.099745],
  401.             "吕梁": [111.143157, 37.527316],
  402.             "朔州": [112.479928, 39.337672],
  403.             "忻州": [112.727939, 38.461031],
  404.             "阳泉": [113.569238, 37.869529],
  405.             "运城": [111.006854, 35.038859],
  406.             "陕西": [109.503789, 35.860026],
  407.             "西安": [108.953098, 34.2778],
  408.             "安康": [109.038045, 32.70437],
  409.             "宝鸡": [107.170645, 34.364081],
  410.             "汉中": [107.045478, 33.081569],
  411.             "商洛": [109.934208, 33.873907],
  412.             "铜川": [108.968067, 34.908368],
  413.             "渭南": [109.483933, 34.502358],
  414.             "咸阳": [108.707509, 34.345373],
  415.             "延安": [109.50051, 36.60332],
  416.             "榆林": [109.745926, 38.279439],
  417.             "四川": [102.89916, 30.367481],
  418.             "成都": [104.067923, 30.679943],
  419.             "阿坝": [102.228565, 31.905763],
  420.             "巴中": [106.757916, 31.869189],
  421.             "达州": [107.494973, 31.214199],
  422.             "德阳": [104.402398, 31.13114],
  423.             "甘孜": [101.969232, 30.055144],
  424.             "广安": [106.63572, 30.463984],
  425.             "广元": [105.819687, 32.44104],
  426.             "乐山": [103.760824, 29.600958],
  427.             "凉山": [102.259591, 27.892393],
  428.             "泸州": [105.44397, 28.89593],
  429.             "南充": [106.105554, 30.800965],
  430.             "眉山": [103.84143, 30.061115],
  431.             "绵阳": [104.705519, 31.504701],
  432.             "内江": [105.073056, 29.599462],
  433.             "攀枝花": [101.722423, 26.587571],
  434.             "遂宁": [105.564888, 30.557491],
  435.             "雅安": [103.009356, 29.999716],
  436.             "宜宾": [104.633019, 28.769675],
  437.             "资阳": [104.63593, 30.132191],
  438.             "自贡": [104.776071, 29.359157],
  439.             "西藏": [89.137982, 31.367315],
  440.             "拉萨": [91.111891, 29.662557],
  441.             "阿里": [81.107669, 30.404557],
  442.             "昌都": [97.185582, 31.140576],
  443.             "林芝": [94.349985, 29.666941],
  444.             "那曲": [92.067018, 31.48068],
  445.             "日喀则": [88.891486, 29.269023],
  446.             "山南": [91.750644, 29.229027],
  447.             "新疆": [85.614899, 42.127001],
  448.             "乌鲁木齐": [87.564988, 43.84038],
  449.             "阿拉尔": [81.291737, 40.61568],
  450.             "阿克苏": [80.269846, 41.171731],
  451.             "阿勒泰": [88.137915, 47.839744],
  452.             "巴音郭楞": [86.121688, 41.771362],
  453.             "博尔塔拉": [82.052436, 44.913651],
  454.             "昌吉": [87.296038, 44.007058],
  455.             "哈密": [93.528355, 42.858596],
  456.             "和田": [79.930239, 37.116774],
  457.             "喀什": [75.992973, 39.470627],
  458.             "克拉玛依": [84.88118, 45.594331],
  459.             "克孜勒苏": [76.137564, 39.750346],
  460.             "石河子": [86.041865, 44.308259],
  461.             "塔城": [82.974881, 46.758684],
  462.             "图木舒克": [79.198155, 39.889223],
  463.             "吐鲁番": [89.181595, 42.96047],
  464.             "五家渠": [87.565449, 44.368899],
  465.             "伊犁": [81.297854, 43.922248],
  466.             "云南": [101.592952, 24.864213],
  467.             "昆明": [102.714601, 25.049153],
  468.             "保山": [99.177996, 25.120489],
  469.             "楚雄": [101.529382, 25.066356],
  470.             "大理": [100.223675, 25.5969],
  471.             "德宏": [98.589434, 24.44124],
  472.             "迪庆": [99.713682, 27.831029],
  473.             "红河": [103.384065, 23.367718],
  474.             "丽江": [100.229628, 26.875351],
  475.             "临沧": [100.092613, 23.887806],
  476.             "怒江": [98.859932, 25.860677],
  477.             "普洱": [100.980058, 22.788778],
  478.             "曲靖": [103.782539, 25.520758],
  479.             "昭通": [103.725021, 27.340633],
  480.             "文山": [104.089112, 23.401781],
  481.             "西双版纳": [100.803038, 22.009433],
  482.             "玉溪": [102.545068, 24.370447],
  483.             "浙江": [119.957202, 29.159494],
  484.             "杭州": [120.219375, 30.259244],
  485.             "湖州": [120.137243, 30.877925],
  486.             "嘉兴": [120.760428, 30.773992],
  487.             "金华": [119.652576, 29.102899],
  488.             "丽水": [119.929576, 28.4563],
  489.             "宁波": [121.579006, 29.885259],
  490.             "衢州": [118.875842, 28.95691],
  491.             "绍兴": [120.592467, 30.002365],
  492.             "台州": [121.440613, 28.668283],
  493.             "温州": [120.690635, 28.002838],
  494.             "舟山": [122.169872, 30.03601],
  495.             "香港": [114.186124, 22.293586],
  496.             "澳门": [113.557519, 22.204118],
  497.             "台湾": [120.961454, 23.80406],
  498.             "台北": [121.489971, 25.094466]
  499.         };
  500.  
  501.         function getGeoCoord(name) {
  502.             var city = name.split('_').pop();
  503.             var coord;
  504.             coord = geoCoord[city];
  505.             return coord;
  506.         }
  507.  
  508.         //http://wandergis.com/leaflet-echarts/src/migration.json
  509.         $.ajax({
  510.             url: 'http://localhost:3000/json/migration.json',
  511.             type: "get",
  512.             dataType: 'json',
  513.             success: function (data) {
  514.                 for (var key in data) {
  515.                     data[key].forEach(function (value, index) {
  516.                         data[key][index].num = Number(value.num);
  517.                     })
  518.                 }
  519.                 option.series[0].markLine.data = data.allLine.sort(function (a, b) {
  520.                     return b.num - a.num
  521.                 }).slice(0, 3000).map(function (line) {
  522.                     return [{
  523.                         geoCoord: getGeoCoord(line.start)
  524.                     }, {
  525.                         geoCoord: getGeoCoord(line.end)
  526.                     }]
  527.                 });
  528.  
  529.                 option.series[0].markPoint.data = data.topCityOut.map(function (point) {
  530.                     return {
  531.                         geoCoord: getGeoCoord(point.name)
  532.                     }
  533.                 });
  534.                 overlay.setOption(option);
  535.             }
  536.         });
  537.     </script>
  538. </body>
  539.  
  540. </html>
  541.  
  542. ​

5、本地运行效果，这里的地图底图使用的是osm地图

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/728222
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号