Arcgis for JS之地图自适应调整

浏览数：24 / 时间：2015年06月09日

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

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
    <style>
        html, body, #left, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #fff;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
        #left{
            float: left;
            width:200px;
            background: #014CC9;
        }
        .collapse_btn{
            position: absolute;
            top: 50%;
            left: 0px;
            z-index: 99;
        }
        .collapse_btn_a{
            padding: 10px 0px;
            background: #33CCFF;
            border-radius: 3px;
        }
        .collapse_btn_a:hover{
            cursor: pointer;
            background: #11aaFF;
        }
        #map{
            position: relative;
            float: left;
            width:800px;
            background: #7EABCD;
        }
    </style>
    <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <script src="jquery-1.8.3.js"></script>
    <script>
        var map;
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "dojo/on",
            "dojo/dom",
            "dojo/domReady!"],
        function(Map,
             Tiled,
             on,
             dom
        ) {
            $("#map").css("width",($(window).width()-200)+"px");
            map = new Map("map",{logo:false,autoResize:true});
            var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");
            map.addLayer(tiled);
            var mapCenter = new esri.geometry.Point(103.847, 36.0473, map.spatialReference);
            map.centerAndZoom(mapCenter,4);
            on(dom.byId("collapse_btn"), "click", function(){
                var collapseState = $("#collapse_btn").html();
                console.log(collapseState);
                if(collapseState==="《"){//折叠DIV
                    console.log(true);
                    $("#collapse_btn").html("》");
                    $("#left").hide();
                    $("#map").css("width",($(window).width())+"px");
                    map.resize(true);
                    map.reposition();
                }
                else{//展开DIV
                    console.log(false);
                    $("#collapse_btn").html("《");
                    $("#left").show();
                    $("#map").css("width",($(window).width()-200)+"px");
                    map.resize(true);
                    map.reposition();
                }
            });
        });
        window.onresize=function(){
            var collapseState = $("#collapse_btn").html();
            if(collapseState==="《"){//展开状态
                $("#map").css("width",($(window).width()-200)+"px");
                map.resize(true);
                map.reposition();
            }
            else{//折叠状态
                $("#map").css("width",($(window).width())+"px");
                map.resize(true);
                map.reposition();
            }
        }
    </script>
</head>

<body>
<div id="left"></div>
<div id="map">
    <div class="collapse_btn">
        <a id="collapse_btn" class="collapse_btn_a" title="点击折叠">《</a>
    </div>
</div>
</body>
</html>

实现后的效果如下：

技术分享