Echarts 南海諸島簡圖顯示位置調整

 最近需要echart同時顯示海南島和南海諸島,開始想尋找南海諸島的數據,經過查找,這種簡圖數據是沒有的(china.js地圖數據一一找過了),下圖是echarts的一些示例,沒有滿足我們的要求

Echarts 南海諸島簡圖顯示位置調整

Echarts 南海諸島簡圖顯示位置調整

    後來在echarts.min.js中通過關鍵字'南海諸島'查找到了關鍵的代碼,echarts在地圖名為china時,加入南海諸島數據,然後經過座標變換(先設置縮放比率再平移到指定點)展示到echart地圖中。

    要想海南島地圖和南海諸島簡圖顯示到一起並不複雜。總共只要改四個參數就好了。

首先要修改左上角位置點,原先的源碼設置[126, 25],要想修改靠近海南島需要把這兩個數值改小點[110.5, 18.5]。然後,修改hA[cA][dA][0] /= 300, hA[cA][dA][1] /= -300,這裡的參數是設置縮放比率的。

Echarts 南海諸島簡圖顯示位置調整

    echarts.js和echarts.min.js的修改略有不同,原因還不太清楚

附:https://github.com/tpolong/echartshn


分享到:


相關文章: