ArcGIS API for JavaScript实现地图双屏联动

来源：互联网发布：软件下载大全应用编辑：程序博客网时间：2024/06/04 18:48

使用ArcGIS API for JavaScript，可以很方便的实现地图联动。最简单的方式是借助Map对象的extent-change 事件，当然，也可以借助zoom-end、pan-end、mouse-drag-end等事件，本文使用第一种方式，实现地图的平移联动、鼠标双击放大联动、点击缩放按钮联动等，具体实现代码如下：

<!--功能：地图分屏--><!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <!--The viewport meta tag is used to improve the presentation and behavior of the samples      on iOS devices-->    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">    <title>地图分屏</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">    <link rel="stylesheet" href="css/fenping.css">    <script src="http://js.arcgis.com/3.8/"></script>    <script>        require([            "dojo/ready",            "dojo/parser",            "dijit/layout/BorderContainer",            "dijit/layout/ContentPane",            "esri/map",            "esri/geometry/Extent",            "esri/layers/ArcGISTiledMapServiceLayer",            "dojo/domReady!"        ], function(ready,parser,BorderContainer, ContentPane,Map,Extent,ArcGISTiledMapServiceLayer) {            parser.parse();            /*             * 矢量地图的构建             */            var vecMap=new Map("vecMap",{                extent: new Extent({xmin:105,ymin:31,xmax:110,ymax:40,                    spatialReference:{wkid:4326}}),                logo:false            });            var tiledMapServiceLayerV=new ArcGISTiledMapServiceLayer("矢量地图服务的url");            vecMap.addLayer(tiledMapServiceLayerV);            /*             * 影像地图的构建             */            var imgMap=new Map("imgMap",{                extent: new Extent({xmin:105,ymin:31,xmax:110,ymax:40,                    spatialReference:{wkid:4326}}),                logo:false            })            var tiledMapServiceLayerI=new ArcGISTiledMapServiceLayer("影像地图的url");            imgMap.addLayer(tiledMapServiceLayerI);            /*             * 添加extent-change事件，实现地图联动             * flagV矢量地图的extent-change控制标志，flagI影像地图的extent-change控制标志消除死循环情况             */            var flagV=true,flagI=true;            vecMap.on("extent-change",function(){                if(flagV){                    var vExtent=vecMap.extent;                    imgMap.setExtent(vExtent);                    flagI=false;                }else if(!flagV){                    flagV=true;                }            });            imgMap.on("extent-change",function(){                if(flagI){                    var iExtent=imgMap.extent;                    vecMap.setExtent(iExtent);                    flagV=false;                }else if(!flagI){                    flagI=true;                }            });        });    </script></head><body class="claro"><div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"     style="width:100%; height:100%;">    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">        <div id="title">天地图</div>        <div id="snippet">        </div>    </div>    <div id="vecMap" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">    </div>    <div id="imgMap" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">    </div></div></body></html>

页面对应的样式文件为fenping.css，代码如下

  html,body {    height:100%;    width:100%;    margin:0;    padding:0;  }  body {    background-color:#FFF;    color:#333;    font-size:14px;    overflow:hidden;    font-family:Helvetica, "Trebuchet MS", Arial, sans-serif;  }  #header {    border:solid 1px #224a54;    height:50px;    margin:2px;    background-image: url("../images/background.jpg");  }  #title {    color:white;    font-size:30px;    text-align:left;    font-weight:bolder;    padding-top:10px;    padding-left:15px;  }  #snippet {    font-size:14px;    color:#444;    padding-left:15px;  }  #vecMap {    border:solid 1px #b0c4de;    width:48%;    margin:2px;  }  #imgMap {    border:solid 1px #b0c4de;    width:48%;    margin:2px;  }  .dj_ie .infowindow .window .top .right .user .content { position: relative; }  .dj_ie .simpleInfoWindow .content {position: relative;}

效果图如下：

1 0