利用百度地图JSAPI生成h7n9禽流感分布图实现代码


Posted in Javascript onApril 15, 2013

下图为使用百度地图JSAPI生成的H7N9感染分布图示例,其中的数据来自新华网(4.8号),截图如下:
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
使用的功能列表如下:
1.自定义版权控件功能,即(1)对应的数据来源部分,代码如下:

var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); 
map.addControl(cr); //添加版权控件 
var bs = map.getBounds(); 
cr.addCopyright({id: 1, content: "<a href='http://news.xinhuanet.com/local/2013-04/08/c_115307243.htm' style='fontFamily:微软雅黑;font-size:18px;background:white'>H7N9数据来源</a>", bounds: bs});

2.获取行政边界功能,即(2)对应的四个省市边界,代码如下:
var bdary = new BMap.Boundary();//行政边界服务 
var length=data.length; 
for (var index=0;index<length ;index++ ) 
{ 
(function(index){ //闭包用法 
bdary.get(data[index].city, function(rs){ //获取行政区域 
var count = rs.boundaries.length; //行政区域有几部分多边形组成 
var bounds; 
var center; 
for(var i = 0; i < count; i++){ 
ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: data[index].color,fillColor: data[index].color,fillOpacity:0.8 }); //建立多边形覆盖物 
if (!bounds)//取行政区域第一组成部分的中心点 
{ 
center=ply.getBounds().getCenter(); 
} 
map.addOverlay(ply); //添加行政边界 
} 
}); 
})(index); 
}

3. 添加marker点和label,即(3,4)显示表示人的图片及感染人数的label:
var myIcon = new BMap.Icon("infection.png", new BMap.Size(27,60)); 
var marker1 = new BMap.Marker(center,{icon:myIcon}); // marker 
map.addOverlay(marker1); 
var label = new BMap.Label("人数"+data[index].infect,{offset:new BMap.Size(-10,0)});//显示label 
marker1.setLabel(label);

完整代码如下:
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} 
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;} 
#r-result{height:100%;width:20%;float:left;} 
</style> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> 
<title>H7N9分布图</title> 
</head> 
<body> 
<div id="allmap"></div> 
</body> 
</html> 
<script type="text/javascript"> 
var map = new BMap.Map("allmap"); 
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5); 
map.enableScrollWheelZoom(); 
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); 
map.addControl(cr); //添加版权控件 
var bs = map.getBounds(); 
cr.addCopyright({id: 1, content: "<a href='http://news.xinhuanet.com/local/2013-04/08/c_115307243.htm' style='fontFamily:微软雅黑;font-size:18px;background:white'>H7N9数据来源</a>", bounds: bs}); 
map.setViewport(new BMap.Bounds(new BMap.Point(114.603589,26.853244),new BMap.Point(122.863975,35.288772))); //调整视野 
var data=[{city:'上海市',infect:10,color:'#FF0000'},{city:'江苏省',infect:6,color:'#EE3B3B'},{city:'安徽省',infect:2,color:'#FFAEB9'},{city:'浙江省',infect:3,color:'#EE3B3B'}]; 
//上海(10例,死亡4例)、江苏(6例)、安徽(2例)、浙江(3例,死亡2例) 4.8号数据 
var bdary = new BMap.Boundary(); 
var length=data.length; 
for (var index=0;index<length ;index++ ) 
{ 
(function(index){ //闭包用法 
bdary.get(data[index].city, function(rs){ //获取行政区域 
var count = rs.boundaries.length; //行政区域有几部分多边形组成 
var bounds; 
var center; 
for(var i = 0; i < count; i++){ 
ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: data[index].color,fillColor: data[index].color,fillOpacity:0.8 }); //建立多边形覆盖物 
if (!bounds)//取行政区域第一组成部分的中心点 
{ 
center=ply.getBounds().getCenter(); 
} 
map.addOverlay(ply); //添加覆盖物 
} var myIcon = new BMap.Icon("infection.png", new BMap.Size(27,60)); 
var marker1 = new BMap.Marker(center,{icon:myIcon}); // marker 
map.addOverlay(marker1); 
var label = new BMap.Label("人数"+data[index].infect,{offset:new BMap.Size(-10,0)});//显示label 
marker1.setLabel(label); 
}); 
})(index); 
} 
</script>

Done!
Javascript 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 #Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 #Javascript
关于jQuery object and DOM element
Apr 15 #Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 #Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 #Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 #Javascript
深入了解javascript中的prototype与继承
Apr 14 #Javascript
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
利用Python如何生成便签图片详解
2018/07/09 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
幼师专业求职推荐信
2013/11/08 职场文书
保安员岗位职责
2013/11/17 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
禁烟标语大全
2014/06/11 职场文书
五一劳动节活动总结
2015/02/09 职场文书
求职自我评价范文
2015/03/09 职场文书
让世界充满爱观后感
2015/06/10 职场文书