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 下载