利用百度地图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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
Sort()函数的多种用法
Mar 20 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
Javascript中的数学函数
2007/04/04 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python实现的归并排序算法示例
2017/11/21 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
详解Python自建logging模块
2018/01/29 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python @property及getter setter原理详解
2020/03/31 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
工程开工庆典邀请函
2014/02/01 职场文书