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

Posted 2020-08-05

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的布局就请不要吐槽了。。。求放过。。。。