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>  

    实现后的效果如下：
  • 相关阅读:
    (转)Dockerfile安全介绍
    (转)浅析Docker运行安全
    (转)网络安全设备默认密码
    docker kali 相关初始化工作
    hibernate(结合springboot)入门
    idea 通过 Generate POJOs.groovy 生成实体类
    linux jdk 安装
    docker pstgres安装
    使用docker搭建FastDFS文件系统
    [docker]离线环境导入镜像
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972991.html
Copyright © 2011-2022 走看看