raphael.js繪製中國地圖 地圖繪製方法_javascript技巧

最近的數據統計項目中要用到中國地圖，也就是在地圖上動態的顯示某個時間段某個省份地區的統計數據，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的互動操作。在本文中，我要跟大家分享如何使用js來完成地圖互動。

先簡單介紹下raphael.js，raphael.js是一個很小的javascript函式庫，它可以在網頁中實作繪製各種向量圖、各類圖表、以及影像裁切、旋轉、動作動畫等等功能。此外raphael.js也跨瀏覽器相容，而且還相容於老掉牙的IE6啊。 raphael.js的官網網址： http://raphaeljs.com/

準備工作

我們需要準備一張向量地圖，可以從網路上找一張向量地圖，或是使用illustrator繪製一份向量地圖，然後匯出為SVG格式的文件，這個檔案可以在瀏覽器上打開，然後擷取裡面的path路徑資訊（M開頭的座標）。並將path路徑訊息，按照chinamapPath.js的格式準備好地圖路徑資訊。

複製程式碼 程式碼如下:

var china = [];


var china = [];


var china = [];


var china = []; function paintMap(R) {
    var attr = {
        "fill": "#97d6f5",
   : 1,
        "stroke-linejoin": "round"
    };

    china.aomen = {
 M413.032,. ........省略若干......... ,414.183z").attr(attr)
    }

    china.hk = {         //格式同上

       格式同上

    };

}

以上是我們將準備好的地圖路徑資訊封裝到()函數中，並儲存檔案名稱為chinamapPath.js，以供後面呼叫。

HTML 首先在head部分載入raphael.js庫檔案和chinamapPath.js路徑資訊檔。  

複製程式碼

程式碼如下:

然後在body中需要放置地圖的位置放置div#map。  

複製程式碼

程式碼如下:

JAVASCRIPT 首先我們在頁面中呼叫地圖，方法如下：

複製程式碼


程式碼如下:

程式碼如下:

程式碼如下:window.onload = function () {     //繪製地圖    var R = Raphael("map", 600, 500);//將地圖載入id為mapid為map的div ，並設定區域為600x500px大小。     paintMap(R);

} 這時候我們用瀏覽器開啟會顯示載入後的地圖。接下來我們要給地圖中的對應的省份區域加上省份名稱，以及滑鼠滑向每個省份區塊時的變色動畫效果。 複製程式碼 程式碼如下:

window.onload = function () {
    var R = Raphael("map", 600, 500);
    //調用繪製地圖方法
 >
    var textAttr = {
        "fill": "#000",
           };

           
    for (var state in china) {
       (function (st, state) {

            //取得目前圖形上的中心座標
            var     var yy = st.getBBox( ).y (st.getBBox().height / 2);

            //寫入文字中
      ]['name']).attr(textAttr);

            st[0].onmouseover = function () {//鼠標滑向
                st.animate({fill: st.color, stroke : "#eee"}, 500);
                china[state]['text'].toFront();             st[0].onmouseout = function () {//滑鼠離開
                st.animate({fill: "#97d6f5", stroke: "#e ]['text'].toFront( );
                R.safari();
          
    }
}



以上程式碼中運用了raphael提供的方法有：getColor，getBBox，animate，toFront等等，這些可以在raphael文件中找到使用說明，這篇文章不在講述。
此外由於地圖尺寸原因，有些省份名稱在地圖中的顯示位置不恰當，需要修正偏移量，這樣看起來舒服點。





複製程式碼

程式碼如下:

window.onload = function () {
    var R = Raphael("map", 600, 500);
    ...
    for (var state in china) {
        ...
        (function (st, state) {
            ....
            switch (china[state]['name']) {
                case "江苏":
                    xx += 5;
                    yy -= 10;
                    break;
                case "河北":
                    xx -= 10;
                    yy += 20;
                    break;
                case "天津":
                    xx += 10;
                    yy += 10;
                    break;
                case "上海":
                    xx += 10;
                    break;
                case "广东":
                    yy -= 10;
                    break;
                case "澳门":
                    yy += 10;
                    break;
                case "香港":
                    xx += 20;
                    yy += 5;
                    break;
                case "甘肃":
                    xx -= 40;
                    yy -= 30;
                    break;
                case "陕西":
                    xx += 5;
                    yy += 10;
                    break;
                case "内蒙古":
                    xx -= 15;
                    yy += 65;
}                    預設值：
           state]['path'], state);
   }
}