http://blog.csdn.net/gisshixisheng/article/details/40127895

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

天地图多时相效果

天地图多时相的链接：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博客，希望给大家带来更多的分享。具体的实现代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  6. <title>Simple Map</title>
  7. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
  8. <style>
  9. html, body, #map1,#map2 {
  10. height: 100%;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. body {
  15. background-color: #FFF;
  16. overflow: hidden;
  17. font-family: "Trebuchet MS";
  18. }
  19. #map1,#map2{
  20. float:left;
  21. width: 49.5%;
  22. }
  23. #map1{
  24. border-right: 2px solid #999;
  25. }
  26. </style>
  27. <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
  28. <script>
  29. var map1,map2;
  30. require([
  31. "esri/map",
  32. "esri/layers/ArcGISTiledMapServiceLayer",
  33. "esri/layers/GraphicsLayer",
  34. "esri/graphic",
  35. "esri/symbols/PictureMarkerSymbol",
  36. "dojo/domReady!"],
  37. function(Map, Tiled, GraphicsLayer, Graphic, PictureMarkerSymbol) {
  38. map1 = new Map("map1",{logo:false});
  39. map2 = new Map("map2",{logo:false});
  40. var tiled1 = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
  41. var tiled2 = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
  42. var mouseLayer = new GraphicsLayer();
  43. map1.addLayer(tiled1);
  44. map2.addLayer(tiled2);
  45. map2.addLayer(mouseLayer);
  46. map1.setLevel(4);
  47. map2.setLevel(4);
  48. map1.on("extent-change",function(){
  49. map2.setExtent(map1.extent);
  50. });
  51. map1.on("mouse-move",function(evt){
  52. mouseLayer.clear();
  53. var pms = new PictureMarkerSymbol("cursor.png",22,24);
  54. var graphic = new Graphic(evt.mapPoint,pms);
  55. mouseLayer.add(graphic);
  56. });
  57. });
  58. </script>
  59. </head>
  60. <body>
  61. <div id="map1"></div>
  62. <div id="map2"></div>
  63. </body>
  64. </html>

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

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

    今天在看天地图的时候,有一个多时相的地图显示功能,感觉很好玩,作为技术控的我晚上十点下班到家便是快十一点了,本来应该是睡觉了,但是,激动地心情不能平静,哎,算了,本着不熬夜的程序员不是好程序员的原则, ...

  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. [bzoj 1047][HAOI2007]理想正方形（单调队列）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1047 分析: 第一感觉二维线段树当然没问题但是挺慢的. 注意到要求的正方形形中的最大最小边长是 ...

  2. Flume NG源代码分析（二）支持执行时动态改动配置的配置模块

    在上一篇中讲了Flume NG配置模块主要的接口的类,PropertiesConfigurationProvider提供了基于properties配置文件的静态配置的能力,这篇细说一下PollingP ...

  3. Openlayers3 计算地图上随意两点间的距离

    相应的openlayers的版本号为3.7. 主要用的接口是ol.Sphere.haversineDistance([x1,y1],[x2,y2]): 4326坐标系中计算两点距离的方式为: var ...

  4. C# DateTime.Now和DateTime.UtcNow的区别

    DateTime.UtcNow.ToString()输出的是0时区的事件(通俗点就是格林威治时间的当前时间),DateTime.Now.ToString()输出的是当前时区的时间,我们中国使用的是东八 ...

  5. 使用 Pascal 脚本编写网页, PWP 项目

    下载后得到 pwp.rar 文件. 解压到一个文件夹里面, 比方  e:\my_sys 文件夹下. 设计一下的脚本. 測试能否够执行. <%  uses sysutils; begin      ...

  6. 深入struts2(二) ---stuts2长处和主要包、类功能

    1.1     Struts2 上节已讲.struts2在webwork基础发展起来的mvc框架.MVC框架相信一般码农都比較了解,这里不再重说. 在这里只对于一下struts1,struts2做了哪 ...

  7. UVA - 10691 Subway

    题目大意:给定n个点.要求建造尽量少得铁路(从原点发射出的射线).使得全部点到铁路的最短距离小于d. 解题思路:题目能够转化成区间选点问题,即以极角来表示铁轨.然后计算出每一个区间可行的极角范围,进行 ...

  8. 行政区划代码（JSON版本）2018年8月

    字段:regioncode //行政区划代码  regionname //行政区划名称 pcode //行政区划上一级代码 [{ "REGIONCODE": "11000 ...

  9. Coursera Algorithms week4 基础标签表 练习测验：Inorder traversal with constant extra space

    题目原文: Design an algorithm to perform an inorder traversal of a binary search tree using only a const ...

  10. poj1200Crazy Search（hash）

    题目大意   将一个字符串分成长度为N的字串.且不同的字符不会超过NC个.问总共有多少个不同的子串. /* 字符串hash O(n)枚举起点 然后O(1)查询子串hash值 然后O(n)找不一样的个数 ...