arcgis api for javascript 地图随着所在div大小的变化而改变的resize()事件

WEB前端 waitig 478℃ 百度已收录 0评论

首先我们需要先创建一个地图,代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Resizable Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css"/>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.0"></script>
    <script>
        dojo.require("esri.map");
        var map;
        function init(){
            map = new esri.Map("map",{//加载地图
                logo:false//不显示logo
            });
            var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://192.168.0.181/ArcGIS/rest/services/GISBaseMap/MapServer");
            map.addLayer(myTiledMapServiceLayer);
        }
        dojo.addOnLoad(init);
    </script>
</head>
<body>
<div id="map" style="width: 400px;height: 400px;"></div>
</body>
</html>

这里的 "http://192.168.0.181/ArcGIS/rest/services/GISBaseMap/MapServer" 是我架设在自己服务器上的arcgis图层示例,运行代码显示效果如图:

我们需要对 id 为 map 的这个div进行监听,如果其宽高发生变化,那么就调用 resize()事件,让地图跟随其大小进行变化。完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Resizable Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css"/>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.0"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script>
        //地图div的宽高
        var wid;
        var hei;
        var map;
        dojo.require("esri.map");
        function init(){
            map = new esri.Map("map",{//加载地图
                logo:false//不显示logo
            });
            var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://192.168.0.181/ArcGIS/rest/services/GISBaseMap/MapServer");
            map.addLayer(myTiledMapServiceLayer);
        }
        dojo.addOnLoad(init);
        window.onload=function(){
            /*事件监听,div宽高变化*/
            /*首先获取div当前宽高,然后每隔一段时间获取一次div当前宽高,然后同上一次获取到的宽高进行比较,如果改变,则触发事件,改变地图大小*/
            wid=$('#map').width();
            hei=$('#map').height();
            setInterval("changed()",100);
        }
        //监听地图宽高改变事件
        function changed(){
            alert(11);
            var wid1=$('#map').width();
            var hei1=$('#map').height();
            if(wid1!=wid || hei1!=hei){
                wid=wid1;
                hei=hei1;
                window.map.resize();
            }
        }
    </script>
</head>
<body>
<div id="map" style="width: 50%;height: 50%;border: 1px solid red"></div>
</body>
</html>


本文由【waitig】发表在等英博客
本文固定链接:arcgis api for javascript 地图随着所在div大小的变化而改变的resize()事件
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)