• （转）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.             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.             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>  

    实现后的效果如下：
  • 相关阅读:
    【转】EditText获取焦点不自动弹出键盘设置--失去焦点的方法，不错
    【转】eclipse android 设置及修改生成apk的签名文件 -- custom debug keystore
    【转】Adnroid4.0 签名混淆打包（conversion to dalvik format failed with error 1）
    【转】Android Fragment 基本介绍--不错
    【转】java代码中实现android背景选择的selector-StateListDrawable的应用
    【转】android官方侧滑菜单DrawerLayout详解
    【转】微信Android SDK示例代码及运行方法
    【转】Eclipse中设置ButterKnife进行注解式开发步骤 -- 不错
    【转】ButterKnife基本使用--不错
    python 命令行：help()，'more'不是内部或外部命令，也不是可运行的程序或批处理文件
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972991.html
Copyright © 2020-2023  润新知