专栏首页跟牛老师一起学WEBGISArcgis for JS之地图自适应调整

Arcgis for JS之地图自适应调整

概述:本节讲述的内容为当浏览器大小发生变化或者地图展示区域的大小发生变化时,地图的自适应调整。地图的自适应常见于以下几种情况: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>

实现后的效果如下:

如有疑问,请联系:

QQ:1004740957

Email:niujp08@qq.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初识mapbox GL

    最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox...

    lzugis
  • Arcgis for javascript不同的状态下自定义鼠标样式

    俗话说:爱美之心,人皆有之。是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点。在本文,给大家讲讲在Arcgis for javascrip...

    lzugis
  • Echart在Openlayers的应用-热力图

    在前文中,有一篇文章讲述了Openlayers2结合Echart实现地图统计图,还以一篇文章讲述了结合heatmap.js实现Openlayers中热力图的展示...

    lzugis
  • C++ map 和 hashmap 区别

    1. stl map is an associative array where keys are stored in sorted order using b...

    用户7436765
  • Go语言:map使用笔记

    Go 的 map 是 hash map; C++ 的 map 是 tree (主流实现是红黑树); C++ 的 hash map 是unordered_ma...

    linjinhe
  • Basemap系列教程:使用shapefiles绘制地图

    译注:绘制地图时因为一些原因可能需要使用shapefile添加地图信息,比如很多软件中的关于中国的地图信息都不是很准确,当要明确标注中国边界信息时就会出问题。这...

    bugsuse
  • 初识mapbox GL

    最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox...

    lzugis
  • Go 语言学习之map

    在 Go 语言中,map 是一个具有键值对元素的无序集合,在这个集合中,键是唯一的,键对应的值可以通过键来读取、更新和删除。

    frankphper
  • java面试必知必会遍历map键值对的四种方式

    Map结构是一个键值对结构形式的集合,在平时的使用中也很常见,历史文章数据很早就写过使用map并发控制进行业务场景的处理,翻看历史文章就可找到。

    后端Coder
  • 推荐6-Go maps in action 翻译

    hash table 可能是计算机科学领域最重要的一种数据结构,不同的实现方式会有不同的特性,但通常来说都会提供快速查找、增加和删除的操作。Go 内置了一个名为...

    猿哥

扫码关注云+社区

领取腾讯云代金券