raphael.js繪製中國地圖

來源:互聯網
上載者:User

 在本文中給大家分享如何使用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;                     break;                 case "甘肅":                     xx -= 40;                     yy -= 30;                     break;                 case "陝西":                     xx += 5;                     yy += 10;                     break;                 case "內蒙古":                     xx -= 15;                     yy += 65;                     break;                 default:             }             ...       })(china[state]['path'], state);    } }  
相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。