ArcGIS API For JavaScript 双地图联动

最新推荐文章于 2023-09-12 11:12:22 发布

idomyway

最新推荐文章于 2023-09-12 11:12:22 发布

阅读量1.2k

点赞数 1

分类专栏： ArcGIS JS 开发实例文章标签： arcgis javascript api 地图联动

本文链接：https://blog.csdn.net/idomyway/article/details/79933379

版权

ArcGIS JS 开发实例专栏收录该内容

21 篇文章 4 订阅

订阅专栏

前言：

有时我们会进行矢量地图和影像地图的互操作，需要进行地图之间的联动。

思路：

使用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">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
    <style>
        html, body, #map1,#map2 {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
        #map1,#map2{
            float:left;
            width: 49.5%;
        }
        #map1{
            border-right: 2px solid #999;
        }
    </style>
    <script>
        var map1,map2;
        require([
                "esri/map",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/domReady!"],
            function(Map,ArcGISDynamicMapServiceLayer) {
                var map1Move = true;
                var map2Move = true;
                map1 = new Map("map1",{logo:false});
                map2 = new Map("map2",{logo:false});
                var Dynamic1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/cityService/MapServer");
                var Dynamic2 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer");

                map1.addLayer(Dynamic1);
                map2.addLayer(Dynamic2);

                map1.setLevel(4);
                map2.setLevel(4);
                map1.on("extent-change",function(){
                    if(map2Move){
                        map2.setExtent(map1.extent);
                        map1Move=false;
                    }else if(!map2Move){
                        map2Move=true;
                    }
                });
                map2.on("extent-change",function(){
                    if(map1Move){
                        map1.setExtent(map2.extent);
                        map2Move=false;
                    }else if(!map1Move){
                        map1Move=true;
                    }
                });

                function mapChange(map1,map2,map1Judge,map2Judge) {
                    if(map1Judge&&!map2Judge){
                        map1.setExtent(map2.extent);
                    }
                    if(!map1Judge&&map2Judge){
                        map2.setExtent(map1.extent);
                    }
                }

            });
    </script>
</head>

<body>
<div id="map1"></div>
<div id="map2"></div>
</body>
</html>