很多应用中都需要用到地图联动、多屏对比、二三维分屏、大屏显示，有图形可视化的地方就有事件响应触发：鼠标按下、移动、鼠标滚轮，由此触发了地图上坐标或范围的变化，将这些变化发送给另一个地图并响应这些变化，即完成地图联动。

下面以二维地图分屏和二三维地图分屏分别说明实现思路（以ArcGIS开发为例，其他思路可参考）。

1、二维地图分屏对比(地图空间参考一般会一致)

1）页面布局，将网页布局设计成1~N个DIV；

2）事件监听，对鼠标在地图上的事件进行监听，一个地图事件触发后，其他地图响应。

※※※ MouseDown、MouseOver、MouseWheel，3个主要事件响应，对应地图上pan-end、mouse-move、zoom-end，地图联动变化核心：【map.setExtent(evt.extent)】，参考代码如下：

　　　　　　　//放大联动
            this._activeMapEventHandlers.push(this.activeMap.on("zoom-end", function (evt) {
                self._maps.forEach(function (map) {
                    if (map != self.activeMap) {
                        map.setExtent(evt.extent);
                    }
                });
            }));
            //平移联动
            this._activeMapEventHandlers.push(this.activeMap.on("pan-end", function (evt) {
                self._maps.forEach(function (map) {
                    if (map != self.activeMap) {
                        map.setExtent(evt.extent);
                    }
                });
            }));

            //鼠标联动
            this._activeMapEventHandlers.push(this.activeMap.on("mouse-move", function (evt) {
                self._maps.forEach(function (map) {
                    var idx = self._maps.indexOf(map);
                    var graphicLayer = map.getLayer("layer")
                    var graphic = self._mouseGraphics[idx];
                    if (map != self.activeMap) {
                        graphicLayer.show();
                        graphic.setGeometry(evt.mapPoint);
                    } else {
                        graphicLayer.hide();
                    }
                });
            }));

2、二三维分屏联动对比

　　与二维相比，三维在地图空间参考上具有差异性，三维地图一般是WGS84、WGS84魔卡托，还有诸如国内火星坐标系(CGCS2000)等，会导致投影坐标存在投影转换，二维平面坐标就是XY（另加Scale），三维立体坐标拥有XYZ（另加Scale），以及XYZ上的旋倾角，遵循右手笛卡尔坐标系，见下图：

pitch是围绕X轴旋转，也叫做俯仰角；yaw是围绕Y轴旋转，也叫偏航角；roll是围绕Z轴旋转，也叫翻滚角。

由此可见，二三维联动的核心：二维的中心（X,Y）+Scale（缩放系数），三维的“七参数”：（X,Y,Z,Pitch,Yaw,Roll,Scale(缩放系数)），转换投影变动就能实现。

ArcGIS JS二三维联动同步具体设计实现与二维类似，给出核心同步代码参考：

var synchronizeView = function(view, others) {
        others = Array.isArray(others) ? others : [others];

        var viewpointWatchHandle;
        var viewStationaryHandle;
        var otherInteractHandlers;
        var scheduleId;

        var clear = function() {
          if (otherInteractHandlers) {
            otherInteractHandlers.forEach(function(handle) {
              handle.remove();
            });
          }
          viewpointWatchHandle && viewpointWatchHandle.remove();
          viewStationaryHandle && viewStationaryHandle.remove();
          scheduleId && clearTimeout(scheduleId);
          otherInteractHandlers = viewpointWatchHandle =
            viewStationaryHandle = scheduleId = null;
        };

    //鼠标事件监听、动画交互
        var interactWatcher = view.watch('interacting,animation',
          function(newValue) {
            if (!newValue) {
              return;
            }
            if (viewpointWatchHandle || scheduleId) {
              return;
            }

            //同步联动视图（每个地图的View），viewpoint：Camera,rotation,scale
            scheduleId = setTimeout(function() {
              scheduleId = null;
              viewpointWatchHandle = view.watch('viewpoint',
                function(newValue) {
                  others.forEach(function(otherView) {
                    otherView.viewpoint = newValue;
                  });
                });
            }, 0);

            //视图交互响应
            otherInteractHandlers = others.map(function(otherView) {
              return watchUtils.watch(otherView,
                'interacting,animation',
                function(
                  value) {
                  if (value) {
                    clear();
                  }
                });
            });

            viewStationaryHandle = watchUtils.whenTrue(view,
              'stationary', clear);
          });

        return {
          remove: function() {
            this.remove = function() {};
            clear();
            interactWatcher.remove();
          }
        }
      };

以上介绍了地图开发中常用到的分屏对比实现思路，仅供参考。

版权声明：欢迎转载，转载请说明出处。