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

​










​

为了方便使用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代码

​




    
    
    
    



    

    
    
    
    
    




​

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