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小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波