采用javascript实现WebGIS页面元素动态布局

 摘要：在使用ArcGIS Server开发网页GIS的时候，初学者都会使用模板练习，但是对于我们这些初学者来说，模板里面的很多功能却一下子很难学会，都不知道里面是怎么实现的，自己想改动一点点都非常难，比如其中一个功能改变页面大小的时候页面中的要素如地图的大小位置也会跟着改变，那是怎么实现的呢？对于非计算机网络编程人员的我们来说还真头疼，经过自己的摸索，其实采用javascript是很容易实现的！

关键词：动态改变元素布局

 

首先在资源管理器中添加js文件JScript1.js

在Default.aspx源文件里的head处引用该js文件

 <script language="javascript" type="text/javascript" src="JScript1.js"></script>

 

在Default.aspx源文件末尾处执行下事件

<script language="javascript" type="text/javascript">
        startUp(); 
</script>

 

在JScript1.js文件里面添加事件startUp

function startUp() {
    window.onresize = AdjustMapSizeHandler;
}

将页面改变大小的事件委托给AdjustMapSizeHandler

好了，想怎么改变元素的大小位置等等属性，就都放在这个事件AdjustMapSizeHandler里面吧

function AdjustMapSizeHandler(){
    webMap = document.getElementById("map_div");
    imgLeft = document.getElementById("left");
    var sWidth = getWinWidth();
    var sHeight = getWinHeight();
    var mapWidth = webMap.style.pixelWidth;
    imgLeft.style.left = (sWidth -(sWidth - mapWidth)/2 -mapWidth) + "px";
}