1.开篇
守望屁股实在太好玩了，所以最近有点懒，这次就先写个简单的来凑一下数。这次我的模仿目标是天地图的地图联动。
天地的地图联动不仅地图有联动，而且鼠标也有联动，我就照着这个目标进行山寨。
2.准备
地图联动其实就是当一张的extent发生了变化，另一张图的extent也要同步变化，这样就可以两张图的范围同步了。同理，这样就可以扩展到N张图进行联动。所以这次的目标就是实现添加任意的地图都要可以联动。首先依然是先看一下官方文档。找到有用的方法或者事件。
整体的难点在于如何判断主地图(有鼠标动作的地图)，通过官方文档，我们可以利用mouse-over事件来进行主地图的判断，在添加地图时，监听每张地图的mouse-over事件。
3.开始山寨
1 //添加地图，相互联动 2 addMap: function (map) { 3 var self = this; 4 if (this._maps.indexOf(map) != -1)return;//如果已经在联动地图集合就不添加 5 var graphicLayer=new GraphicLayer({id:"mapLinkagerLayer"}); 6 var mouseHandler= map.on("mouse-over", function (evt) { //鼠标在哪个地图上，该地图就是激活地图 7 self.activeMap = map; 8 self. _clearActiveMapEvents(); 9 self._bindActiveMapEvents(); 10 }); 11 12 var graphic=new Graphic(); 13 graphic.setSymbol(this.mouseSymbol); 14 map.addLayer(graphicLayer); 15 graphicLayer.add(graphic) 16 17 this._maps.push(map); 18 this._mapMouseOverEventHandlers.push(mouseHandler); 19 this._mouseGraphicLayers.push(graphicLayer); 20 this._mouseGraphics.push(graphic); 21 }, 22 这里self. _clearActiveMapEvents()就是清除上一个主地图的相关事件；在清除上一个的事件后利用self._bindActiveMapEvents()对当前地图进行事件的绑定。这两个方法的具体内容我会在后面详细介绍。graphicLayer就是为了实现鼠标联动。
1 //清除当前地图联动事件 2 _clearActiveMapEvents: function () { 3 this._activeMapEventHandlers.forEach(function (eventHandler) { 4 eventHandler.remove(); 5 }); 6 this._activeMapEventHandlers = []; 7 }, 这里我们先清除上一个主地图的所有事件，我把这些事件都放到this._activeMapEventHandlers集合中。
1 //为当前地图添加联动 2 _bindActiveMapEvents: function () { 3 var self = this; 4 //放大联动 5 this._activeMapEventHandlers.push(this.activeMap.on("zoom-end", function (evt) { 6 self._maps.forEach(function (map) { 7 if (map != self.activeMap) { 8 map.setExtent(evt.extent); 9 } 10 }); 11 })); 12 //平移联动 13 this._activeMapEventHandlers.push(this.activeMap.on("pan-end", function (evt) { 14 self._maps.forEach(function (map) { 15 if (map != self.activeMap) { 16 map.setExtent(evt.extent); 17 } 18 }); 19 })); 20 21 //鼠标联动 22 this._activeMapEventHandlers.push(this.activeMap.on("mouse-move", function (evt) { 23 self._maps.forEach(function (map) { 24 var idx = self._maps.indexOf(map); 25 var graphicLayer=map.getLayer("mapLinkagerLayer") 26 var graphic=self._mouseGraphics[idx]; 27 if (map != self.activeMap) { 28 graphicLayer.show(); 29 graphic.setGeometry(evt.mapPoint); 30 }else{ 31 graphicLayer.hide();//激活地图不显示联动鼠标 32 } 33 }); 34 })); 35 } 36 }); 在主地图平移和放大后，通过遍历_maps 集合，并利用事件提供的extent参数和map.setExtent()方法来设置地图的联动。鼠标的联动则是通过监听mouse-move事件，获取事件中的mapPoint参数来进行鼠标Graphic的定位。至此核心的部分已经全部完成了。
源码：
1 /** 2 * Created by Extra
3 * 地图联动辅助类 4 * version:v1.0.0 5 */ 6 define("dextra/modules/MapLinkager", [ 7 "dojo/_base/declare", 8 "esri/layers/GraphicsLayer", 9 "esri/graphic", 10 "esri/symbols/SimpleMarkerSymbol" 11 ], function ( declare,GraphicLayer,Graphic,SimpleMarkerSymbol) { 12 var maplinkager = declare(null, { 13 declaredClass: "dextra.modules.MapLinkager", 14 _maps: null,//参与联动的地图控件集合 15 _activeMapEventHandlers: null,//当前鼠标所在地图事件集合 16 _mapMouseOverEventHandlers:null,//所有地图mouse-over事件集合 17 _mouseGraphicLayers:null,//鼠标联动GraphicLayer 18 activeMap: null,//当前激活地图 19 mouseSymbol:null,//鼠标样式 20 _mouseGraphics:null,//鼠标Graphic集合 21 22 constructor: function () { 23 this._maps = []; 24 this._activeMapEventHandlers=[]; 25 this._mapMouseOverEventHandlers=[]; 26 this._mouseGraphicLayers=[]; 27 this.mouseSymbol=new SimpleMarkerSymbol({ 28 "color": [255,0,0], 29 "size": 10, 30 "xoffset": 0, 31 "yoffset": 0, 32 "type": "esriSMS", 33 "style": "esriSMSCircle", 34 "outline": { 35 "color": [255,0,0], 36 "width": 1, 37 "type": "esriSLS", 38 "style": "esriSLSSolid" 39 } 40 }); 41 this._mouseGraphics=[]; 42 43 }, 44 45 //添加地图，相互联动 46 addMap: function (map) { 47 var self = this; 48 if (this._maps.indexOf(map) != -1)return;//如果已经在联动地图集合就不添加 49 var graphicLayer=new GraphicLayer({id:"mapLinkagerLayer"}); 50 var mouseHandler= map.on("mouse-over", function (evt) { //鼠标在哪个地图上，该地图就是激活地图 51 self.activeMap = map; 52 self. _clearActiveMapEvents(); 53 self._bindActiveMapEvents(); 54 }); 55 56 var graphic=new Graphic(); 57 graphic.setSymbol(this.mouseSymbol); 58 map.addLayer(graphicLayer); 59 graphicLayer.add(graphic) 60 61 this._maps.push(map); 62 this._mapMouseOverEventHandlers.push(mouseHandler); 63 this._mouseGraphicLayers.push(graphicLayer); 64 this._mouseGraphics.push(graphic); 65 }, 66 67 //移除地图，取消联动 68 removeMap: function (map) { 69 var idx = this._maps.indexOf(map); 70 this._maps.splice(idx, 1); 71 var graphicLayer= this._mouseGraphicLayers.splice(idx, 1)[0]; 72 graphicLayer.clear(); 73 map.removeLayer(graphicLayer); 74 75 this._mapMouseOverEventHandlers[idx].remove(); 76 this._mapMouseOverEventHandlers.splice(idx, 1); 77 this._mouseGraphics.splice(idx, 1); 78 this._clearActiveMapEvents(); 79 80 }, 81 82 //清除当前地图联动事件 83 _clearActiveMapEvents: function () { 84 this._activeMapEventHandlers.forEach(function (eventHandler) { 85 eventHandler.remove(); 86 }); 87 this._activeMapEventHandlers = []; 88 }, 89 90 //为当前地图添加联动 91 _bindActiveMapEvents: function () { 92 var self = this; 93 //放大联动 94 this._activeMapEventHandlers.push(this.activeMap.on("zoom-end", function (evt) { 95 self._maps.forEach(function (map) { 96 if (map != self.activeMap) { 97 map.setExtent(evt.extent); 98 } 99 });100 }));101 //平移联动102 this._activeMapEventHandlers.push(this.activeMap.on("pan-end", function (evt) {103 self._maps.forEach(function (map) {104 if (map != self.activeMap) {105 map.setExtent(evt.extent);106 }107 });108 }));109 110 //鼠标联动111 this._activeMapEventHandlers.push(this.activeMap.on("mouse-move", function (evt) {112 self._maps.forEach(function (map) {113 var idx = self._maps.indexOf(map);114 var graphicLayer=map.getLayer("mapLinkagerLayer")115 var graphic=self._mouseGraphics[idx];116 if (map != self.activeMap) {117 graphicLayer.show();118 graphic.setGeometry(evt.mapPoint);119 }else{120 graphicLayer.hide();//激活地图不显示联动鼠标121 }122 });123 }));124 }125 });126 127 return maplinkager;128 }); DEMO:
1 2 3 4 5DExtra-HeatMap 6 7 14 28 29 30 31 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
有图有真相：
demo的布局就请不要吐槽了。。。求放过。。。。
欢迎转载 http://www.cnblogs.com/deliciousExtra/p/5600212.html