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. 【 Educational Codeforces Round 51 (Rated for Div. 2) F】The Shortest Statement

    [链接] 我是链接,点我呀:) [题意] [题解] 先处理出来任意一棵树. 然后把不是树上的边处理出来 对于每一条非树边的点(最多21*2个点) 在原图上,做dijkstra 这样就能处理出来这些非树 ...

  2. Postman做http接口功能测试

    首先,做接口测试前要有明确的接口文档(e.g. http://test.nnzhp.cn/wiki/index.php?doc-view-59) ,假设已经在PC上安装好了Postman. 1. 普通 ...

  3. [Bzoj3940] [AC自动机，USACO 2015 February Gold] Censor [AC自动机模板题]

    AC自动机模板题(膜jcvb代码) #include <iostream> #include <algorithm> #include <cstdio> #incl ...

  4. Nginx不转发http header

    使用nginx做http代理时,在Header中使用了一个名为api_key的属性,碰到http header不转发的问题. 问题源码: rc = ngx_http_parse_header_line ...

  5. MFS搭建

    MooseFS是一个分布式存储的框架,其具有如下特性:     1.Free(GPL)     2.通用文件系统,不需要修改上层应用就可以使用     3.可以在线扩容,体系架构可伸缩性极强.     ...

  6. Clojure：两步发送iOS推送通知（apns）

    首先在project.clj中,添加对notnoop 类库的引用:[com.notnoop.apns/apns "0.2.3"] 然后使用如下方法就可以发送推送消息了: (ns d ...

  7. PHP array_fill()

    定义和用法 array_fill() 函数用给定的值填充数组,返回的数组有 number 个元素,值为 value.返回的数组使用数字索引,从 start 位置开始并递增.如果 number 为 0 ...

  8. HDU 5431

    由于最长不超过30个字符(由K的范围确定),于是,枚举所有的字符串,二分中使用二分就可以确定第K小了. #include <iostream> #include <cstdio> ...

  9. BC ROUND 43# 03 HDU 5266

    弱啊弱啊,我用了扩展指令,然后大牛告诉我,只对VC++有用,对G++没用的..shit,三题就这样没了. 方法是使用ST在线算法,O(1)查询,然后用线段树维护..呃感觉这个好慢.看了大斌神的是用LC ...

  10. 设置ckeditor的高度

    设置ckeditor的高度 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', language : 'zh ...