Arcgis for JS之地图自适应调整
来源:互联网 发布:数据库全部概念 编辑:程序博客网 时间:2024/06/06 02:56
概述:本节讲述的内容为当浏览器大小发生变化或者地图展示区域的大小发生变化时,地图的自适应调整。地图的自适应常见于以下几种情况:1、系统中有收缩或者全屏的按钮;2、按F12,进入调试状态。
其实,地图自适应调整是一个很简单的事情,但是大多数我们的系统中会用到,实现地图的自适应主要是map div的大小的自适应调整,代码如下:
<!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.onresize=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>
实现后的效果如下:
如有疑问,请联系:
QQ:1004740957
Email:niujp08@qq.com
0 0
- Arcgis for JS之地图自适应调整
- ArcGIS API for JS 之创建地图
- Arcgis for js加载百度地图
- Arcgis for js加载百度地图
- Arcgis for js加载百度地图
- ArcGIS API for JS 添加地图控件
- arcgis api for js 加载google地图
- Arcgis API for JS 地图小部件
- arcgis api for js 加载百度地图
- arcgis api for js之echarts开源js库实现地图统计图分析
- ArcGIS API for JS 之 不依赖地图服务创建FeatureLayer图层
- ArcGIS API for JS 之 不依赖地图服务创建FeatureLayer图层
- Arcgis api for js:PrintTemplate可以做地图截图功能
- arcgis api for js入门开发系列十一地图统计图
- Arcgis for Js之Graphiclayer扩展详解
- Arcgis for JS之对象捕捉
- Arcgis for Js之加载wms服务
- Arcgis for Js 之坐标转换
- 1022.Digital Library
- org.json的包的使用
- Java数字的格式化&& Java list 交集、并集、差集,去重复并集
- grep -v xxx 用法
- 局域网内计算机名查IP
- Arcgis for JS之地图自适应调整
- renderscript-v8.jar的简单使用
- 5 第五天【健身】
- 如何有效的推广网站 适合没钱的中小站长
- 如何关闭android 4.4首次开机的移动数据连接
- 用java的for循环实现打印上下两个正反三角形
- [HTML]初识HTML
- js url截取文件名
- javascript介绍