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 条评论
登录 后参与评论

相关文章

来自专栏JackieZheng

AngularJS入门心得1——directive和controller如何通信

  粗略地翻了一遍《JavaScript DOM编程艺术》,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too...

2356
来自专栏贾老师の博客

Bash Style Guide

1192
来自专栏漫漫前端路

记录面试中一些回答不够好的题(Vue 居多)

grid 学习:https://www.jianshu.com/p/d183265a8dad

4432
来自专栏诸葛青云的专栏

C语言编程实例:清空对方应用程序

今天的文章跟大家讲一下,C语言中的文件操作——遍历文件夹和删除文件,以及如何应用这两个技能来写一个有趣的小程序,这篇文章涉及的知识点很少,也很简单,所以这篇文章...

1810
来自专栏游戏杂谈

Perl遍历目录

1、默认activePerl下的采用的编码是gbk,所以需要将字符串转为gbk才不会显示乱码

1271
来自专栏jianhuicode

上手React Native--常用属性介绍

这几天打算学习并实践ReactNative,学习记录中有不对的地方请大家指出来,互相交流。(-_-)   关于学习ReactNative需要准备的基础知识,①...

2577
来自专栏程序员宝库

精读《高性能 javascript》

本期我来给大家推荐的书是《高性能JavaScript》,在这本书中我们能够了解 javascript 开发过程中的性能瓶颈,如何提升各方面的性能,包括代码的加载...

1162
来自专栏技术点滴

桥接模式(Bridge)

桥接模式(Bridge) 桥接模式(Bridge)[Handle/Body] 意图:将抽象部分与它的实现部分分离,使他们都可以独立的变化。 应用:不同系统平台的...

2316
来自专栏james大数据架构

原生js写的贪吃蛇网页版游戏特效

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <body><title...

2875
来自专栏前端杂货铺

History API与浏览器历史堆栈管理

移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由,这种实现不存在...

5095

扫码关注云+社区

领取腾讯云代金券