拉斐尔. js中国地图制图方法

中国地图用于近期数据统计项目，即在地图上动态显示某省某时段的统计数据。我们不需要flash，只依靠raphael.js和SVG图像来完成地图的交互操作。在本文中，我将与您分享如何使用js来完成地图交互。

Raphael.js是一个小型的javascript库，可以在网页中绘制各种矢量图、各种图表、图像裁剪、旋转、运动动画等。此外，raphael.js兼容各种浏览器，也兼容旧的IE6。hael.js官方网站地址：http://raphaeljs.com/准备工作我们需要准备一张矢量图，可以在网上找到或者用illustrator绘制，然后导出成SVG格式的文件。这个文件可以在浏览器中打开，然后可以提取其中的路径信息(m开头的坐标)。并按照chinamapPath.js的格式准备地图路径信息.复制代码如下： var China=[]；函数paint map(R){ var attr={ ' fill ' : ' # 97 d6f 5 '，' stroke': '#eee '，' stroke-width': 1，' stroke-line join ' : ' round ' }；China.aomen={name:' macau '，path: R.path('M413.032，................}以上，我们将准备好的地图路径信息封装到()函数中，保存为chinamapPath.js供以后调用。首先，HTML在头部加载raphael.js库文件和chinamapPath.js路径信息文件。复制了以下代码： script type=' text/JAVAScript ' src=' http : Raphael . js '/script script type=' text/JAVAScript ' src=' http : chinmappath . js '/script。然后，将div#map放置在需要将地图放置在正文中的位置。复制代码如下：div id='map'/div JAVASCRIPT首先我们在页面中调用地图如下：复制代码如下： window . onload=function(){//绘制地图var R=Raphael('map '，600，500)；//将地图加载到id为map的div中，并将区域设置为600x500px。绘画地图；}此时，当我们在浏览器中打开它时，将显示加载的地图。接下来，我们将把省份名称添加到地图中对应的省份，以及鼠标滑动到每个省份块时的变色动画效果。复制代码如下： window . onload=function(){ var r=Raphael(' map '，600，500)；//调用画图方法paint map(R)；var textAttr={ 'fill': '#000 '，' font-size': '12px '，' cursor ' : ' pointer ' }；for(var state in China){ China[state][' path ']。color=Raphael . getcolor(0.9)；(函数(st，state) {//获取中心坐标var xx=ST. getbbox()。x (ST. getbbox()。宽度/2 );var yy=st.getBBox()。y(ST . GetBox()。高度/2)；//写出文字China [state] ['text']=r.text(中国YY xx[state][' name '])。attr(text attr)；St [0]。onmouseover=function(){//鼠标滑动到st. animate ({fill3360st。color，stroke:' # eee'}，500)；中国[国家]['文本']。toFront()；r . safari()；};St[0]。onmouseout=function () {//鼠标离开St. animate ({fill:' # 97d6f5 '，stroke:' # eee'}，500)；中国[国家]['文本']。toFront()；r . safari()；};})(中国[州]['路径']，州)；}}以上代码中使用了raphael提供的方法：getColor、getBBox、animate、toFront等。这些都可以在拉斐尔的文献中找到，本文不再赘述。此外，由于地图尺寸的原因，有些省份的名称在地图中显示不正确，因此需要纠正偏移，使其看起来舒适。复制代码如下： window . onload=function(){ var r=Raphael(' map '，600，500)；switch(China[state][' name ']){ case '江苏' : xx=5；YY-=10；打破；案例'河北' : xx-=10；yy=20打破；案例'天津' : xx=10yy=10打破；案例'上海' : xx=10打破；案例'广东' : YY-=10；打破；案例‘澳门’: YY=10；打破；案例‘香港’: xx=20；YY=5；打破；案例‘甘肃’: xx-=40；YY-=30；打破；案例‘陕西’: xx=5；yy=10打破；案例‘内蒙古’: xx-=15；yy=65打破；default: }.})(中国[州]['路径']，州)；} }