（转）Arcgis for JS之地图自适应调整

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

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

 

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

 

[html] view plain copy
 
 print?
  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.   
  104. <body>  
  105. <div id="left"></div>  
  106. <div id="map">  
  107.     <div class="collapse_btn">  
  108.         <a id="collapse_btn" class="collapse_btn_a" title="点击折叠">《</a>  
  109.     </div>  
  110. </div>  
  111. </body>  
  112. </html>  

 

实现后的效果如下：

posted @ 2017-06-09 17:31  疯子110  阅读(1550)  评论(0)  编辑  收藏  举报