這篇文章給大家介紹如何使用raphael.js繪制中國地圖，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
最近的數(shù)據(jù)統(tǒng)計項目中要用到中國地圖，也就是在地圖上動態(tài)的顯示某個時間段某個省份地區(qū)的統(tǒng)計數(shù)據(jù)，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。我給大家分享如何使用js來完成地圖交互。
先簡單介紹下raphael.js，raphael.js是一個很小的javascript庫，它可以在網(wǎng)頁中實現(xiàn)繪制各種矢量圖、各類圖表、以及圖像裁剪、旋轉(zhuǎn)、運動動畫等等功能。此外raphael.js還跨瀏覽器兼容，而且還兼容老掉牙的IE6啊。
我們需要準備一張矢量地圖，可以從網(wǎng)上找一張矢量地圖，或者使用illustrator繪制一份矢量地圖，然后導(dǎo)出為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 = {
//格式同上
};
}
以上是我們將準備好的地圖路徑信息封裝到()函數(shù)中，并保存文件名為chinamapPath.js，供后面調(diào)用。
首先在head部分載入raphael.js庫文件和chinamapPath.js路徑信息文件。
然后在body中需要放置地圖的位置放置p#map。
首先我們在頁面中調(diào)用地圖，方法如下：
window.onload = function () {
//繪制地圖
var R = Raphael("map", 600, 500);//將地圖載入到id為map的p中，并設(shè)置區(qū)域為600x500px大小。
paintMap(R);
}
這個時候我們用瀏覽器打開會顯示載入后的地圖。接下來我們要給地圖中的對應(yīng)的省份區(qū)域加上省份名稱，以及鼠標滑向每個省份區(qū)塊時的變色動畫效果。
window.onload = function () {
var R = Raphael("map", 600, 500);
//調(diào)用繪制地圖方法
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等等。
此外由于地圖尺寸原因，有些省份名稱在地圖中的顯示位置不恰當，需要修正偏移量，這樣看起來舒服點。
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 "內(nèi)蒙古":
xx -= 15;
yy += 65;
break;
default:
}
...
})
(china[state]['path'], state);
}
}
這樣一個基本的地圖效果就完成了。
關(guān)于如何使用raphael.js繪制中國地圖就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
