raphael.js绘制中国地图地图绘制方法_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:19:30

raphael.js绘制中国地图地图绘制方法_javascript技巧

raphael.js绘制中国地图地图绘制方法_javascript技巧:最近的数据统计项目中要用到中国地图，也就是在地图上动态的显示某个时间段某个省份地区的统计数据，我们不需要flash，仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。在本文中，我给大家分享如何使用js来完成地图交互。先简单介绍下raphae

推荐度：

点击下载本文 文档为doc格式

导读raphael.js绘制中国地图地图绘制方法_javascript技巧:最近的数据统计项目中要用到中国地图，也就是在地图上动态的显示某个时间段某个省份地区的统计数据，我们不需要flash，仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。在本文中，我给大家分享如何使用js来完成地图交互。先简单介绍下raphae

最近的数据统计项目中要用到中国地图，也就是在地图上动态的显示某个时间段某个省份地区的统计数据，我们不需要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路径信息文件。

代码如下: