当前位置：Gxlcms > JavaScript > raphael.js绘制中国地图地图绘制方法_javascript技巧

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

时间：2021-07-01 10:21:17 帮助过：6人阅读

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

代码如下: