时空碰撞之当Leaflet遇到Echarts

清疚 2023-10-16 14:52 71阅读 0赞

##  ##

## 前言 ##

在之前的博客中，有介绍如何进行Leaflet展示的，也有介绍Echarts如何进行高效图表展示的。针对一些时空类的场景，比如需要跟随GIS地图一起进行图表展示，如何在地图上集成图表插件。本文将以常用的Leaflet为例，重点讲解在Leaflet中如何集成Echarts进行模拟迁徙的地图展示，最后通过分析前端调用示例以代码的形式给出实例，希望对需要将两者进行集成的朋友有所帮助。

## 一、相关基础知识 ##

### 1、leaflet-echarts插件 ###

基于leaflet 扩展echarts，使ECharts的地图可以加到leaflet上，根据百度地图echarts的扩展改写，在事件联动这个地方以及echarts的容器与地图容器在拖动和缩放中的适应上耗费了很长时间，为了兼容echarts的map其他类型的数据又下了不少功夫。[leaflet-echarts3 github地址][leaflet-echarts3 github]。有兴趣朋友可以独立下载。

![07e7db01a06b427ba29c3ef392b49c86.png][]

### 2、依赖插件说明 ###

在Leaflet-charts中，其依赖的组件包还是比较少的。主要的包如下：

<table> 
 <tbody> 
  <tr> 
   <td style="width:147px;">序号</td> 
   <td style="width:281px;">组件</td> 
   <td style="width:254px;">备注</td> 
  </tr> 
  <tr> 
   <td style="width:147px;">1</td> 
   <td style="width:281px;">leaflet-echarts.js</td> 
   <td style="width:254px;">集成插件</td> 
  </tr> 
  <tr> 
   <td style="width:147px;">2</td> 
   <td style="width:281px;">echarts.source.js</td> 
   <td style="width:254px;">echarts组件</td> 
  </tr> 
  <tr> 
   <td style="width:147px;">3</td> 
   <td style="width:281px;">jquery.js</td> 
   <td style="width:254px;">jquery组件</td> 
  </tr> 
 </tbody> 
</table>

![d1319550ef184a61bfbaff0fee154af5.png][]

需要注意的是，当前提供的echarts版本跟Echarts官网提供的版本有一定差异，如果需要使用最新的一些图表及API，谨慎升级或者需要自己手动调试代码，改成兼容新版本的才可以，否则会报错。示例提供的echarts的版本是2.2.6。

![762e389a46cc42f8acb395ae89a7da8c.png][]

## 二、页面集成 ##

### 1、新建html页面 ###

在个人电脑任意盘符中新建index3.html，关键代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>leaflet-echarts集成特效</title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/0.7.7/leaflet.css">
        <style>
            html, body, #map {
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
    <div id="map"></div>
    <script src="http://cdn.bootcss.com/leaflet/0.7.7/leaflet.js"></script>
    <script src="../src/leaflet-echarts.js"></script>
    <script src="../lib/echarts.source.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script>
        
    </script>
    </body>
    </html>

### 2、leaflet地图初始化 ###

在上面的Script脚本中进行Leaflet地图的初始化操作，示例代码如下所示：

这里地图引用了GeoQ的灰色底图、高德的影像和电子地图等在线地图，如需离线访问的需要下载相应的图源或者接入自己的离线地图资源。

### 3、Echarts与地图集成 ###

经过第二个步骤的初始化，已经完成Leaflet地图的定义，在这里进行Echarts地的集成。核心代码如下所示：

## 三、功能展示 ##

### 1、地图首页 ###

将完成的index3.html页面直接在浏览器中打开，即可看到将地图和图表进行完美融合的界面，支持地图的缩放，迁徙功能支持与地图无缝衔接。

![66ecd19f1c8649f5a67ea104ba76c634.png][]

![d06393fc662345d782b7c90433c2e95e.png][]

### 2、底图切换 ###

在右侧的在线地图中，可以支持不同的地图进行切换，比如可以实现GeoQ的灰色底图切换到高德的高线地图展示，如果您有离线的地图图源，也是可以接入进行展示的。

![9c975724efcb49fc9b407276a9484cc3.png][]

![9f83553e14b848f29568f84c71b8451f.png][]

![191579826fe348a9a032c81141da428f.gif][]

## 四、渲染分析 ##

下面通过在浏览器中进行Debug断点调试，跟踪相关代码的执行流程。

页面元素初始化，执行以下代码：

var overlay = new L.echartsLayer(map, echarts);
    var chartsContainer=overlay.getEchartsContainer();

![187275fc15a84c76a873838779995938.png][]

charts初始化，与map进行元素绑定，将map的元素大小赋值给图表，保持两者一致。

initialize: function(map, ec) {
          this._map = map;
          var size = map.getSize();
          var div = this._echartsContainer = document.createElement('div');
          div.style.position = 'absolute';
          div.style.height = size.y + 'px';
          div.style.width = size.x + 'px';
          div.style.top = 0;
          div.style.left = 0;
          map.getPanes().overlayPane.appendChild(div);
          this._init(map, ec);
        },

![f5fc91ad6b374b2385ba8251dfafaa6a.png][]

事件绑定

![27641b30c9a546e19f88db9d685864f6.png][]

setOption设置报表展示参数

![e8044367a9c6451b8dde2cb5265526e5.png][]

## 总结 ##

以上就是本文的主要内容，本文将以常用的Leaflet为例，重点讲解在Leaflet中如何集成Echarts进行模拟迁徙的地图展示，最后通过分析前端调用示例以代码的形式给出实例，希望对需要将两者进行集成的朋友有所帮助。行文仓促，如有不当之处，欢迎朋友在评论区留言批评指正。

[leaflet-echarts3 github]: https://github.com/wandergis/leaflet-echarts3
[07e7db01a06b427ba29c3ef392b49c86.png]: https://img-blog.csdnimg.cn/07e7db01a06b427ba29c3ef392b49c86.png
[d1319550ef184a61bfbaff0fee154af5.png]: https://img-blog.csdnimg.cn/d1319550ef184a61bfbaff0fee154af5.png
[762e389a46cc42f8acb395ae89a7da8c.png]: https://img-blog.csdnimg.cn/762e389a46cc42f8acb395ae89a7da8c.png
[66ecd19f1c8649f5a67ea104ba76c634.png]: https://img-blog.csdnimg.cn/66ecd19f1c8649f5a67ea104ba76c634.png
[d06393fc662345d782b7c90433c2e95e.png]: https://img-blog.csdnimg.cn/d06393fc662345d782b7c90433c2e95e.png
[9c975724efcb49fc9b407276a9484cc3.png]: https://img-blog.csdnimg.cn/9c975724efcb49fc9b407276a9484cc3.png
[9f83553e14b848f29568f84c71b8451f.png]: https://img-blog.csdnimg.cn/9f83553e14b848f29568f84c71b8451f.png
[191579826fe348a9a032c81141da428f.gif]: https://img-blog.csdnimg.cn/191579826fe348a9a032c81141da428f.gif
[187275fc15a84c76a873838779995938.png]: https://img-blog.csdnimg.cn/187275fc15a84c76a873838779995938.png
[f5fc91ad6b374b2385ba8251dfafaa6a.png]: https://img-blog.csdnimg.cn/f5fc91ad6b374b2385ba8251dfafaa6a.png
[27641b30c9a546e19f88db9d685864f6.png]: https://img-blog.csdnimg.cn/27641b30c9a546e19f88db9d685864f6.png
[e8044367a9c6451b8dde2cb5265526e5.png]: https://img-blog.csdnimg.cn/e8044367a9c6451b8dde2cb5265526e5.png