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

最新推荐文章于 2023-12-15 11:00:00 发布

奔跑的熊猫

最新推荐文章于 2023-12-15 11:00:00 发布

阅读量2.5k

点赞数

分类专栏： arcgis for javascript

arcgis for javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

[html] view plain copy

print ?

<!--
功能：地图分屏
-->
<!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>

<!--
功能：地图分屏
-->
<!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，代码如下

[css] view plain copy

print ?

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;}

  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;}

效果图如下：

奔跑的熊猫

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for JavaScript实现地图双屏联动

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

扫一扫