1 Openlayers介紹

　　OpenLayers 是一個專為Web GIS 客戶端開發提供的JavaScript 類庫包，用于實現標準格式發布的地圖數據訪問。
　　OpenLayers 支持的地圖來源包括Google Maps、Yahoo、 Map、微軟Virtual Earth 等，用戶還可以用簡單的圖片地圖作為背景圖，與其他的圖層在OpenLayers 中進行疊加，在這一方面OpenLayers提供了非常多的選擇。除此之外，OpenLayers實現訪問地理空間數據的方法都符合行業標準。OpenLayers 支持Open GIS 協會制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等網絡服務規范，可以通過遠程服務的方式，將以OGC 服務形式發布的地圖數據加載到基于瀏覽器的OpenLayers 客戶端中進行顯示。
　　采用OpenLayers作為客戶端不存在瀏覽器依賴性。由于OpenLayers采用JavaScript語言實現，而應用于Web瀏覽器中的DOM（文檔對象模型）由JavaScript實現，同時，Web瀏覽器（比如IE，FF等）都支持DOM 。
　　OpenLayers APIs采用動態類型腳本語言JavaScript編寫，實現了類似與Ajax功能的無刷新更新頁面，能夠帶給用戶豐富的桌面體驗（它本身就有一個Ajax類，用于實現Ajax功能）。目前，OpenLayers所能夠支持的Format有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。在OPenlayers.Format名稱空間下的各個類里，實現了具體讀／寫這些Format的解析器。
　　通過以下幾個簡單的步驟，可以實現一個由openlayers加載地圖的示例：

• 下載源碼
  　　先到它的官方網站http://www.openlayers.org下載壓縮包，解壓后可以看到其中的一些目錄和文件，拷貝目錄下的OpenLayer.js、根目錄下的lib目錄、根目錄下的img目錄到你網站的Scripts目錄下（當然，這個只是例子，您網站的目錄結構您自己說得算，只要保證OpenLayers.js，/lib，/img在同一目錄中即可）。 然后，創建一個index.html作為查看地圖的頁面，導入OpenLayers.js和你將要創建的js。
• 代碼示例
  
• 顯示效果
  

---

2 源代碼總體結構分析

　　通過前面的項目介紹，我們大概已經知道Openlayers是什么，能夠做什么，有什么意義。接下來我們分析它怎么樣，以及怎樣實現的等問題。

　　這個圖是從它的文檔上截取的，旨在從感官上認識一下OpenLayers的類。下面分別介紹。
　　

• OpenLayers：它為整個項目實現提供名稱空間（JavaScript語言沒有名稱空間一說，但是它確實有自己的機制實現類似的功能，后面會說明），它直接擁有一常量 VERSION_NUMBER，以標識版本。
• Ajax：顧名思義，用于實現Ajax功能，只是OpenLayers的開發者們把它單獨寫到一個類里了，其中用到了Prototype.js框架里的一些東西。同時，設計的時候也考慮了跨瀏覽器的問題。
• BaseTypes：這里定制了OpenLayers中用到的string，number 和 function。比如，OpenLayers. String. startsWith，用于測試一個字符串是否一以另一個字符串開頭；OpenLayers. Number. limitSigDigs，用于限制整數的有效數位；OpenLayers. Function.bind，用于把某一函數綁定于對象等等。
• Console：OpenLayers.Console，此名稱空間用于調試和把錯誤等輸出到“控制臺”上，需要結合使用../Firebug/firebug.js。
• Control：我們通常所說的控件類，它提供各種各樣的控件，比如上節中說的圖層開關LayerSwitcher，編輯工具條EditingToolbar等等。加載控件的例子：

var class = new OpenLayers.Map('map', { controls: [] });map.addControl(new OpenLayers.Control.PanZoomBar());map.addControl(new OpenLayers.Control.MouseToolbar());

• Events：用于實現OpenLayers的事件機制。具體來說，OpenLayers中的事件分為兩種，一種是瀏覽器事件，例如mouseup,mousedown之類的；另外一種是自定義的，如addLayer之類的。OpenLayers中的事件機制是非常值得我們學習的，后面將具體討論。
• Feature：我們知道：Feature是geography 和attributes的集合。在OpenLayers中，特別地OpenLayers.Feature 類由一個marker 和一個lonla組成。OpenLayers. Feature.WFS與OpenLayers. Feature. Vector繼承于它。
• Format：此類用于讀／寫各種格式的數據，它的子類都分別創建了各個格式的解析器。這些格式有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。
• Geometry：怎么翻譯呢，幾何？是對地理對象的描述。它的子類有Collection、Curve、LinearRing、LineString、 MultiLineString、MultiPoint、MultiPolygon、Point、Polygon、Rectangle、Surface，正是這些類的實例，構成了我們看到的地圖。需要說明的是，Surface 類暫時還沒有實現。
• Handler：這個類用于處理序列事件，可被激活和取消。同時，它也有命名類似于瀏覽器事件的方法。當一個handler 被激活，處理事件的方法就會被注冊到瀏覽器監聽器listener ，以響應相應的事件；當一個handler被取消，這些方法在事件監聽器中也會相應的被取消注冊。Handler通過控件control被創建，而control通過icon表現。
• Icon：在計算機屏幕上以圖標的形式呈現，有url、尺寸size和位置position３個屬性。一般情況，它與 OpenLayers.Marker結合應用，表現為一個Marker。
• Layer：圖層。
• Map：網頁中動態地圖。它就像容器，可向里面添加圖層Layer和控件Control。實際上，單個Map是毫無意義的，正是Layer和Control成就了它。
• Marker：它的實例是OpenLayers.LonLat 和OpenLayers.Icon的集合。通俗一點兒說，Icon附上一定的經緯度就是Marker。
• Popup：地圖上一個小巧的層，實現地圖“開關”功能。使用例子：

　　　popup= new OpenLayers.Popup("chicken",new OpenLayers.LonLat(5,40),new OpenLayers.Size(200,200),"example popup",true);map.addPopup(popup);

• Renderer：渲染類。在OpenLayers中，渲染功能是作為矢量圖層的一個屬性存在的，我們稱之為渲染器，矢量圖層就是通過這個渲染器提供的方法將矢量數據顯示出來。
• Tile：設計這個類用于指明單個“瓦片”Tile，或者更小的分辨率。Tiles存儲它們自身的信息，比如url和size等。
• Util：“跑龍套”的類。
  寫到這里，可以看到OpenLayers 的類纏繞的挺麻煩的，接下來的文章將從代碼部分分析更細部的東西。

3 BaseTypes

　　先說基類型BaseTypes，用來定義底層類與定制JS內置類。

1） 底層類

　　它們分別是：OpenLayers. LonLat、OpenLayers. Pixel、OpenLayers.Size、OpenLayers. Element、OpenLayers. Bounds和OpenLayers. Class。下面分別介紹：

• OpenLayers. LonLat：經緯度類，其實例為地圖提供一經度、緯度對，即位置。有兩個屬性lon（x-axis coodinate ）和lat（y-axis coordinate ）。這里說明一下，怎么經緯度又與x軸坐標、y軸坐標糾纏在一起？是這樣：當地圖是在地理坐標投影下，它就是經緯度；不然就是地圖上的x／y軸坐標。除構造函數外，實現了五個函數：

toShortString:function()　把坐標轉換為字符串； clone:function()　　復制一個LonLat對象； Add:function(lon,lat)　　改變現有地圖的位置；返回new OpenLayers.LonLat(this.lon + lon, this.lat + lat); equals:function(ll)　　判斷傳入的lon，lat對是否與當前的相等； wrapDateLine:function(maxExtent)　復制下(lon,lat)，指定為邊界的最大范圍。

• OpenLayers. Pixel：像素類，在顯示器上以(x,y)坐標的的形式呈現像素位置。有兩個屬性x坐標、y坐標，提供四個成員函數：

clone:function() 拷貝像素； equals:function(px) 判斷兩像素是否相等； add:function(x,y) 　改變(x,y)使其成為新像素；返回new OpenLayers.Pixel(this.x + x, this.y + y); offset:function(px)　　調用add()使像素位置發生偏移。返回this.add(px.x, px.y);

• OpenLayers.Size：也有兩個屬性，寬度width、高度height。實現了兩個成員函數：clone:function()和equals:function(sz)不多說了。
• OpenLayers. Element：在這個名稱空間下，開發者寫了好多API，有visible、toggle、hide、show、remove、getHeight、getDimensions和getStyle，以實現元素的顯示、隱藏、刪除、取得高度，取得范圍等功能。以getHeight函數為例我們看看它的代碼：
  　　

/*** APIFunction: getHeight* * Parameters:* element - {DOMElement}** Returns:* {Integer} The offset height of the element passed in*/getHeight: function(element) {element = OpenLayers.Util.getElement(element);return element.offsetHeight;}這里涉及到文檔對象模型DOM的一些東西，函數本身很簡單，最后返回元素的高度。

• OpenLayers. Bounds：在這個類中，數據以四個浮點型數left, bottom, right, top 的格式存儲，它是一個像盒子一樣的范圍。它實現了三個描述一個Bound的函數：toString、toArray和toBBOX。其中，toString的代碼如下：

　　/*** APIMethod: toString** Returns:* {String} String representation of bounds object.* (ex.<i>"left-bottom=(5,42) right-top=(10,45)"</i>)*/toString:function() {return ( "left-bottom=(" + this.left + "," + this.bottom + ")"+ " right-top=(" + this.right + "," + this.top + ")" );}結果類似于"left-bottom=(5,42) right-top=(10,45)"

　　三個Bound數據來源函數：fromString、fromArray和fromSize；五個獲取對象屬性的函數：getWidth、getHeight、getSize、getCenterPixel、getCenterLonLat，
余下還有：add:function(x,y)，extend:function(object)，containsLonLat，containsPixel，contains，intersectsBounds，containsBounds，determineQuadrant，wrapDateLine。以函數extend為例，看看源碼。
　　　

　extend:function(object) {var bounds = null;if (object) {switch(object.CLASS_NAME) {case "OpenLayers.LonLat": bounds = new OpenLayers.Bounds (object.lon, object.lat, object.lon, object.lat);break;case "OpenLayers.Geometry.Point":bounds = new OpenLayers.Bounds(object.x, object.y,object.x, object.y);break; case "OpenLayers.Bounds": bounds = object;break;}if (bounds) {if ( (this.left == null) || (bounds.left < this.left)) {this.left = bounds.left;}if ( (this.bottom == null) || (bounds.bottom < this.bottom) ) {this.bottom = bounds.bottom;}if ( (this.right == null) || (bounds.right > this.right) ) {this.right = bounds.right;}if ( (this.top == null) || (bounds.top > this.top) ) {this.top = bounds.top;}}}}

　　可以看出，對Bounds的擴展可以有三種形式：point, lonlat, 或者bounds，計算的條件是零坐標是在屏幕的左上角。

• OpenLayers. Class：這個類是OpenLayers 中的“大紅人”，只要創建其他類就得用它，同時也實現了多重繼承。用法如下：

　　單繼承創建：class = OpenLayers.Class(prototype);多繼承創建：class = OpenLayers.Class(Class1, Class2, prototype);

2） JS內置類

主要包含3類：String，Number，Function。

• String：OpenLayers對string類型定制了８個方法，分別是startsWith、contains、trim和camelize；還有另外４個方法：String. startsWith、String. contains、String.trim和String. Camelize，它們將會在3.0Version中被刪除，可能是以前版本遺留下來的，這里就不說它們了。　　

//Test whether a string starts with another string.startsWith: function(str, sub) {return (str.indexOf(sub) == 0);} //Test whether a string contains another string.contains: function(str, sub) {return (str.indexOf(sub) != -1);} //Removes leading and trailing whitespace characters from a string.trim: function(str) {return str.replace(/^"s*(.*?)"s*$/, "$1"); }//Camel-case a hyphenated string.//Ex."chicken-head"becomes"chickenHead",//and"-chicken-head"becomes"ChickenHead".// “駱駝”化帶有連字符的字符串。camelize: function(str) {var oStringList = str.split('-');var camelizedString = oStringList[0];for (var i = 1; i < oStringList.length; i++) {var s = oStringList[i];camelizedString += s.charAt(0).toUpperCase() + s.substring(1);}return camelizedString;}

• Number：項目僅對number類型擴展了一個方法OpenLayers. Number. limitSigDigs（還有一個方法Number. limitSigDigs，同樣在3.0中會刪除）。

//Limit the number of significant digits on an integer.limitSigDigs: function(num, sig) {var fig;if(sig > 0) {fig = parseFloat(num.toPrecision(sig));} else {fig = 0;}return fig;}

• Function：擴展了兩個方法bind 和bindAsEventListener（同樣存在Function.bind和Function. bindAsEventListener兩個被“遺棄”的函數）。

//Bind a function to an object. //Method to easily create closures with'this' altered.bind: function(func, object) {// create a reference to all arguments past the second onevar args = Array.prototype.slice.apply(arguments, [2]);return function() {// Push on any additional arguments from the actual function call.// These will come after those sent to the bind call.var newArgs = args.concat(Array.prototype.slice.apply(arguments, [0]));return func.apply(object, newArgs);}}//Bind a function to an object, and configure it to receive the event//object as first parameter when called.bindAsEventListener: function(func, object) {return function(event) {return func.call(object, event || window.event);};}

　　這里說說這兩個方法。首先看看bind方法，這是一個能夠被Function的實例得到的方法，如下所示：

Function.prototype.bind = function() { var _method = this, args = [], object = arguments[0]; for (var i = 1; i < arguments.length; i++) args.push(arguments[i]); return function(moreargs) { for (var i = 0; i < arguments.length; i++) args.push(arguments[i]); return _method.apply(object, args); } };

　　_method 代表Function實例自身，bind可接收多個參數，不過它綁定是是第一個參數，該參數是一個function或者是調用環境，后面的都是執行函數的參數。

Function.prototype.bindAsEventListener = function(object) { var _method = this; return function(event) { return _method.call(object, event || window.event); } };

　　這里只是將object作為_method 引用的環境，就是說現在可以在object對象中這樣使用,object. _method （event||window.event）。
　　也許你注意到了Funtion擴展的兩個方法一個用到了call而另一個用的是apply，其實這兩個并沒有什么太大的區別，只是參數傳遞的形式不同，如若沒有參數要傳遞，那么這兩個是一樣的：apply(obj[,argumentsArray]),call(obj[,arg1[,arg2…]])。
　　

4 空間數據的組織與實現

　　提到數據，先思考幾個問題：GIS，核心是什么？數據？平臺？服務？　　空間數據的特征、表達方式？地理數據的模型（結構）？
　　在OpenLayers空間數據的實現主要存在OpenLayers. Geometry類及其子類中。
　　OpenLyers對于Geometry對象的組織是這樣的，其實最基礎的就是點，然后MultiPoint由點構成，繼承自Openlayers.Geometry.Collection,而LinearRing,LineString均由Point構成，
Polygon由OpenLayers.Geometry.LinearRing構成。
　　OpenLyers在解析數據時候，將所有的面、線包含的點全部都對象化為Openlayers.Geometry.Point。有人測試這里面存在問題：解析矢量數據慢，甚至在點數多的情況下，會使瀏覽器“崩潰”掉。想想是有道理的：OpenLyers在解析數據時候，將所有的面、線包含的點全部都對象化為點對象，并首先將所有的對象讀取到內存，得到一個Feature的集合，然后將這個集合提交給渲染器進行渲染。這樣渲染起來當然慢了。至于為什么要這樣，可能是OpenLayers項目本身在標準上，在框架結構上做的比較好，更細部的東西還得優化呀。可話又說回來，OpenLayers作為一個優秀的開源JS框架，學習借鑒的意義要比應用的意義大吧。　
　下面以Point和Collection為例來說明其內部實現過程，先看Point。
　 我們知道一個點就是一個坐標對(x,y)嘛，當然它得有兩個屬性x，y。在point類里，提供了六個成員函數，分別是clone、distanceTo、equals、move、rotate和resize。看看計算兩點距離的函數是怎么寫的：

distanceTo: function(point) {var distance = 0.0;if ( (this.x != null) && (this.y != null) &&(point != null) && (point.x != null) && (point.y != null) ) { var dx2 = Math.pow(this.x - point.x, 2);var dy2 = Math.pow(this.y - point.y, 2);distance = Math.sqrt( dx2 + dy2 );}return distance;}

　　在collection集合對象中，可以存放同一類型的地理對象，也可以放不同的地理對象。定義了一個屬性component ，以數組對象的形式存儲組成collection對象的“組件”。別的不說了，看一個獲取集合大小的函數getLength：

getLength: function() {var length = 0.0;for (var i = 0; i < this.components.length; i++) {length += this.components[i].getLength();}return length;}

　　細心的朋友也許會發現，每一個基類都有一個destroy函數。它是OpenLayers實現的垃圾回收機制，以防止內存泄露，優化性能：

　　 /* APIMethod: destroy* Destroy this geometry.*/destroy: function () {this.components.length = 0;this.components = null;}。

5 數據解析——以GML為例

　　前面也提到過，OpenLayers設計是符合標準的，有良好的框架結構和實現機制，非常值得學習。OpenLayers支持的格式比較多，有XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS等。這回主要以GML為例來看OpenLayers 數據的解析過程。
　　先來了解一下GML：
　　GML (Geography Markup Language)即地理標識語言，它由OGC（開放式地理信息系統協會）于1999年提出，目前版本是3.0。GML是XML在地理空間信息領域的應用。利用GML可以存儲和發布各種特征的地理信息，并控制地理信息在Web瀏覽器中的顯示。地理空間互聯網絡作為全球信息基礎架構的一部分，已成為Internet上技術追蹤的熱點。許多公司和相關研究機構通過Web將眾多的地理信息源集成在一起，向用戶提供各種層次的應用服務，同時支持本地數據的開發和管理。GML可以在地理空間Web領域完成了同樣的任務。GML技術的出現是地理空間數據管理方法的一次飛躍。
　　介紹一篇文章：GML3．0的WebGlS研究。
　　我們從總體上來把握一下OpenLayers對于GML數據的解析，首先通過調用得到GML文本數據，然后通過Formate.GML類的read方法來解析這個文本，解析得到Geometry對象，然后Geometry對象用相應的渲染器畫出來。其實解析得到還是那些基本的Point呀、LineString呀之類的Geometry對象，就是我們在地圖上看到的那些內容。下面看其實現過程：　　

//read()函數讀取數據，獲取特征列表read: function(data) {if(typeof data == "string") {data = OpenLayers.Format.XML.prototype.read.apply(this, [data]);}var featureNodes = this.getElementsByTagNameNS　(data.documentElement,this.gmlns, this.featureName);var features = [];for(var i=0; i<featureNodes.length; i++) {var feature = this.parseFeature(featureNodes[i]);if(feature) {features.push(feature);}}return features;}

　　函數parseFeature()是OpenLayers中GML數據格式解析的核心，就是它創建地理對象和其屬性。實際上，每一個Foramt 子類都實現了這個成員函數，完成類似的功能。

parseFeature: function(node) {// only accept on geometry per feature - look for highest "order"var order = ["MultiPolygon", "Polygon","MultiLineString", "LineString","MultiPoint", "Point"];var type, nodeList, geometry, parser;for(var i=0; i<order.length; ++i) {type = order[i];nodeList = this.getElementsByTagNameNS(node, this.gmlns, type);if(nodeList.length > 0) {// only deal with first geometry of this typevar parser = this.parseGeometry[type.toLowerCase()];if(parser) {geometry = parser.apply(this, [nodeList[0]]);} else {OpenLayers.Console.error("Unsupported geometry type: " +type);}// stop looking for different geometry typesbreak;}} // construct feature (optionally with attributes)var attributes;if(this.extractAttributes) {attributes = this.parseAttributes(node);}var feature = new OpenLayers.Feature.Vector(geometry, attributes);// assign fid - this can come from a "fid" or "id" attributevar childNode = node.firstChild;var fid;while(childNode) {if(childNode.nodeType == 1) {fid = childNode.getAttribute("fid") ||childNode.getAttribute("id");if(fid) {break;}}childNode = childNode.nextSibling;}feature.fid = fid;return feature;}

　　剩下就是由具體的函數parse and bulid基本的地理對象（還有Attribute），包括point、multipoint、linestring、multilinestring、polygon、multipolygon等，然后在write出來。
　　結合前面的“OpenLayers空間數據的組織”，我們可以看到OpenLayers在解析獲取GML數據的時候，比如涉及到面、線的時候，總是以點為基礎構建的。有的朋友做過測試，說這時候，直接用SVG畫出來，性能上會好很多（具體沒測試過，不想多說什么）。

6 數據渲染分析

　　實際上，OpenLayers的整個表現過程是這樣的：通過調用獲取數據，然后各種格式的解析器解析數據，在用所謂的渲染器渲染后加到圖層上，最后再結合相應的控件表現出來，成為一幅我們看到的“動態”地圖。
　　這里主要討論OpenLayers. Renderer這個類及其子類。
　　Renderer類提供了一些虛方法，以供其子類繼承，像setExtent、drawFeature、drawGeometry、eraseFeatures、eraseGeometry等。
　　Elements繼承Renderer，具體實現渲染的類又繼承Renderer類。之所以這樣設計，是因為不同的矢量格式數據需要共享相應的函數，在Elements這個類中封裝一下。這個類的核心是drawGeometry和drawGeometryNode兩個函數。其中drawGeometry調用了drawGeometryNode，創建出基本的地理對象。

drawGeometry: function(geometry, style, featureId) {var className = geometry.CLASS_NAME;if ((className == "OpenLayers.Geometry.Collection") ||(className == "OpenLayers.Geometry.MultiPoint") ||(className == "OpenLayers.Geometry.MultiLineString") ||(className == "OpenLayers.Geometry.MultiPolygon")) {for (var i = 0; i < geometry.components.length; i++) {this.drawGeometry(geometry.components[i], style, featureId);}return;};//first we create the basic node and add it to the rootvar nodeType = this.getNodeType(geometry);var node = this.nodeFactory(geometry.id, nodeType, geometry);node._featureId = featureId;node._geometryClass = geometry.CLASS_NAME;node._style = style;this.root.appendChild(node);//now actually draw the node, and style itthis.drawGeometryNode(node, geometry);}

　　實現渲染的方法在OpenLayers. Renderer.SVG和OpenLayers. Renderer.VML兩個類中實現的，就是實現Elements提供的虛方法，比如drawPoint、drawCircle、drawLineString、drawLinearRing、drawLine、drawPolygon、drawSurface等。以drawCircle為例看看具體的實現過程：

drawCircle: function(node, geometry, radius) {if(!isNaN(geometry.x)&& !isNaN(geometry.y)) {var resolution = this.getResolution();node.style.left = (geometry.x /resolution).toFixed() - radius;node.style.top = (geometry.y /resolution).toFixed() - radius;var diameter = radius * 2;node.style.width = diameter;node.style.height = diameter;}}

7 地圖表現

　　一開始看到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 baselayerthis.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 th// 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 對象。　　　　

//Allows user to pan by a value of screen pixelspan: function(dx, dy) {// getCentervar centerPx = this.getViewPortPxFromLonLat(this.getCenter());// adjustvar newCenterPx = centerPx.add(dx, dy);// only call setCenter if there has been a changeif (!newCenterPx.equals(centerPx)) {var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);this.setCenter(newCenterLonLat);}}

　　Zoom, Center, Pan Functions：這里就看看放大縮小函數吧。

zoomIn: function() {this.zoomTo(this.getZoom() + 1);}zoomOut: function() {this.zoomTo(this.getZoom() - 1);}

　　顯然，zoomIn和zoomOut都使用了getZoom方法，放大就是讓zoom加１，縮小減１。

8 地圖表現-圖層

　　上一回說到OpenLayers.Map類，這回介紹組成Map的主體部分OpenLayers. Layer類，先從其實現細節上分析，看它是怎么設計出來的。關于它許許多多的子類，即各種圖層，想單獨寫一篇。
　　OpenLayers. Layer提供了一個EVENT_TYPES常量，用于支持關于圖層的應用事件類型，這些事件有”loadstart”, “loadend”, “loadcancel”, “Visibilitychanged”。
　　它“固有”的３個屬性：id,name,div。其中，id和name是layer的身份，在對圖層進行操作的時候，就是用它們標志的。至于div，大家都制知道，DOM元素，用于存放圖層。
　　定義的map、event屬性，是圖層對象對map、event對象的引用；projection屬性，設置默認情況下，地圖的投影，同時也設置maxExtent, maxResolution, 和units 。
　　來看看構造函數：

initialize: function(name, options) {this.addOptions(options);this.name = name;if (this.id == null) {this.id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");this.div = OpenLayers.Util.createDiv();this.div.style.width = "100%";this.div.style.height = "100%";this.div.id = this.id;this.events = new OpenLayers.Events(this, this.div,this.EVENT_TYPES);}if (this.wrapDateLine) {this.displayOutsideMaxExtent = true;}}

　　OpenLayers中每一個類的構造函數都是以initialize命名的。
　　再看看其成員函數：
　　destroy函數，相當于析構函數；
　　onMapResize，removeMap　虛函數，提供給子類繼承；
　　

//移動函數moveTo:function(bounds, zoomChanged, dragging) {var display = this.visibility;if (!this.isBaseLayer) {display = display && this.inRange;}this.display(display);}

　　下面一組函數是Baselayer Functions函數，就是layer是Baselayer 的話，所用的函數。比如，initResolutions、getResolution、getExtent等。
　　通過這兩次的分析，可以發現，Map和Layers的關系：它們是相互引用的。實際上是這樣，OpenLayers的Map類主要包含了對每個圖層的引用，對每個控件的引用，對事件的引用，對裝載容器的引用（其實就是那些map上層的div）以及對pop的引用，而其自身又包含有大量的方法和屬性。圖層主要包含了對map的引用，對自身div容器的引用以及事件的引用，而圖層自身又包含了大量的屬性和方法。map引用了layer，而layer又引用了map，這里就直接形成了循環引用關系。
　　這樣的組成和關聯關系，每動一下，就會涉及到大量的對象，影響了性能。

9 控件

　　OpenLayers中的控件，是通過加載到地圖上而起作用的，也算地圖表現的一部分。同時，控件需要對地圖發生作用，所以每個控件也持有對地圖（map對象）的引用。
　　前面說過，控件是于事件相關聯的。具體的說就是控件的實現是依賴于事件綁定的，每個OpenLayers.Control及其子類的實例都會持有一個handler的引用的。
　　那么，怎么來創建并添加一個控件呢？用下面的語句：

//實例化一個控件var control1 = new OpenLayers.Control({div: myDiv}); //向地圖中添加控件var map = new OpenLayers.Map('map', { controls: [] });map.addControl(control1 );

　　對一些常用的OpenLayers控件，項目本身都封裝好了，用下面的語句添加：

　　map.addControl(new OpenLayers.Control.PanZoomBar());map.addControl(new OpenLayers.Control.MouseToolbar());map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));map.addControl(new OpenLayers.Control.Permalink());map.addControl(new OpenLayers.Control.Permalink('permalink'));map.addControl(new OpenLayers.Control.MousePosition());map.addControl(new OpenLayers.Control.OverviewMap());map.addControl(new OpenLayers.Control.KeyboardDefaults());

　　先看看OpenLayers. Control基類的實現過程，再選擇幾個典型的子類分析一下。

　//設置控件的map屬性，即控件所引用的地圖setMap: function(map) {this.map = map;if (this.handler) {this.handler.setMap(map);}}//drew方法，當控件準備顯示在地圖上是被調用。當然，這個方法只對有圖標的控件起作用。draw: function (px) {if (this.div == null) {this.div = OpenLayers.Util.createDiv();this.div.id = this.id;this.div.className = this.displayClass;}if (px != null) {this.position = px.clone();}this.moveTo(this.position); return this.div;}

　　前面說過，OpenLayers.Control及其子類的實例都是會持有一個handler的引用的，因為每個控件起作用時，鼠標事件都是不一樣的，這需要動態的綁定和接觸綁定。在OpenLayers.Control中是通過active和deactive兩個方法實現，就是動態的激活和注銷。　

//激活方法activate: function () {if (this.active) {return false;}if (this.handler) {this.handler.activate();}this.active = true;return true;}//注銷方法deactivate: function () {if (this.active) {if (this.handler) {this.handler.deactivate();}this.active = false;return true;}return false;}

　　再來看OpenLayers.Control的子類，即各類“特色”控件。選鷹眼控件OpenLayers. Control. OverviewMap和矢量編輯工具條控件OpenLayers. Control. EditingToolbar來說。
　　順便說一句，OpenLayers中的控件有些是需要圖標的，像EditingToolbar，有些是不需要的，像OpenLayers. Control. DragPan。
　　OpenLayers. Control. OverviewMap：“鷹眼”實際上也是地圖導航的一種形式，在外部形態上跟圖層開關控件有點兒像。添加鷹眼控件的語句：
　

map.addControl(new OpenLayers.Control.OverviewMap());

　　在它實現的成員函數中，draw函數是核心，繼承基類OpenLayers.Control，在地圖中顯示這個控件。此控件關聯了一些瀏覽器事件，比如:

rectMouseDown: function (evt) {if(!OpenLayers.Event.isLeftClick(evt)) return;this.rectDragStart = evt.xy.clone();this.performedRectDrag = false;OpenLayers.Event.stop(evt);}。

　　OpenLayers. Control. EditingToolbar：OpenLayers從2.3版就對矢量編輯進行了支持，就是圖上右上角幾個圖標。完成點、線、面的編輯功能。同樣，它也是用drew方法激活：

draw: function() {Var　div　= OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);this.activateControl(this.controls[0]);return div;}

　　下面的代碼是使用此控件的具體過程：
　　

var map, layer; map = new OpenLayers.Map( 'map', { controls: [] } );layer = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );map.addLayer(layer);vlayer = new OpenLayers.Layer.Vector( "Editable" );map.addLayer(vlayer);map.addControl(new OpenLayers.Control.PanZoomBar());map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

10 事件機制分析

　　OpenLayers中的事件封裝是其一大亮點，非常值得學習。說到事件機制，在宏觀上不得不涉及控件OpenLayers.Control類、OpenLayers. Marker類、OpenLayers.Icon類等。是這樣，在外觀上控件通過Marker和Icon表現出來，而事件包含在控件之后，用他們自己的話說就是：The controls that wrap handlers define the methods that correspond to these abstract events 。順便再說一句，控件實現的核心是handler類，每個控件中都包含對handler的引用，通過active和deactive兩個方法，實現動態的激活和注銷。
　　OpenLayers中的事件有兩種：一種是瀏覽器事件（比如onclick，onmouseup等），另一種是自定義的事件。自定義的事件像addLayer ,addControl等，不象瀏覽器事件會綁定相應的dom節點，它是與layer、map等關聯的。
　　OpenLayers中支持的瀏覽器事件類型有（以常量的形式提供的）：　

BROWSER_EVENTS: ["mouseover", "mouseout","mousedown", "mouseup", "mousemove","click", "dblclick","resize", "focus", "blur" ]　

　看看構造函數的的實現過程：

initialize: function (object, element, eventTypes, fallThrough) {this.object = object;this.element = element;this.eventTypes = eventTypes;this.fallThrough = fallThrough;this.listeners = {};// keep a bound copy of handleBrowserEvent() so that we can pass the same function to both Event.observe() and .stopObserving()this.eventHandler = OpenLayers.Function.bindAsEventListener(this.handleBrowserEvent, this);// if eventTypes is specified, create a listeners list for each// custom application event.if (this.eventTypes != null) {for (var i = 0; i < this.eventTypes.length; i++) {this.addEventType(this.eventTypes[i]);}}// if a dom element is specified, add a listeners list// for browser events on the element and register themif (this.element != null) {this.attachToElement(element);}}

　　可以這樣理解：
　　initialize（object, element, eventTypes, fallThrough）方法會將以數組eventTypes的每個元素為key建立哈希表listeners，表中每個鍵對應一個數組。還會給this.eventHandler賦值，它實際只是一個包裝了triggerEvent事件觸發函數的方法，所有的事件，包括瀏覽器事件和自定義事件都是通過它來中轉的。然后initialize將所有的瀏覽器事件放入listeners中，并為其綁定相應的dom節點element和this.eventHandler事件處理函數OpenLayers.Event.observe(element, eventType, this.eventHandler)，節點上事件觸發的時候會把事件傳給this.eventHandler，它調用triggerEvent，從而將事件傳出來。
　　來看其他的成員函數：
　　addEventType：Add a new event type to this events object；
　　attachToElement：把瀏覽器事件關聯到相應的DOM元素上；

register： Register an event on the events object.register: function (type, obj, func) {if (func != null) {if (obj == null) {obj = this.object;}var listeners = this.listeners[type];if (listeners != null) {listeners.push( {obj: obj, func: func} );}}}

　　其中，func參數是預先定義的回調函數。
　　unregister：注銷方法；
　　remove：Remove all listeners for a given event type.
　　triggerEvent：Trigger a specified registered event。

總結

以上是生活随笔為你收集整理的F1V3.0-图形-OpenLayers2体系分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。