码迷,mamicode.com
首页 > Web开发 > 详细

ArcGIS JS 学习笔记4 实现地图联动

时间:2016-09-01 16:26:15      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

1.开篇

      守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数。这次我的模仿目标是天地图的地图联动。

技术分享

天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨。

2.准备

      地图联动其实就是当一张的extent发生了变化,另一张图的extent也要同步变化,这样就可以两张图的范围同步了。同理,这样就可以扩展到N张图进行联动。所以这次的目标就是实现添加任意的地图都要可以联动。首先依然是先看一下官方文档。找到有用的方法或者事件。

技术分享

技术分享

技术分享

技术分享

技术分享

     整体的难点在于如何判断主地图(有鼠标动作的地图),通过官方文档,我们可以利用mouse-over事件来进行主地图的判断,在添加地图时,监听每张地图的mouse-over事件。

3.开始山寨

技术分享View Code

这里self. _clearActiveMapEvents()就是清除上一个主地图的相关事件;在清除上一个的事件后利用self._bindActiveMapEvents()对当前地图进行事件的绑定。这两个方法的具体内容我会在后面详细介绍。graphicLayer就是为了实现鼠标联动。

技术分享View Code

这里我们先清除上一个主地图的所有事件,我把这些事件都放到this._activeMapEventHandlers集合中。

技术分享View Code

在主地图平移和放大后,通过遍历_maps 集合,并利用事件提供的extent参数和map.setExtent()方法来设置地图的联动。鼠标的联动则是通过监听mouse-move事件,获取事件中的mapPoint参数来进行鼠标Graphic的定位。至此核心的部分已经全部完成了。

源码:

技术分享View Code

DEMO:

技术分享View Code

有图有真相:

技术分享技术分享

demo的布局就请不要吐槽了。。。求放过。。。。

ArcGIS JS 学习笔记4 实现地图联动

标签:

原文地址:http://www.cnblogs.com/ssk-bak/p/5830163.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!