今天在看天地图的时候，有一个多时相的地图显示功能，感觉很好玩，作为技术控的我晚上十点下班到家便是快十一点了，本来应该是睡觉了，但是，激动地心情不能平静，哎，算了，本着不熬夜的程序员不是好程序员的原则，熬了会夜终于看到了想要的效果，便迫不及待的拿出来与大家分享，首先看看天地图的效果与我的效果：

天地图多时相效果

天地图多时相的链接：http://www.tianditu.cn/multidate/multidate.html?ll=116.38,39.92&l=11

自己做的效果

看完了效果，下面说说实现的具体功能。1、地图的联动：当地图1（2）的范围发生变化时，地图2（1）的地图也随之发生变化，且地图2（1）与地图1（2）是相同的显示范围；2、鼠标的联动：当鼠标在地图1（2）上移动时，在地图2（1）相同位置显示鼠标指针位置。

上面，分析了功能，下面说说实现思路。1、地图联动：当地图1（2）范围发生变化时，获取地图1（2）的范围，并设置2（1）的范围为地图1（2）的范围；2、鼠标的联动：鼠标在地图1（2）上移动时，获取鼠标的地图点坐标，并在地图2（1）上显示鼠标。

本实例中实现了地图1到地图2的联动，地图2到地图1的联动还没实现，后续会继续更新，还望继续关注lzugis CSDN博客，希望给大家带来更多的分享。具体的实现代码如下：

<!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" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
    <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 src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <script>
        var map1,map2;
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/GraphicsLayer",
            "esri/graphic",
            "esri/symbols/PictureMarkerSymbol",
            "dojo/domReady!"],
        function(Map, Tiled, GraphicsLayer, Graphic, PictureMarkerSymbol) {
            map1 = new Map("map1",{logo:false});
            map2 = new Map("map2",{logo:false});
            var tiled1 = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
            var tiled2 = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
            var mouseLayer = new GraphicsLayer();
            map1.addLayer(tiled1);
            map2.addLayer(tiled2);
            map2.addLayer(mouseLayer);
            map1.setLevel(4);
            map2.setLevel(4);
            map1.on("extent-change",function(){
                map2.setExtent(map1.extent);
            });
            map1.on("mouse-move",function(evt){
                mouseLayer.clear();
                var pms = new PictureMarkerSymbol("cursor.png",22,24);
                var graphic = new Graphic(evt.mapPoint,pms);
                mouseLayer.add(graphic);
            });
        });
    </script>
</head>

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

Arcgis for Javascript实现两个地图的联动的更多相关文章

  1. （转） Arcgis for Javascript实现两个地图的联动

    http://blog.csdn.net/gisshixisheng/article/details/40127895 今天在看天地图的时候,有一个多时相的地图显示功能,感觉很好玩,作为技术控的我晚上 ...

  2. arcgis for javascript 添加featurelayer,设置地图最大最小等级

    转自原文arcgis for javascript 添加featurelayer,设置地图最大最小等级 var map; var livingCenter; var livingCenterUrl = ...

  3. ArcGIS API for JavaScript开发初探——基本地图组件使用

    1.前言 在上一篇我们已经我们已经讲述了第一个地图应用程序的HelloMap的创建过程,这一篇我们来讲述基本地图组件:Home Button.比例尺.鹰眼图的使用方法. 2.基本地图组件 在ArcGI ...

  4. 关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索

    1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api <!-- 引入百度地图API --> <script type="text ...

  5. Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

    原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...

  6. Arcgis for javascript不同的状态下自己定义鼠标样式

    俗话说:爱美之心.人皆有之. 是的.没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点. 在本文,给大家讲讲在Arcgis for javascript下怎样自己定义鼠标样式. 首先.说 ...

  7. ArcGIS for JavaScript 关于路径开发的一些记录（三）

    最近被一个bug困扰了两天~ 我新发布了一个NAserver(路径分析服务),但是放在之前的代码里面发现不能生成路径.经过我的调试发现并没有代码并没有报错,并且能够返回所生成路径的Graphic la ...

  8. Arcgis for Javascript之统计图的实现

    首先,截个图给大家看看效果: 初始化状态 放大后的状态 点击选中后的状态 如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态:2.缩放后的状态:3.点击选中显示详情状态.第 ...

  9. Arcgis for javascript不同的状态下自定义鼠标样式

    俗话说:爱美之心,人皆有之.是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点.在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式. 首先,说几个状态 ...

随机推荐

  1. Flume日志收集 总结

    Flume是一个分布式.可靠.和高可用的海量日志聚合的系统,支持在系统中定制各类数据发送方,用于收集数据: 同时,Flume提供对数据进行简单处理,并写到各种数据接受方(可定制)的能力. (1) 可靠 ...

  2. PAT 天梯赛 L1-010. 比较大小 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-010 AC代码 #include <iostream> #include <cstdio&g ...

  3. Oracle数据安全（四）j角色管理

    一.角色管理的概述 1.角色的概念 为了简化数据库权限的管理,在Oracle数据库中引入了角色的概念.所谓的角色就是一系列相关权限的集合. 2.角色的特点 在数据库中,角色的名称必须是唯一的,不能与用 ...

  4. 如何使用sql函数平均值、总数、最小值、最大值

    使用sql函数,您可以在一个select语句的查询当中,直接计算数据库资料的平均值.总数.最小值.最大值.总和.标准差.变异数等统计.使用recordset对象时,也可使用这些sql函数. sql函数 ...

  5. 2018-2019-2 20165114《网络对抗技术》Exp2 后门原理与实践

    目录 一.实验准备 二.实验内容 三.基础问题回答 四.实验过程及步骤 五.实验总结与体会 六.实验中遇到的问题与错误. 一.实验准备 1.后门概念 后门就是不经过正常认证流程而访问系统的通道. 哪里 ...

  6. yum安装mysql后root用户的临时密码

    1.查看root用户临时随机密码 yum 安装mysql后,无法通过空密码登录数据库,如下: [root@ mysql]# mysql -u root -p Enter password: ERROR ...

  7. maven说明

    1.maven 仓库地址 http://mvnrepository.com/ 2.maven jar包搜索地址 http://search.maven.org/ 3. 点开上面的 版本链接,就可以看到 ...

  8. maven项目Dao层优化

    平时我们习惯一个实体类就对应一个dao类,这样做,增删改查都大同小异,只是实体类对象不一样而已,因此,我们可以把公用的方法抽取来,建立一个IBaseDao接口,如下: public interface ...

  9. java实现定时任务的三种方法 - 转载

    java实现定时任务的三种方法 /** * 普通thread * 这是最常见的,创建一个thread,然后让它在while循环里一直运行着, * 通过sleep方法来达到定时任务的效果.这样可以快速简 ...

  10. linux下gzip压缩同样内容大小不一样

    一份数据,两种传输方式进行收集. 一份数据:有多台数据采集节点或者多个数据源 两种方式:一种是从依次多个采集节点或者多个数据源将数据拷贝过来,合并为一个文件 另外一种是多个采集节点或者数据源同时向汇总 ...