關於如何使用ehcarts2加載svg矢量地圖並自定義縣級內部鄉鎮輪廓

項目需求：顯示縣級內部的鄉鎮一級地圖的輪廓！

效果預覽：

阻礙因素：echarts不提供縣級如下鄉鎮級輪廓。

 解決思路：

1.根據資料查找相關縣的行政區域圖（百度搜索），如本人所製做的浙江省寧波市寧海縣，從百度搜索下找到一個的大概的行政輪廓圖片：

 2.使用SVGDeveloper （svg繪圖軟件）來詳細繪製地圖，雖然不是畫的不是太專業，可是項目需求擺在那裏，勉強還湊合哈！-。-|||

怎麼畫呢？

1.首先咱們還須要上面的echarts地圖在線生成工具爲咱們提供縣級地圖的外部大輪廓，而後放大到必定比例經過截圖工具截取圖片，保存爲.png格式（以下圖所示）；

2.接着使用ps軟件，我用的是Adobe Fireworks CS6對圖片進行處理，反選將背景設爲透明；

3.首先須要使用http://www.pngtosvg.com/ 將第2步中的透明png圖片在線轉爲ninghai.svg的矢量圖。

4.打開svg做圖軟件，選擇文件ninghai.svg：

 

右下角放大到1000%做圖：

 

 

（由於費時，這步較爲繁瑣，因此你們畫完一部分地圖記得隨時保存喲！）

5.最後關於如何使用echarts2加載svg請參考http://echarts.baidu.com/echarts2/doc/example/map18.html ，http://echarts.baidu.com/echarts2/doc/example/map17.html，

 這裏是echarts2官方的兩個加載案例，一個是百度大廈的自定義矢量地圖，一個是足球場的地圖；

核心代碼：

 1 require('echarts/util/mapData/params').params.ninghaimap = {
 2     getGeoJson: function (callback) {
 3         $.ajax({
 4             type: "get",
 5             url: "../static/echarts/svg/ninghaimap.svg",
 6             dataType: 'xml',
 7             success: function (xml) {
 8                 callback(xml)
 9             }
10         });
11     }

 

最後但願你們可以提出意見，有更好的方法的大神歡迎留言，不吝賜教，謝謝！