OpenLayers 项目分析——BaseTypes

先说基类型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 < thi                     s.left)) {

                     this.left = bounds.left;}

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

                    this.bottom = bounds.bottom;} 

                if ( (this.right == null) || (bounds.right > t                    his.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不仅“自己”写了一些底层的类，像上回说的那些都是。同时也定制了一些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…]])。