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. hdu 3549 最大流

    #include<stdio.h> #include<string.h> #include<queue> #include<iostream> usin ...

  2. 【ACM】hdu_1276_士兵队列训练问题_201308131032

    士兵队列训练问题Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  3. href=#与 href=javascript:void(0) 的区别

    <a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" ...

  4. Java API 读取HDFS的单文件

    HDFS上的单文件: -bash-3.2$ hadoop fs -ls /user/pms/ouyangyewei/data/input/combineorder/repeat_rec_categor ...

  5. ADS-B显示终端6.8

    更新日志; 本次更新依旧主要注重是BUG修正. 1 改动鼠标移动时地图重绘的BUG 鼠标移动时地图即发生重绘,占用了CPU资源,修正后仅仅当鼠标点击选中对象或拖动对象时地图才会发生重绘.极大程度上节省 ...

  6. Html5笔记 表格 布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML导航 - 点击更改背景

    步骤一: 在须要添加效果的<li>标签中添加onclick事件:<li onclick="setcurrent(this)"> 步骤二: 加入JS代码: f ...

  8. hdu1116 Play on Words--并查集

    原题链接: pid=1116">http://acm.hdu.edu.cn/showproblem.php? pid=1116 一:原题内容 Problem Description S ...

  9. mongoDB学习笔记——存取图片（C#)

    作为一个NoSql数据库的代表,存取多媒体数据,应该是强项吧?那么,图片在mongoDB里是如何存取的呢?(其实,关系型数据库存取图片也一点问题没有,所以我看NoSql的强项不在于是否存储多媒体,而在 ...

  10. bzoj 2005 & 洛谷 P1447 [ Noi 2010 ] 能量采集 —— 容斥 / 莫比乌斯反演

    题目:bzoj 2005 https://www.lydsy.com/JudgeOnline/problem.php?id=2005   洛谷 P1447 https://www.luogu.org/ ...