http://blog.csdn.net/gisshixisheng/article/details/42675897

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

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

  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. width: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. width: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. <body>
  104. <div id="left"></div>
  105. <div id="map">
  106. <div class="collapse_btn">
  107. <a id="collapse_btn" class="collapse_btn_a" title="点击折叠">《</a>
  108. </div>
  109. </div>
  110. </body>
  111. </html>

实现后的效果如下：

（转）Arcgis for JS之地图自适应调整的更多相关文章

  1. （转） Arcgis for js加载百度地图

    http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...

  2. Arcgis for js加载百度地图

    看转:https://blog.csdn.net/qq_41046162/article/details/80248281 通过学习了一段时间的arcgis for js,让我来讲一下如何在arcgi ...

  3. arcgis js之地图分屏同步

    arcgis js之地图分屏同步 原理: 新建两个map两个view或者一个map两个view.对地图进行移动事件绑定,在地图移动时同步地图方位 代码: views.forEach((view) =& ...

  4. ArcGis API JS 4.X本地化部署与地图的基础使用

    准备工作 首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19. 官方下载地址:https://developers.arcgis.com/downloads/ ar ...

  5. Arcgis for Js之鼠标经过显示对象名的实现

    在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效果. 为了有个直观的概念,先给大家看看实 ...

  6. （转）Arcgis for Js之鼠标经过显示对象名的实现

    http://blog.csdn.net/gisshixisheng/article/details/41889345 在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来 ...

  7. Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)

    原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲 ...

  8. Arcgis for JS之Cluster聚类分析的实现

    原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...

  9. Arcgis for js载入天地图

    综述:本节讲述的是用Arcgis for js载入天地图的切片资源. 天地图的切片地图能够通过esri.layers.TiledMapServiceLayer来载入.在此将之进行了一定的封装,例如以下 ...

随机推荐

  1. 暑假集训D20总结

    刷题 今天是瞎XX切题的一天 我要是不写题解的话,我自己都不知道刷了多少专题 数学什么的= = 生活 也就那样吧,没啥特别的 这两天倒是特别鬼畜 先是我点了一下某喵的$cena$,然后他的$cena$ ...

  2. 【翻译自mos文章】在12c数据库中，哪种audit trail 受到支持？

    在12c数据库中,哪种audit trail 受到支持? 来源于:What Audit Trail Types Are Supported For A 12c Database? (文档 ID 198 ...

  3. 【SDOI2008】【BZOJ2049】Cave 洞穴勘測

    Description 辉辉热衷于洞穴勘測.某天,他依照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘測,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成.而且每条通道连接了恰好 ...

  4. arm下用shell控制gpio

    创建脚本gpio.sh #!/bin/sh PIN=$ VALUE=$ if test -d /sys/class/gpio/gpio$PIN/ then echo $VALUE > /sys/ ...

  5. oc65--协议应用1，接口.做数据类型限定

    // WifeCondition.h #import <Foundation/Foundation.h> @protocol WifeCondition <NSObject> ...

  6. 倒排索引PForDelta压缩算法——基本假设和霍夫曼压缩同

    PForDelta算法 PForDelta算法最早由Heman在2005年提出,它允许同时对整个chunk数据(例128个数)进行压缩处理.基础思想是对于一个chunk的数列(例128个),认为其中占 ...

  7. 支撑百亿级应用的 NewSQL

    支撑百亿级应用的 NewSQL https://zhuanlan.zhihu.com/newsql/ 项目背景 初次接触 TiDB,是通过同程网首席架构师王晓波先生的分享,当时同程网正在使开发和数据库 ...

  8. Snowflake Snow Snowflakes(查找)

    http://poj.org/problem?id=3349 题意:给出n组数据,每组数据有六个数,这n组数据中若有两组数据不管是从某个数顺时针读还是逆时针读都相同,输出“Twin snowflake ...

  9. com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException: Duplicate entry 'admin' for key 'UK_dgxl7aijrr4hq8314exhw407s'

    严重: Servlet.service() for servlet [spring-mvc] in context with path [/learn] threw exception [Reques ...

  10. EasyUI TreeGrid 悬浮效果

    /* 鼠标悬停扩展*/ (function (hasgrid) { if (hasgrid) { /** * 表格提示 */ $.extend($.fn.datagrid.methods, { too ...