http://blog.csdn.net/gisshixisheng/article/details/42675897

概述：本节讲述的内容为当浏览器大小发生变化或者地图展示区域的大小发生变化时，地图的自适应调整。地图的自适应常见于以下几种情况：1、系统中有收缩或者全屏的按钮；2、按F12，进入调试状态。

其实，地图自适应调整是一个很简单的事情，但是大多数我们的系统中会用到，实现地图的自适应主要是map div的大小的自适应调整，代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  6. <title>Simple Map</title>
  7. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
  8. <style>
  9. html, body, #left, #map {
  10. height: 100%;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. body {
  15. background-color: #fff;
  16. overflow: hidden;
  17. font-family: "Trebuchet MS";
  18. }
  19. #left{
  20. float: left;
  21. width:200px;
  22. background: #014CC9;
  23. }
  24. .collapse_btn{
  25. position: absolute;
  26. top: 50%;
  27. left: 0px;
  28. z-index: 99;
  29. }
  30. .collapse_btn_a{
  31. padding: 10px 0px;
  32. background: #33CCFF;
  33. border-radius: 3px;
  34. }
  35. .collapse_btn_a:hover{
  36. cursor: pointer;
  37. background: #11aaFF;
  38. }
  39. #map{
  40. position: relative;
  41. float: left;
  42. width:800px;
  43. background: #7EABCD;
  44. }
  45. </style>
  46. <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
  47. <script src="jquery-1.8.3.js"></script>
  48. <script>
  49. var map;
  50. require([
  51. "esri/map",
  52. "esri/layers/ArcGISTiledMapServiceLayer",
  53. "dojo/on",
  54. "dojo/dom",
  55. "dojo/domReady!"],
  56. function(Map,
  57. Tiled,
  58. on,
  59. dom
  60. ) {
  61. $("#map").css("width",($(window).width()-200)+"px");
  62. map = new Map("map",{logo:false,autoResize:true});
  63. var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");
  64. map.addLayer(tiled);
  65. var mapCenter = new esri.geometry.Point(103.847, 36.0473, map.spatialReference);
  66. map.centerAndZoom(mapCenter,4);
  67. on(dom.byId("collapse_btn"), "click", function(){
  68. var collapseState = $("#collapse_btn").html();
  69. console.log(collapseState);
  70. if(collapseState==="《"){//折叠DIV
  71. console.log(true);
  72. $("#collapse_btn").html("》");
  73. $("#left").hide();
  74. $("#map").css("width",($(window).width())+"px");
  75. map.resize(true);
  76. map.reposition();
  77. }
  78. else{//展开DIV
  79. console.log(false);
  80. $("#collapse_btn").html("《");
  81. $("#left").show();
  82. $("#map").css("width",($(window).width()-200)+"px");
  83. map.resize(true);
  84. map.reposition();
  85. }
  86. });
  87. });
  88. window.onresize=function(){
  89. var collapseState = $("#collapse_btn").html();
  90. if(collapseState==="《"){//展开状态
  91. $("#map").css("width",($(window).width()-200)+"px");
  92. map.resize(true);
  93. map.reposition();
  94. }
  95. else{//折叠状态
  96. $("#map").css("width",($(window).width())+"px");
  97. map.resize(true);
  98. map.reposition();
  99. }
  100. }
  101. </script>
  102. </head>
  103. <body>
  104. <div id="left"></div>
  105. <div id="map">
  106. <div class="collapse_btn">
  107. <a id="collapse_btn" class="collapse_btn_a" title="点击折叠">《</a>
  108. </div>
  109. </div>
  110. </body>
  111. </html>

实现后的效果如下：

（转）Arcgis for JS之地图自适应调整的更多相关文章

  1. （转） Arcgis for js加载百度地图

    http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...

  2. Arcgis for js加载百度地图

    看转:https://blog.csdn.net/qq_41046162/article/details/80248281 通过学习了一段时间的arcgis for js,让我来讲一下如何在arcgi ...

  3. arcgis js之地图分屏同步

    arcgis js之地图分屏同步 原理: 新建两个map两个view或者一个map两个view.对地图进行移动事件绑定,在地图移动时同步地图方位 代码: views.forEach((view) =& ...

  4. ArcGis API JS 4.X本地化部署与地图的基础使用

    准备工作 首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19. 官方下载地址:https://developers.arcgis.com/downloads/ ar ...

  5. Arcgis for Js之鼠标经过显示对象名的实现

    在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效果. 为了有个直观的概念,先给大家看看实 ...

  6. （转）Arcgis for Js之鼠标经过显示对象名的实现

    http://blog.csdn.net/gisshixisheng/article/details/41889345 在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来 ...

  7. Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)

    原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲 ...

  8. Arcgis for JS之Cluster聚类分析的实现

    原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...

  9. Arcgis for js载入天地图

    综述:本节讲述的是用Arcgis for js载入天地图的切片资源. 天地图的切片地图能够通过esri.layers.TiledMapServiceLayer来载入.在此将之进行了一定的封装,例如以下 ...

随机推荐

  1. Java基础——基础数据类型与读入输出

    首先我们写完了HelloWorld就学会了java的一种输出 System.out.println() 用起来就像是被强化过的C++的puts函数 或者就是自带endl的cout函数,中间的" ...

  2. jenkins简单持续构建

    一.安装jenkins 二.将需要持续构建的java project打包成jar文件 1.选择导出需要运行的main方法所在java类

  3. [TS-A1489][2013中国国家集训队第二次作业]抽奖[概率dp]

    概率dp第一题,开始根本没搞懂,后来看了09年汤可因论文才基本搞懂,关键就是递推的时候做差比较一下,考虑新加入的情况对期望值的贡献,然后推推公式(好像还是不太会推qaq...) #include &l ...

  4. [POJ2104] 区间第k大数 [区间第k大数，可持久化线段树模板题]

    可持久化线段树模板题. #include <iostream> #include <algorithm> #include <cstdio> #include &l ...

  5. jxl中报表单元格合并问题

    WritableWorkbook wwb = Workbook.createWorkbook(endFileName);WritableSheet ws = wwb.createSheet(" ...

  6. JAVA大数据项目+整理的Mysql数据库32条军规

    http://www.jianshu.com/users/a9b2d43bb94e/latest_articles

  7. linux 内核 2.5-4.7 版本change

    https://kernelnewbies.org/LinuxVersions?action=show&redirect=Linux26Changes https://kernelnewbie ...

  8. 2.3－STP生成树

    2.3-STP生成树     单点失效(signle point of failure)及其解决方法:     当两个Segement之间只有一条物理连接时就有可能出现单点失效→ 单方面的故障导致全网 ...

  9. （转）linux口令相关文件（/etc/passwd和/etc/shadow）

    在linux中,口令文件在/etc/passwd中,早期的这个文件直接存放加密后的password,前两位是"盐"值,是一个随机数.后面跟的是加密的password.为了安全,如今 ...

  10. 在mac osX下安装openCV，used for python

    OpenCV是个开源的图像处理库,里面的内容多多. 想了解很多其它,请自行百度咯~ 篇blog是记录在mac下.安装openCV.然后使用python来引用openCV库. 环境是: Python 2 ...