利用百度地图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 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
VUE中使用MUI方法
Feb 12 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
Element-UI+Vue模式使用总结
Jan 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
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
再谈javascript原型继承
2014/11/10 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python实现学校管理系统
2018/01/11 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
营销与策划个人求职信
2013/09/22 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年外联部工作总结
2014/11/17 职场文书
生日宴会祝酒词
2015/08/10 职场文书