zoukankan      html  css  js  c++  java
  • 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 < 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内置类的扩展下回写。

    来源:http://www.cnblogs.com/happyforev1/articles/1573089.html

  • 相关阅读:
    Eureka 系列(04)客户端源码分析
    Eureka 系列(03)Spring Cloud 自动装配原理
    Eureka 系列(02)Eureka 一致性协议
    Eureka 系列(01)最简使用姿态
    Feign 系列(05)Spring Cloud OpenFeign 源码解析
    python 线程,进程与协程
    Python IO多路复用
    python 作用域
    python 网络编程:socket(二)
    python 网络编程:socket
  • 原文地址:https://www.cnblogs.com/xuanfengling/p/3409145.html
Copyright © 2011-2022 走看看