leaflet 結合 Echarts4 實現散點圖(附源碼下載)


前言

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM