OpenLayers项目分析——（八）地图表现

一开始看到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加１，缩小减１。