raphael.js绘制中国地图 地图绘制方法


Posted in Javascript onFebruary 12, 2014

最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。在本文中,我给大家分享如何使用js来完成地图交互。

raphael.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路径信息文件。

 

<script type="text/javascript" src="raphael.js"></script> 
<script type="text/javascript" src="chinamapPath.js"></script>

然后在body中需要放置地图的位置放置div#map。
 

<div id="map"></div>

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); 
   } 
}
Javascript 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
js post提交调用方法
Feb 12 #Javascript
JQuery中操作Css样式的方法
Feb 12 #Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 #Javascript
js判断设备是否为PC并调整图片大小
Feb 12 #Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 #Javascript
js弹出div并显示遮罩层
Feb 12 #Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 #Javascript
You might like
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP基础知识回顾
2012/08/16 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
Python中的getopt函数使用详解
2015/07/28 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python 实现微信自动回复的方法
2020/09/11 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
Linux机考试题
2015/07/17 面试题
个人自荐书
2013/12/20 职场文书
医院实习介绍信
2014/01/12 职场文书
2014年护理部工作总结
2014/11/14 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书