OpenLayers项目分析（七）地图表现

转自：http://www.openlayers.cn/portal.php?mod=view&aid=17

一开始看到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类提供了两种实例化方式，举例来看：

　// create a map with default options in an element with the id "map1"
     var map = new OpenLayers.Map("map1");
     
     // create a map with non-default options in an element with id "map2"
　//Optional object with properties to tag onto the map.
     var options = {
          maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
          maxResolution: 156543,
          units: 'meters',
          projection: "EPSG:41001"
      };
      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就是调用的它，代码如下：

addLayer: function (layer) {
        for(var i=0; i < this.layers.length; i++) {
            if (this.layers[i] == layer) {
                var msg = "You tried to add the layer: " + layer.name + 
                          " to the map, but it has already been added";
                OpenLayers.Console.warn(msg);
                return false;
            }
        }            
        layer.div.style.overflow = "";
        this.setLayerZIndex(layer, this.layers.length);
        if (layer.isFixed) {
            this.viewPortDiv.appendChild(layer.div);
        } else {
            this.layerContainerDiv.appendChild(layer.div);
        }
        this.layers.push(layer);
        layer.setMap(this);
        if (layer.isBaseLayer)  {
            if (this.baseLayer == null) {
                // set the first baselaye we add as the baselayer
                this.setBaseLayer(layer);
            } else {
                layer.setVisibility(false);
            }
        } else {
            layer.redraw();
        }
        this.events.triggerEvent("addlayer");
    }
可以看到其中涉及到layer的一些方法，下一回具体介绍OpenLayers. Layer类。
Control Functions：
    addControl: function (control, px) {
        this.controls.push(control);
        this.addControlToMap(control, px);
    }
可以看出，添加控件的过程是由controls.Push()和addControlToMap()两个函数共同完成的。

addControlToMap: function (control, px) {
    // If a control doesn't have a div at this point, it belongs in the
    // viewport.
    control.outsideViewport = (control.div != null);
    control.setMap(this);
    var div = control.draw(px);
    if (div) {
        if(!control.outsideViewport) {
            div.style.zIndex = this.Z_INDEX_BASE['Control'] +
                                this.controls.length;
            this.viewPortDiv.appendChild( div );
        }
    }
}
Popup Functions：这组函数和上两组函数相似，是在地图上添加或删除Popup 对象。
　　Zoom, Center, Pan 
Functions：

　　　//Allows user to pan by a value of screen pixels
　　    pan: function(dx, dy) {
        // getCenter
        var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
        // adjust
        var newCenterPx = centerPx.add(dx, dy);
        
        // only call setCenter if there has been a change
        if (!newCenterPx.equals(centerPx)) {
            var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
            this.setCenter(newCenterLonLat);
        }
   }
Zooming Functions:
这里就看看放大缩小函数吧。
    zoomIn: function() {
     
   this.zoomTo(this.getZoom() + 1);
    }
    zoomOut: function() {
  
      this.zoomTo(this.getZoom() - 1);
    
}
显然，zoomIn和zoomOut都使用了getZoom方法，放大就是让zoom加１，缩小减１。