raphael.js繪制中國地圖

 在本文中給大家分享如何使用raphael.js來完成地圖交互,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 = [];    function paintMap(R) {      var attr = {          "fill": "#97d6f5",          "stroke": "#eee",          "stroke-width": 1,          "stroke-linejoin": "round"      };        china.aomen = {          name: "澳門",          path: R.path("M413.032,.........省略若干......... ,414.183z").attr(attr)      }      china.hk = {          //格式同上      };  }      以上是我們將准備好的地圖路徑信息封裝到()函數中，並保存文件名為chinamapPath.js，供後面調用。   HTML   首先在head部分載入raphael.js庫文件和chinamapPath.js路徑信息文件。     代碼如下: <script type="text/javascript" src="raphael.js"></script>  <script type="text/javascript" src="chinamapPath.js"></script>      然後在body中需要放置地圖的位置放置div#map。     復制代碼 代碼如下: <div id="map"></div>      JAVASCRIPT   首先我們在頁面中調用地圖，方法如下：    代碼如下: window.onload = function () {      //繪制地圖      var R = Raphael("map", 600, 500);//將地圖載入到id為map的div中，並設置區域為600x500px大小。      paintMap(R);  }      這個時候我們用浏覽器打開會顯示載入後的地圖。接下來我們要給地圖中的對應的省份區域加上省份名稱，以及鼠標滑向每個省份區塊時的變色動畫效果。    代碼如下: window.onload = function () {      var R = Raphael("map", 600, 500);      //調用繪制地圖方法      paintMap(R);        var textAttr = {          "fill": "#000",          "font-size": "12px",          "cursor": "pointer"      };                     for (var state in china) {          china[state]['path'].color = Raphael.getColor(0.9);            (function (st, state) {                //獲取當前圖形的中心坐標              var xx = st.getBBox().x + (st.getBBox().width / 2);              var yy = st.getBBox().y + (st.getBBox().height / 2);                //寫入文字              china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);                st[0].onmouseover = function () {//鼠標滑向                  st.animate({fill: st.color, stroke: "#eee"}, 500);                  china[state]['text'].toFront();                  R.safari();              };              st[0].onmouseout = function () {//鼠標離開                  st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);                  china[state]['text'].toFront();                  R.safari();              };             })(china[state]['path'], state);      }  }      以上代碼中運用了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;                      br