OpenLayers項目分析


摘要：OpenLayers 是由 MetaCarta公司開發的， 用于WebGIS客戶端的JavaScript包，目前的最高版本是2.5 V，通過BSD License 發行。它實現訪問地理空間數據的方法都符合行業標準，比如OpenGIS的WMS和WFS規范， OpenLayers采用純面向對象的JavaScript方式開發，同時借用了Prototype框架和Rico庫的一些組件。
（一）項目介紹
網址：http://www.openlayers.org/
?
　　OpenLayers 是由MetaCarta公司開發的，用于WebGIS客戶端的JavaScript包，目前的最高版本是2.5 V，通過BSD License 發行。它實現訪問地理空間數據的方法都符合行業標準，比如OpenGIS的WMS和WFS規范， OpenLayers采用純面向對象的JavaScript方式開發，同時借用了Prototype框架和Rico庫的一些組件。
?
　　采用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所能夠利用的地圖數據資源“豐富多彩”，在這方面提供給擁護較多的選擇，比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。當然，也可以用簡單的圖片作為源。
?
第一次使用OpenLayers：
?
　　先到它的官方網站http://www.openlayers.org下載他的壓縮包，解壓后可以看到其中的一些目錄和文件，拷貝目錄下的OpenLayer.js、根目錄下的lib目錄、根目錄下的img目錄到你網站的Scripts目錄下（當然，這個只是例子，您網站的目錄結構您自己說得算，只要保證OpenLayers.js，/lib，/img在同一目錄中即可）。 然后，創建一個index.html作為查看地圖的頁面，導入OpenLayers.js和你將要創建的js。
?
　　我們以加載WMS和GML文件為例。　
?
? ? <script src="../lib/OpenLayers.js"></script>
　　<script type="text/javascript">
? ? ? ? var lon = 5; ? ?//x-axis coodinate in map units
? ? ? ? var lat = 40; ? //y-axis coordinate in map units
? ? ? ? var zoom = 5; ? //number of zoom levels
? ? ? ? var map, layer; ? ? ?//聲明變量map、layer；等同于 var map = null; var layer = null;
?
? ? ? ? map = new OpenLayers.Map('map');
? ? ? ? //實例化一個地圖類OpenLayers.Map
?
? ? ? ? layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
? ? ? ? ? ? ? ? ? ? "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
? ? ? ? //以WMS的格式實例化圖層類OpenLayers.Layer
?
? ? ? ? map.addLayer(layer);
? ? ? ? map.zoomToExtent(newOpenLayers.Bounds(-3.922119,44.335327,
? ? ? ? 4.866943,49.553833));
　　　　//在Map對象上加載Layer對象，并用map.zoomToExtent函數使地圖合適地顯示
?
　　　　map.addLayer(new OpenLayers.Layer.GML("GML", "gml/polygon.xml"));
　　　　//再在剛加載的WMS文件上，加載一GML文件
?
　　剩下的工作就是，加上一些控件OpenLayers.Control之類的東西，比如LayerSwitcher等。它們會在地圖瀏覽的“窗口”上增加一些工具欄或是“按鈕”，增加互動性和功能性。
?
　　當然，Openlayers中的東西遠不止這些，至于它的框架分析、APIs實現機制，會在后續文章中說出。寫這個的過程，也是一個學習的過程，其中難免有不妥之處，熱烈歡迎大家批評指正，相互交流。
?
OpenLayers 項目完整分析——（二）源代碼總體結構分析
（二）源代碼總體結構分析
?
通過前面的項目介紹，我們大概已經知道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等等。加載控件的例子：
?
? ? ? ? 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：地圖上一個小巧的層，實現地圖“開關”功能。使用例子：
?
　　　　　　Class = new OpenLayers.Popup("chicken",
? ? ? ? ? ? ? ? ? ?new OpenLayers.LonLat(5,40),
? ? ? ? ? ? ? ? ? ?new OpenLayers.Size(200,200),
? ? ? ? ? ? ? ? ? ?"example popup",
? ? ? ? ? ? ? ? ? ?true);
　　　　　　map.addPopup(popup);
?
　　Renderer：渲染類。在OpenLayers中，渲染功能是作為矢量圖層的一個屬性存在的，我們稱之為渲染器，矢量圖層就是通過這個渲染器提供的方法將矢量數據顯示出來。以SVG和VML為例，繼承關系是這樣的：　　　　
至于OpenLayers. Renderer. Elements為什么要存在，以及它的渲染機制，后面會說。
?
　　Tile：設計這個類用于指明單個“瓦片”Tile，或者更小的分辨率。Tiles存儲它們自身的信息，比如url和size等。它的類繼承關系如下：
?
　　Util：“跑龍套”的類。
?
　　寫到這里，可以看到OpenLayers 的類纏繞的挺麻煩的，接下來的文章將從代碼部分分析更細部的東西。
?
OpenLayers 項目分析——（三）BaseTypes
（三）BaseTypes ：定義底層類與定制JS內置類　　
?
? ? 先說基類型BaseTypes下，OpenLyers構建的“自己”的類。它們分別是：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)　　改變現有地圖的位置；
　　return 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)使其成為新像素；
return new OpenLayers.Pixel(this.x + x, this.y + y);
?
offset:function(px)　　調用add()使像素位置發生偏移。
　　newPx = 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);
?
? ? 凈說底層類了，對js內置類的擴展下回寫。
?
?
OpenLayers 項目分析——（三）BaseTypes (續)
（三）BaseTypes： OpenLayers中定制JavaScript內置類
?
　　OpenLayers不僅“自己”寫了一些底層的類，像上回說的那些都是。同時也定制了一些JS的一些內置類，即對JS內置類的擴展。這個擴展主要包含3類：String，Number，Function，存在于BaseTypes.js文件中。
?
　　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 one
? ? ? ? var 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…]])。
?
OpenLayers項目分析——（四）空間數據的組織與實現
?
提到數據，先思考幾個問題：
　　GIS，核心是什么？數據？平臺？服務？　　
　　空間數據的特征、表達方式？
　　地理數據的模型（結構）？
?
　　在OpenLayers空間數據的實現主要存在OpenLayers. Geometry類及其子類中。我們先看下面的兩個圖片，表現了這些類的繼承關系。從圖上可以清楚的看出MultiPoint、Polygon和MultiLineString 這三個類實現了多重繼承，即直接繼承于Geometry類，又繼承于Collection類（為什么要這樣實現？）。
?
　　OpenLyers對于Geometry對象的組織是這樣的，其實最基礎的就是點，然后MultiPoint由點構成，繼承自Openlayers.Geometry.Collection,而LinearRing,LineString均由Point構成，
?
Polygon由OpenLayers.Geometry.LinearRing構成。OpenLyers在解析數據時候，將所有的面、線包含的點全部都對象化為Openlayers.Geometry.Point。有人測試這里面存在問題：解析矢量數據慢，甚至在點數多的情況下，會使瀏覽器“崩潰”掉。想想是有道理的：OpenLyers在解析數據時候，將所有的面、線包含的點全部都對象化為點對象t，并首先將所有的對象讀取到內存，得到一個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;
? ? }。
?
?
OpenLayers項目分析——（五） 數據解析——以GML為例
（五）OpenLayers 數據解析—以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 type
? ? ? ? ? ? ? ? var 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 types
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? } ? ? ??
? ? ? ? // 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" attribute
? ? ? ? var 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畫出來，性能上會好很多（具體沒測試過，不想多說什么）。
?
?
OpenLayers項目分析——（六）數據渲染分析
（六）數據渲染分析
實際上，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 root
? ? ? ? var 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 it
? ? ? ? this.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;
? ? ? ? }
? ? }
?
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加１，縮小減１。
?
OpenLayers項目分析——（八）地圖表現（續）
（八）地圖表現（續）
?
　　上一回說到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 。
?
　　來看看構造函數：
?
? ? ?* name - {String} The layer name
? ? ?* options - {Object} Hashtable of extra options to tag onto the layer
? ? ?*/
? ? 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，這里就直接形成了循環引用關系。
?
　　這樣的組成和關聯關系，每動一下，就會涉及到大量的對象，影響了性能
?
?
OpenLayers項目分析——（九）控件
（九）OpenLayers中的控件
?
　　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基類的實現過程，再選擇幾個典型的子類分析一下。
?
　　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);
?
OpenLayers項目分析——（十）事件機制分析
（十）OpenLayers事件機制分析
?
　　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 them
? ? ? ? if (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。

總結

以上是生活随笔為你收集整理的openlayers总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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