OpenLayers源码学习15:地图Map_2

Posted on   |   In   |  

map类这回看的是”构造”和”控件”之前的函数. 包括一些工具函数和”layers”方法
估计”控件”的方法也类似, 但”控件”类我还没看… 还是穿插着看吧 会比较快

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
//返回viewPortDiv的DOM元素 
getViewport: function() {
    return this.viewPortDiv;
},
 
// 把map渲染到指定div
render: function(div) {
    this.div = OpenLayers.Util.getElement(div);
    OpenLayers.Element.addClass(this.div, 'olMap');
    this.viewPortDiv.parentNode.removeChild(this.viewPortDiv);//先删掉viewPort
    this.div.appendChild(this.viewPortDiv);//再添加viewPoint
    this.updateSize();//重绘尺寸
},
 
// 销毁方法, 在这留一个方法是为了手动调用销毁
unloadDestroy: null,
 
//当map被销毁后,  需要停止监听updateSize方法
updateSizeDestroy: null,
 
//销毁方法 , 应该在销毁map的container之前调用
destroy:function() {
    // 没有就是已经被销毁了
    if (!this.unloadDestroy) {
        return false;
    }
     
    // 先pan动画停止, 再置null
    if(this.panTween) {
        this.panTween.stop();
        this.panTween = null;
    }
    // 先把zoom停止, 再置null
    if(this.zoomTween) {
        this.zoomTween.stop();
        this.zoomTween = null;
    }
 
    // 停止监听window的 'unload'事件
    OpenLayers.Event.stopObserving(window, 'unload', this.unloadDestroy);
    this.unloadDestroy = null;
 
    //如果resize上有事件 停止监听
    if (this.updateSizeDestroy) {
        OpenLayers.Event.stopObserving(window, 'resize', 
                                       this.updateSizeDestroy);
    }
     
    this.paddingForPopups = null;//气泡间距的缓存
 
    if (this.controls != null) {
        for (var i = this.controls.length - 1; i>=0; --i) {
            this.controls[i].destroy();//遍历置空controls
        } 
        this.controls = null;
    }
    if (this.layers != null) {
        for (var i = this.layers.length - 1; i>=0; --i) {
            //遍历销毁layer, 传false是不让设置成base layer
            this.layers[i].destroy(false);
        } 
        this.layers = null;
    }
    //删掉viewport的DOM
    if (this.viewPortDiv && this.viewPortDiv.parentNode) {
        this.viewPortDiv.parentNode.removeChild(this.viewPortDiv);
    }
    this.viewPortDiv = null;//缓存置空
     
    if (this.tileManager) {
        this.tileManager.removeMap(this);
        this.tileManager = null;
    }
 
    if(this.eventListeners) {
        this.events.un(this.eventListeners);
        this.eventListeners = null;
    }
    this.events.destroy();//event的销毁
    this.events = null;
 
    this.options = null;
},
 
//更新构造里的options
setOptions: function(options) {
    var updatePxExtent = this.minPx &&
        options.restrictedExtent != this.restrictedExtent;
    OpenLayers.Util.extend(this, options);
    // 重新计算 minPx 和 maxPx
    updatePxExtent && this.moveTo(this.getCachedCenter(), this.zoom, {
        forceZoomChange: true
    });
},
 
 //返回tileSize
 getTileSize: function() {
     return this.tileSize;
 },
 
 
// 从array中查找property目标项目, match是匹配规则:match.test(map[array][i][property]) 
getBy: function(array, property, match) {
    var test = (typeof match.test == "function");
    var found = OpenLayers.Array.filter(this[array], function(item) {
        return item[property] == match || (test && match.test(item[property]));
    });
    return found;
},
 
// 查找对应的layer,相当于match.test(layer[property])
getLayersBy: function(property, match) {
    return this.getBy("layers", property, match);
},
 
// 按图层名称查找layer, 相当于name.test(layer.name)
getLayersByName: function(match) {
    return this.getLayersBy("name", match);
},
 
//按 "CLASS_NAME"查找layer, 相当于type.test(layer.CLASS_NAME)
getLayersByClass: function(match) {
    return this.getLayersBy("CLASS_NAME", match);
},
 
// 查找对应控件 和查找图层类似, match.test(controls[property])
getControlsBy: function(property, match) {
    return this.getBy("controls", property, match);
},
 
// 根据"CLASS_NAME"查找控件, 类似于图层: type.test(control.CLASS_NAME)
getControlsByClass: function(match) {
    return this.getControlsBy("CLASS_NAME", match);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
/********************************************************/
/*                                                      */
/*                  Layer Functions                     */
/*                                                      */
/*     The following functions deal with adding and     */
/*        removing Layers to and from the Map           */
/*                                                      */
/********************************************************/         
 
  //用id获得layer 
  getLayer: function(id) {
      var foundLayer = null;//默认null
      for (var i=0, len=this.layers.length; i<len; i++) {
          var layer = this.layers[i];
          if (layer.id == id) {
              foundLayer = layer;//遍历this.layers数组
              break;
          }
      }
      return foundLayer;
  },
 
  //对<OpenLayers.Layer>参数对象, 设置zIdx
  setLayerZIndex: function (layer, zIdx) {
      layer.setZIndex(
          //1判断此layer是否是baseLayer, 
          //2去Z_INDEX_BASE配置里去查对应的z-index值
          //3把目标值*5 加上配置值, 设置
          this.Z_INDEX_BASE[layer.isBaseLayer ? 'BaseLayer' : 'Overlay']
          + zIdx * 5 );
  },
 
  //重新设置图层的zidx
  //用上个方法的公式, 实际上是自身zidx*5 再加配置值
  resetLayersZIndex: function() {
      for (var i=0, len=this.layers.length; i<len; i++) {
          var layer = this.layers[i];
          this.setLayerZIndex(layer, i);
      }
  },
  
  //往map实例上添加图层
  //返回true就是已添加
  addLayer: function (layer) {
      for(var i = 0, len = this.layers.length; i < len; i++) {
          if (this.layers[i] == layer) {// 直接在缓存里找对应layer, 双等比较内存值
              return false;
          }
      }
      //先触发一下"preaddlayer"事件, 失败的话直接返回
      if (this.events.triggerEvent("preaddlayer", {layer: layer}) === false) {
          return false;
      }
      //处理allOverlays配置为true时, 新图层的isBaseLayer置为false
      if(this.allOverlays) {
          layer.isBaseLayer = false;
      }
       
      layer.div.className = "olLayerDiv";
      layer.div.style.overflow = "";
      //图层的z-index是按图层数量设定的, 队列越靠后zidex越大
      this.setLayerZIndex(layer, this.layers.length);
 
      //这个layer.isFixed不知道是什么配置
      if (layer.isFixed) {
          //在map的viewport里添加此图层的div
          this.viewPortDiv.appendChild(layer.div);
      } else {
          //在map的layerContainerDiv里添加
          this.layerContainerDiv.appendChild(layer.div);
      }
      this.layers.push(layer);//缓存
      layer.setMap(this);//这个layer方法回头再看
 
      if (layer.isBaseLayer || (this.allOverlays && !this.baseLayer))  {
          if (this.baseLayer == null) {
              // 头一次设置baselayer
              this.setBaseLayer(layer);
          } else {
              // 隐藏
              layer.setVisibility(false);
          }
      } else {
          //重绘
          layer.redraw();
      }
 
      //触发这两个事件
      this.events.triggerEvent("addlayer", {layer: layer});
      layer.events.triggerEvent("added", {map: this, layer: layer});
      //回头再看这个添加
      layer.afterAdd();
 
      return true;
  },
  //把传入的图层树组使用addLayer方法添加
  addLayers: function (layers) {
      for (var i=0, len=layers.length; i<len; i++) {
          this.addLayer(layers[i]);
      }
  },
 
  //删除图层
  removeLayer: function(layer, setNewBaseLayer) {
      if (this.events.triggerEvent("preremovelayer", {layer: layer}) === false) {
          return;
      }
      //第二个参数默认为true
      if (setNewBaseLayer == null) {
          setNewBaseLayer = true;
      }
 
      //fixed参数, 有的话就是在viewport里添加
      if (layer.isFixed) {
          this.viewPortDiv.removeChild(layer.div);
      } else {
          //添加到layerContainerDiv里
          this.layerContainerDiv.removeChild(layer.div);
      }
      OpenLayers.Util.removeItem(this.layers, layer);//删除数组元素
      layer.removeMap(this);
      layer.map = null;//持有map置为null
 
      // baseLayer被删掉后, 
      if(this.baseLayer == layer) {
          this.baseLayer = null;
          if(setNewBaseLayer) {
              for(var i=0, len=this.layers.length; i<len; i++) {
                  var iLayer = this.layers[i];
                  if (iLayer.isBaseLayer || this.allOverlays) {
                      this.setBaseLayer(iLayer);
                      break;
                  }
              }
          }
      }
 
      //对删除的图层调整zidx
      this.resetLayersZIndex();
 
      this.events.triggerEvent("removelayer", {layer: layer});
      layer.events.triggerEvent("removed", {map: this, layer: layer});
  },
 
  // 获得图层的数量
  getNumLayers: function () {
      return this.layers.length;
  },
 
  // 在layers数组里查找目标图层的顺序
  getLayerIndex: function (layer) {
      return OpenLayers.Util.indexOf(this.layers, layer);
  },
   
  // 设置图层顺序
  setLayerIndex: function (layer, idx) {
      var base = this.getLayerIndex(layer);//当前顺序
      //调整上下限
      if (idx < 0) {
          idx = 0;
      } else if (idx > this.layers.length) {
          idx = this.layers.length;
      }
      //顺序需要调整
      if (base != idx) {
          this.layers.splice(base, 1);//从缓存里删掉原有
          this.layers.splice(idx, 0, layer);
          for (var i=0, len=this.layers.length; i<len; i++) {
              this.setLayerZIndex(this.layers[i], i);
          }
          //改变图层事件
          this.events.triggerEvent("changelayer", {
              layer: layer, property: "order"
          });
          if(this.allOverlays) {
              //baseLayer的设置
              if(idx === 0) {
                  this.setBaseLayer(layer);
              } else if(this.baseLayer !== this.layers[0]) {
                  this.setBaseLayer(this.layers[0]);
              }
          }
      }
  },
 
  // 提高图层的zidx为原zidx + delta
  raiseLayer: function (layer, delta) {
      var idx = this.getLayerIndex(layer) + delta;
      this.setLayerIndex(layer, idx);
  },
   
  // 设置baseLayer
  setBaseLayer: function(newBaseLayer) {
       
      if (newBaseLayer != this.baseLayer) {
          //确认目标图层在缓存数组中
          if (OpenLayers.Util.indexOf(this.layers, newBaseLayer) != -1) {
 
              //拿到中心点, 转换出对应resolution
              var center = this.getCachedCenter();
              var newResolution = OpenLayers.Util.getResolutionFromScale(
                  this.getScale(), newBaseLayer.units
              );
 
              //原baseLayer要隐藏
              if (this.baseLayer != null && !this.allOverlays) {
                  this.baseLayer.setVisibility(false);
              }
 
              // 缓存baseLayer
              this.baseLayer = newBaseLayer;
               
              //考虑重绘
              if(!this.allOverlays || this.baseLayer.visibility) {
                  this.baseLayer.setVisibility(true);
                  //没在范围内的要重绘
                  if (this.baseLayer.inRange === false) {
                      this.baseLayer.redraw();
                  }
              }
 
              // 重新定位中心点
              if (center != null) {
                  // 换算新图层对应的zoom
                  var newZoom = this.getZoomForResolution(
                      newResolution || this.resolution, true
                  );
                  // 切换中心点
                  this.setCenter(center, newZoom, false, true);
              }
 
              //触发changebaselayer事件
              this.events.triggerEvent("changebaselayer", {
                  layer: this.baseLayer
              });
          }        
      }
  },