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

Love The Way You Lie 2023-10-01 12:04 29阅读 0赞

## 场景 ##

Leaflet快速入门与加载OSM显示地图：

[Leaflet快速入门与加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]

Leaflet有很多插件，比如地图上显示Echarts的迁徙图的插件leaflet-echarts

插件地址：

[https://github.com/wandergis/leaflet-echarts][https_github.com_wandergis_leaflet-echarts]

在线演示地址:

[Baidu migration Echarts Map By Leaflet][]

![64bb7a4d3595425da897d0a9c00f6ba0.gif][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、将上面代码克隆下来，本地新建html以及需要的js文件等

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_17_color_FFFFFF_t_70_g_se_x_16][]

需要一个leaflet-echarts.js的核心js文件，需要一个echart的源码js文件，还需要一个迁徙数据的mihration.json数据文件。

js文件都可以在代码仓库中找到，json文件可以在在线演示地址中访问接口地址，并且另存为获取。

2、html中再加上leaflet本身需要的css和js文件

为了方便使用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博客][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地图

![2f1f8bf48763467587f4a6ec8c3b1be5.gif][]

[Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
[https_github.com_wandergis_leaflet-echarts]: https://github.com/wandergis/leaflet-echarts
[Baidu migration Echarts Map By Leaflet]: http://wandergis.com/leaflet-echarts/index-en.html
[64bb7a4d3595425da897d0a9c00f6ba0.gif]: https://img-blog.csdnimg.cn/64bb7a4d3595425da897d0a9c00f6ba0.gif
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/da5804ea28c64bffbb13adda4298d8e0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_17,color_FFFFFF,t_70,g_se,x_16
[Nginx_json_get_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122338958
[2f1f8bf48763467587f4a6ec8c3b1be5.gif]: https://img-blog.csdnimg.cn/2f1f8bf48763467587f4a6ec8c3b1be5.gif