zoukankan      html  css  js  c++  java

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

    实现后的效果如下：
  • 相关阅读:
    CS229 6.4 Neurons Networks Autoencoders and Sparsity
    CS229 6.3 Neurons Networks Gradient Checking
    【Leetcode】【Easy】Min Stack
    【Leetcode】【Easy】Merge Sorted Array
    【Leetcode】【Easy】ZigZag Conversion
    【Leetcode】【Easy】Valid Palindrome
    【Leetcode】【Easy】Reverse Integer
    【Leetcode】【Easy】Palindrome Number
    【Leetcode】【Easy】Length of Last Word
    【Leetcode】【Easy】Remove Nth Node From End of List
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972991.html
Copyright © 2011-2022 走看看