（转）Arcgis for JS之地图自适应调整

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

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

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

[html] view plaincopy print?

<!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.οnresize=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>

实现后的效果如下：

转载于:https://www.cnblogs.com/telwanggs/p/6972991.html

（转）Arcgis for JS之地图自适应调整相关推荐

arcgis for js 展示地图图例
arcgis地图展示过程中,展示图例是很平常的.问题是,要怎么展示. 一般来说,只要给个图例控件就搞定了. 但是,像动态图层(ArcGISDynamicMapServiceLayer)的图层展示,都是 ...
control层alert弹出框乱码_【ArcGIS for JS】动态图层的属性查询（11）
在真实需求中,我们不仅仅是将shp在地图中显示那么简单,我们往往要查询该图层的属性信息,我们在前面代码的基础上添加上属性查询. 1.1方法1(通过click直接获取) 1.1.1代码实现给要素图层添 ...
（转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
arcgis for js 4.X自定义气泡点击地图对象弹出对话框
题目的意思是,arcgis for js 4.X自定义气泡,点击地图对象弹出对话框,而不是弹出气泡.对话框是vue页面组成的自定义对话框,不是地图页面的对象. 基本思路: 1)气泡模板(PopupTe ...
（转）Arcgis for Js之鼠标经过显示对象名的实现
http://blog.csdn.net/gisshixisheng/article/details/41889345 在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来 ...
Arcgis for JS之Cluster聚类分析的实现
原文:Arcgis for JS之Cluster聚类分析的实现在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含XY坐标信息的,通过graphic和graphicla ...
Vue3、TypeScript 实现图片数量及大小随宽度自适应调整
前言过了这么久,想起自己还有个博客,更点内容吧! 来,上需求! 最近在做个前端界面,要求在一行中展示一些图片,展示的图片数量随着窗口宽度大小进行变化,除此之外还有以下要求: 图片要均匀分布: 所有图 ...
(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
Arcgis for js开发之直线、圆、箭头、多边形、集结地等绘制方法
将ARCGIS for Js API中绘制各种图形的方法进行封装,方便调用.用时只需要传入参数既可.(在js文件中进行封装定义): 1.新建js文件,新建空对象用于函数的定义 if (!this[&q ...

（转）Arcgis for JS之地图自适应调整

（转）Arcgis for JS之地图自适应调整相关推荐

最新文章

热门文章