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的代碼如下：

[代碼]js代碼：

01

/**

02	* APIMethod: toString

03

*

04	* Returns:

05	* {String} String representation of bounds object.

06	*          (ex.<i>"left-bottom=(5,42) right-top=(10,45)"</i>)

07

*/

08	toString:function() {

09	return ( "left-bottom=(" + this.left + "," + this.bottom + ")"

10	+ " right-top=(" + this.right + "," + this.top + ")" );

11

}

結果類似於"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爲例，看看源碼。

[代碼]js代碼：

01	extend:function(object) {

02	var bounds = null;

03	if (object) {

04	switch(object.CLASS_NAME) {

05	case "OpenLayers.LonLat":

06	bounds = new OpenLayers.Bounds(object.lon, object.lat, object.lon, object.lat);

07

break;

08	case "OpenLayers.Geometry.Point":

09	bounds = new OpenLayers.Bounds(object.x, object.y,object.x, object.y);

10

break;

11	case "OpenLayers.Bounds":

12	bounds = object;

13

break;

14

}

15	if (bounds) {

16	if ( (this.left == null) || (bounds.left < this.left)) {

17	this.left = bounds.left;}

18	if ( (this.bottom == null) || (bounds.bottom <this.bottom) ) {

19	this.bottom = bounds.bottom;}

20	if ( (this.right == null) || (bounds.right > this.right) ) {

21	this.right = bounds.right;}

22	if ( (this.top == null) || (bounds.top > this.top) ) {

23	this.top = bounds.top;}

24

}

25

}

26

}

可以看出，對Bounds的擴展可以有三種形式：point, lonlat, 或者bounds，計算的條件是零座標是在屏幕的左上角。
　　OpenLayers. Class：這個類是OpenLayers 中的“大紅人”，只要創建其他類就得用它，同時也實現了多重繼承。用法如下：
　　單繼承創建：class = OpenLayers.Class(prototype);
　　多繼承創建：class = OpenLayers.Class(Class1, Class2, prototype);
    淨說底層類了，對js內置類的擴展下回寫。