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实现划词标记+划词搜索功能
Mar 06 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
JsRender for object语法简介
Oct 31 Javascript
7个jQuery最佳实践
Jan 12 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
实例讲解JavaScript 计时事件
Jul 04 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实现图片旋转效果实例代码
2014/10/01 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
js树形控件脚本代码
2008/07/24 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
详解package.json版本号规则
2019/08/01 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python复制文件代码实现
2013/12/23 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Djang中静态文件配置方法
2015/07/30 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python安装Scrapy图文教程
2017/08/14 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
2014年安全生产大检查方案
2014/05/13 职场文书
酒店节能减排方案
2014/05/26 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
县委务虚会发言材料
2014/10/20 职场文书
党支部先进事迹材料
2014/12/24 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
离婚上诉状范文
2015/05/23 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
MySQL修炼之联结与集合浅析
2021/10/05 MySQL