一开始看到OpenLayers，就有一个问题。就是它作为WebGIS的前端，通俗地说，是“显示”地图的。那么，它显示的地图是什么，是怎么显示的，又是怎么实现的？——暂且把这个问题叫做地图表现。我觉得最关键的就是Map类，把这个类分析清楚了，问题就解决了一大半了。
前面第一回里说过怎么实例化一个地图，怎么向地图里加图层加控件。其实，地图是这样的，它就像一个容器，可以盛东西。要分析它光理解这些还不够，我们要知道这个容器是怎么做出来的，及具体都有什么功能。
Map类有两个常量：Z_INDEX_BASE和EVENT_TYPES，不说了，可顾名而思其意。再看它定义的一些属性：div（The element that contains the map）、baseLayer（The currently selected base layer）、events（An events object that handles all events on the map）。是这样，web页的div通过以id或name的形式获得map对象，然后layers和control在加载到map上，表现为地图。顺便说一句，控件control和事件event是相关联的，这以后会说。
OpenLayers.Map类提供了两种实例化方式，举例来看：
[代码]js代码：
01 |
// create a map with default options in an element with the id "map1" |
02 |
var map = new OpenLayers.Map("map1"); |
04 |
// create a map with non-default options in an element with id "map2" |
05 |
//Optional object with properties to tag onto the map. |
07 |
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000), |
08 |
maxResolution: 156543, |
10 |
projection: "EPSG:41001" |
12 |
var map = new OpenLayers.Map("map2", options); |
OpenLayers.Map类实现的函数APIMethod是分组的，比如Layer Functions、Control Functions、Popup Functions、Container Div Functions、Zoom, Center, Pan Functions、Layer Options、Baselayer Functions、Zooming Functions、Translation Functions。其中，最关键的是Layer Functions和Control Functions，因为就是Layer对象和Control对象构成了map的主体。下面从每组函数中挑选出一两个来，看看具体实现过程。
Layer Functions：
就看addLayer函数吧，下面的addLayers就是调用的它，代码如下：
[代码]js代码：
01 |
addLayer: function (layer) { |
02 |
for(var i=0; i < this.layers.length; i++) { |
03 |
if (this.layers[i] == layer) { |
04 |
var msg = "You tried to add the layer: " + layer.name + |
05 |
" to the map, but it has already been added"; |
06 |
OpenLayers.Console.warn(msg); |
10 |
layer.div.style.overflow = ""; |
11 |
this.setLayerZIndex(layer, this.layers.length); |
13 |
this.viewPortDiv.appendChild(layer.div); |
15 |
this.layerContainerDiv.appendChild(layer.div); |
17 |
this.layers.push(layer); |
19 |
if (layer.isBaseLayer) { |
20 |
if (this.baseLayer == null) { |
21 |
// set the first baselaye we add as the baselayer |
22 |
this.setBaseLayer(layer); |
24 |
layer.setVisibility(false); |
29 |
this.events.triggerEvent("addlayer"); |
可以看到其中涉及到layer的一些方法，下一回具体介绍OpenLayers. Layer类。
[代码]js代码：
2 |
addControl: function (control, px) { |
3 |
this.controls.push(control); |
4 |
this.addControlToMap(control, px); |
可以看出，添加控件的过程是由controls.Push()和addControlToMap()两个函数共同完成的。
[代码]js代码：
01 |
addControlToMap: function (control, px) { |
02 |
// If a control doesn't have a div at this point, it belongs in the |
04 |
control.outsideViewport = (control.div != null); |
06 |
var div = control.draw(px); |
08 |
if(!control.outsideViewport) { |
09 |
div.style.zIndex = this.Z_INDEX_BASE['Control'] + |
11 |
this.viewPortDiv.appendChild( div ); |
Popup Functions：这组函数和上两组函数相似，是在地图上添加或删除Popup 对象。
Zoom, Center, Pan Functions：
[代码]js代码：
01 |
//Allows user to pan by a value of screen pixels |
02 |
pan: function(dx, dy) { |
04 |
var centerPx = this.getViewPortPxFromLonLat(this.getCenter()); |
06 |
var newCenterPx = centerPx.add(dx, dy); |
08 |
// only call setCenter if there has been a change |
09 |
if (!newCenterPx.equals(centerPx)) { |
10 |
var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx); |
11 |
this.setCenter(newCenterLonLat); |
Zooming Functions:
这里就看看放大缩小函数吧。
zoomIn: function() {
this.zoomTo(this.getZoom() + 1);
}
zoomOut: function() {
this.zoomTo(this.getZoom() - 1);
}
显然，zoomIn和zoomOut都使用了getZoom方法，放大就是让zoom加１，缩小减１。