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. 【codeforces 796A】Buying A House

    [题目链接]:http://codeforces.com/contest/796/problem/A [题意] 让你选一个最靠近女票的,且能买的房子; 输出你和你女票的距离; [题解] 枚举 [Num ...

  2. Hibernate基于注解annotation的配置

    Annotation在框架中是越来越受欢迎了,因为annotation的配置比起XML的配置来说方便了很多,不需要大量的XML来书写,方便简单了很多,只要几个annotation的配置,就可以完成我们 ...

  3. JVM内存监控(五)

    频繁fullgc排查 jvm配置 -Xms200m -Xmx200m -Xmn50m -XX:PermSize=30m -XX:+HeapDumpBeforeFullGC -XX:+HeapDumpA ...

  4. route 详解

    语法: [root@test root]# route [-nee] [root@test root]# route add [-net|-host]目标主机或网域[netmask] [gw|dev] ...

  5. WGS84坐标系图层转火星坐标系（是整个图层转哟，不是转单点坐标）

    开篇唠叨(着急的略过) 大天朝“火星坐标系”小科普:是一种国家保密插件,对真实坐标系统进行人为的加偏处理,将真实的坐标加密成虚假的坐标,加密后的坐标被称为火星坐标系统.所有的电子地图所有的导航设备,都 ...

  6. 一起talk C栗子吧（第七十七回：C语言实例--DIY ls命令续）

    各位看官们,大家好.上一回中咱们说的是DIY cat命令的样例.这一回咱们说的样例是:DIY ls命令续. 闲话休提,言归正转.让我们一起talk C栗子吧! 我们在前面的章回中DIY过ls命令.时间 ...

  7. 2014秋C++ 第8周项目 分支程序设计

    课程主页在http://blog.csdn.net/sxhelijian/article/details/39152703.课程资源在云学堂"贺老师课堂"同步展示,使用的帐号请到课 ...

  8. TDD尝试：nodejs单元测试

    单元测试是最小化的测试方式,也是TDD的做法. TDD概念如下图: 通过测试反馈推进开发,ruby是推崇这种编程方式的. nodejs有如下常用单元测试模块 1.mocha Mocha是一个基于nod ...

  9. luogu1514 引水入城

    题目大意 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个NN 行\times M×M 列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市 ...

  10. Android Back键和Home键的区别

    back键 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Destroy()方法来,销毁当前Activity.当此Activit ...