【转】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内置类的扩展下回写。