leaflet 结合 Echarts4 实现散点图(附源码下载)

前言

leaflet 入门开发系列环境知识点了解：

• leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等
• leaflet 在线例子
• leaflet 插件，leaflet 的插件库，非常有用

内容概览

leaflet 结合 Echarts4 实现散点图
源代码 demo 下载

本篇 demo 利用 leaflet api 结合 Echarts4 实现散点图功能，效果图如下：

实现思路

从官网下载 Echarts4 源码，通过 _theme进行定位，定位到 function Echarts(){ } 里面的 this._theme = theme$$1;添加一行代码： this._geo = Geo; 
echarts.js 修改之处：

对 leaflet Layer 类进行扩展，新建 js 文件 leaflet-echarts.js，核心是 Echarts 的散点图其实也是在一个 Div 上画的，只要把这个 div 给拿到 map-pane 里面的 overlay-pane 。关于点的位置，因为 Echarts 内部自己有个把地理坐标转为像素坐标的方法，要重写 Echarts 内部方法 dataToPoint，完整的源码见文章尾部 demo 下载

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波