實現效果

數據來源

地圖的是通過這個 shape 描繪成形狀展示的，數據可以通過 datav.aliyun 地圖json小工具 獲取到

數據拿到之後，就是展示的問題，直接展示是不行的，需要通過 d3 對數據處理，才能按照正確的地圖樣子展示

import * as d3 from "d3";  //莫開託座標 矯正地圖座標
//center 的位置可以自己定
const handleProj = d3.geoMercator().center([109, 34.5]).scale(1000).translate([0, 0]) // d3投影轉換函數

支持功能

下鑽 縮放 旋轉 標記 飛線 自定義數據 二次開發 離線部署

源碼獲取

喜歡的小夥伴 私信我哦