UDN-企业互联网技术人气社区

板块导航

浏览  : 754
回复  : 2

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

[复制链接]
西北的风的头像 楼主
  本文将详细介绍下如何使用百度地图JSAPI生成的H7N9感染分布图,有对百度api感兴趣的朋友可以参考下哈,希望可以帮助到你

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

  1. var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});
  2. map.addControl(cr); //添加版权控件
  3. var bs = map.getBounds();
  4. 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)对应的四个省市边界,代码如下:
  
  复制代码 代码如下:

  1. var bdary = new BMap.Boundary();//行政边界服务
  2. var length=data.length;
  3. for (var index=0;index<length ;index++ )
  4. {
  5. (function(index){ //闭包用法
  6. bdary.get(data[index].city, function(rs){ //获取行政区域
  7. var count = rs.boundaries.length; //行政区域有几部分多边形组成
  8. var bounds;
  9. var center;
  10. for(var i = 0; i < count; i++){
  11. ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: data[index].color,fillColor: data[index].color,fillOpacity:0.8 }); //建立多边形覆盖物
  12. if (!bounds)//取行政区域第一组成部分的中心点
  13. {
  14. center=ply.getBounds().getCenter();
  15. }
  16. map.addOverlay(ply); //添加行政边界
  17. }
  18. });
  19. })(index);
  20. }
复制代码

  3. 添加marker点和label,即(3,4)显示表示人的图片及感染人数的label:
  
  复制代码 代码如下:

  1. var myIcon = new BMap.Icon("infection.png", new BMap.Size(27,60));
  2. var marker1 = new BMap.Marker(center,{icon:myIcon}); // marker
  3. map.addOverlay(marker1);
  4. var label = new BMap.Label("人数"+data[index].infect,{offset:new BMap.Size(-10,0)});//显示label
  5. marker1.setLabel(label);
复制代码

  完整代码如下:
  
  复制代码 代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css">
  6. body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
  7. #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
  8. #r-result{height:100%;width:20%;float:left;}
  9. </style>
  10. <script type="text/JavaScript" src="http://api.map.baidu.com/api?v=1.4"></script>
  11. <title>H7N9分布图</title>
  12. </head>
  13. <body>
  14. <div id="allmap"></div>
  15. </body>
  16. </html>
  17. <script type="text/JavaScript">
  18. var map = new BMap.Map("allmap");
  19. map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
  20. map.enableScrollWheelZoom();
  21. var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});
  22. map.addControl(cr); //添加版权控件
  23. var bs = map.getBounds();
  24. 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});
  25. map.setViewport(new BMap.Bounds(new BMap.Point(114.603589,26.853244),new BMap.Point(122.863975,35.288772))); //调整视野
  26. var data=[{city:'上海市',infect:10,color:'#FF0000'},{city:'江苏省',infect:6,color:'#EE3B3B'},{city:'安徽省',infect:2,color:'#FFAEB9'},{city:'浙江省',infect:3,color:'#EE3B3B'}];
  27. //上海(10例,死亡4例)、江苏(6例)、安徽(2例)、浙江(3例,死亡2例) 4.8号数据
  28. var bdary = new BMap.Boundary();
  29. var length=data.length;
  30. for (var index=0;index<length ;index++ )
  31. {
  32. (function(index){ //闭包用法
  33. bdary.get(data[index].city, function(rs){ //获取行政区域
  34. var count = rs.boundaries.length; //行政区域有几部分多边形组成
  35. var bounds;
  36. var center;
  37. for(var i = 0; i < count; i++){
  38. ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: data[index].color,fillColor: data[index].color,fillOpacity:0.8 }); //建立多边形覆盖物
  39. if (!bounds)//取行政区域第一组成部分的中心点
  40. {
  41. center=ply.getBounds().getCenter();
  42. }
  43. map.addOverlay(ply); //添加覆盖物
  44. }

  45. var myIcon = new BMap.Icon("infection.png", new BMap.Size(27,60));
  46. var marker1 = new BMap.Marker(center,{icon:myIcon}); // marker
  47. map.addOverlay(marker1);
  48. var label = new BMap.Label("人数"+data[index].infect,{offset:new BMap.Size(-10,0)});//显示label
  49. marker1.setLabel(label);
  50. });
  51. })(index);
  52. }
  53. </script>
复制代码
 
  Done!

相关帖子

发表于 2017-1-17 14:22:17 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

发表于 2017-1-17 17:43:40 来自手机 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部