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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
详解AngularJS 过滤器的使用
Jun 02 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
Vue创建头部组件示例代码详解
Oct 23 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
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
javascript实现简单的html5视频播放器
2015/05/06 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
node.js命令行教程图文详解
2019/05/27 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python制作小说爬虫实录
2017/08/14 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python异步存储数据详解
2019/03/19 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python缩进长度是否统一
2020/08/02 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
一些Unix笔试题和面试题
2013/01/22 面试题
最新大学生自我评价
2013/09/24 职场文书
报社实习生自荐信
2014/01/24 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
端午节寄语2015
2015/03/23 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
《假如》教学反思
2016/02/17 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
MySQL系列之十一 日志记录
2021/07/02 MySQL