使用 Raphael.js 和 SVG 绘制交互式中国地图

使用 Raphael.js 和 SVG 绘制交互式中国地图

在近期的数据统计项目中，我们需要在中国地图上动态展示特定时间段内各省份的统计数据。为了实现这一目标，我们无需依赖 Flash 技术，仅使用 Raphael.js 库配合 SVG 图像即可实现地图的交互操作。本文将详细分享如何使用 JavaScript 完成地图的绘制与交互功能。

首先简要介绍 Raphael.js。这是一个轻量级的 JavaScript 库，能够在网页中绘制各种矢量图形、图表，并支持图像裁剪、旋转及运动动画等功能。此外，Raphael.js 具有良好的跨浏览器兼容性，甚至支持老旧的 IE6 浏览器。其官方网站地址为：http://raphaeljs.com/

准备工作

我们需要准备一张矢量地图。可以从网上下载矢量地图，或使用 Illustrator 自行绘制一份矢量地图，并将其导出为 SVG 格式文件。该文件可在浏览器中打开，从中提取以 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 结构引入

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 交互实现

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);
   } 
}