OpenLayers学习9-元素Element,经纬度LngLat,尺寸Size

Posted on   |   In   |  

Element不是一个类(不是从Class扩展出来的), 感觉是对Dom操作的包装对象.
看了一下类图, Element仅仅作为SVG和VML的父类使用, 这样组织的好处还没体会到

一:Element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
//说明依赖于哪些类
/**
 * @requires OpenLayers/Util.js
 * @requires OpenLayers/BaseTypes.js
 */
 
//仅仅是个Namespace
/**
 * Namespace: OpenLayers.Element
 */
OpenLayers.Element = {
 
    //查询元素的style.display是否为'none'
    visible: function(element) {
        return OpenLayers.Util.getElement(element).style.display != 'none';
    },
 
    //切换传入domID的显示隐藏 
    toggle: function() {
        for (var i=0, len=arguments.length; i<len; i++) {
            var element = OpenLayers.Util.getElement(arguments[i]);
            var display = OpenLayers.Element.visible(element) ? 'none' 
                                                              : '';
            element.style.display = display;//切换显示状态
        }
    },
 
    //从parentNode里removeChild
    remove: function(element) {
        element = OpenLayers.Util.getElement(element);
        element.parentNode.removeChild(element);
    },
 
    //获得目标dom的offsetHeight(height + padding值 + border值)
    getHeight: function(element) {
        element = OpenLayers.Util.getElement(element);
        return element.offsetHeight;
    },
 
    //测试className中是否包含传入的name
    hasClass: function(element, name) {
        var names = element.className;
        return (!!names && new RegExp("(^|\\s)" + name + "(\\s|$)").test(names));
    },
     
    //如果没有此class, 添加
    addClass: function(element, name) {
        if(!OpenLayers.Element.hasClass(element, name)) {
            element.className += (element.className ? " " : "") + name;
        }
        return element;
    },
 
    //从元素的中, 删掉传入的类名(正则换成空格)
    removeClass: function(element, name) {
        var names = element.className;
        if(names) {
            element.className = OpenLayers.String.trim(
                names.replace(
                    new RegExp("(^|\\s+)" + name + "(\\s+|$)"), " "
                )
            );
        }
        return element;
    },
 
    //切换class, 没有加上, 有就删掉
    toggleClass: function(element, name) {
        if(OpenLayers.Element.hasClass(element, name)) {
            OpenLayers.Element.removeClass(element, name);
        } else {
            OpenLayers.Element.addClass(element, name);
        }
        return element;
    },
 
    //
    getStyle: function(element, style) {
        element = OpenLayers.Util.getElement(element);
 
        var value = null;
        if (element && element.style) {
            //为了兼容性, 驼峰处理传入的style
            value = element.style[OpenLayers.String.camelize(style)];
            if (!value) {
                if (document.defaultView && 
                    document.defaultView.getComputedStyle) {
                    //优选使用document.defaultView.getComputedStyle去取style
                    var css = document.defaultView.getComputedStyle(element, null);
                    value = css ? css.getPropertyValue(style) : null;
                } else if (element.currentStyle) {
                    //element.currentStyle是低版本IE才有的
                    value = element.currentStyle[OpenLayers.String.camelize(style)];
                }
            }
         
            var positions = ['left', 'top', 'right', 'bottom'];
            //特殊处理opera, 传入的是positions[]且position是static
            if (window.opera &&
                (OpenLayers.Util.indexOf(positions,style) != -1) &&
                (OpenLayers.Element.getStyle(element, 'position') == 'static')) { 
                value = 'auto';
            }
        }
     
        return value == 'auto' ? null : value;
    }
 
    //这里没有CLASS_NAME
    //看了一下类图, Element仅仅作为SVG和VML的父类使用
};

二: 经纬度LonLat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//经纬度类 
OpenLayers.LonLat = OpenLayers.Class({
 
    //经度 横向, 公司内部规定缩写成lng的
    lon: 0.0,
     
    //维度 纵向
    lat: 0.0,
 
    //构造函数, lon可以是数组[lon,lat]
    initialize: function(lon, lat) {
        if (OpenLayers.Util.isArray(lon)) {
            lat = lon[1];
            lon = lon[0];
        }
        this.lon = OpenLayers.Util.toFloat(lon);
        this.lat = OpenLayers.Util.toFloat(lat);
    },
     
    //toString
    toString:function() {
        return ("lon=" + this.lon + ",lat=" + this.lat);
    },
 
    //化简掉toString里的描述,只留数字
    toShortString:function() {
        return (this.lon + ", " + this.lat);
    },
 
    //利用构造函数返回一个新的LonLat对象
    clone:function() {
        return new OpenLayers.LonLat(this.lon, this.lat);
    },
 
    //原经纬度对象 + 传入的lon,lat
    add:function(lon, lat) {
        if ( (lon == null) || (lat == null) ) {
            throw new TypeError('LonLat.add cannot receive null values');
        }
        return new OpenLayers.LonLat(this.lon + OpenLayers.Util.toFloat(lon), 
                                     this.lat + OpenLayers.Util.toFloat(lat));
    },
 
    //比较lnglat, 
    //不过四个值 isNaN全true也判定为相当不太理解, 琢磨半天也没想明白
    equals:function(ll) {
        var equals = false;
        if (ll != null) {
            equals = ((this.lon == ll.lon && this.lat == ll.lat) ||
                      (isNaN(this.lon) && isNaN(this.lat) && isNaN(ll.lon) && isNaN(ll.lat)));
        }
        return equals;
    },
 
    //把当前的经纬度, 从原坐标系转成目标坐标系
    transform: function(source, dest) {
        var point = OpenLayers.Projection.transform(
            {'x': this.lon, 'y': this.lat}, source, dest);
        this.lon = point.x;
        this.lat = point.y;
        return this;
    },
     
    //根据换日线 计算出新的经纬度对象
    //这个问了一下才明白: 比如画线时候, 鼠标越过换日线 就自动跳回本区间内了, 这时需要自动计算对应点
    wrapDateLine: function(maxExtent) {    
        var newLonLat = this.clone();
     
        if (maxExtent) {
            //shift right?
            while (newLonLat.lon < maxExtent.left) {
                newLonLat.lon +=  maxExtent.getWidth();
            }    
            
            //shift left?
            while (newLonLat.lon > maxExtent.right) {
                newLonLat.lon -= maxExtent.getWidth();
            }    
        }
                 
        return newLonLat;
    },
 
    CLASS_NAME: "OpenLayers.LonLat"
});
 
 
//从传参str解析经纬度, 新建lonlat对象 
OpenLayers.LonLat.fromString = function(str) {
    var pair = str.split(",");
    return new OpenLayers.LonLat(pair[0], pair[1]);
};
 
//从数组解析经纬度, 返回新对象
OpenLayers.LonLat.fromArray = function(arr) {
    var gotArr = OpenLayers.Util.isArray(arr),
        lon = gotArr && arr[0],
        lat = gotArr && arr[1];
    return new OpenLayers.LonLat(lon, lat);
};

三: 屏幕上像素位置类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
//屏幕上像素位置类
OpenLayers.Pixel = OpenLayers.Class({
     
    x: 0.0,
 
    y: 0.0,
     
    //构造 
    initialize: function(x, y) {
        this.x = parseFloat(x);
        this.y = parseFloat(y);
    },
     
    //toString带描述 
    toString:function() {
        return ("x=" + this.x + ",y=" + this.y);
    },
 
    //克隆 
    clone:function() {
        return new OpenLayers.Pixel(this.x, this.y); 
    },
     
    //判断传入值和当前对象的px全等
    equals:function(px) {
        var equals = false;
        if (px != null) {
            equals = ((this.x == px.x && this.y == px.y) ||
                      (isNaN(this.x) && isNaN(this.y) && isNaN(px.x) && isNaN(px.y)));
        }
        return equals;
    },
 
    //计算两点距离(直角三角)
    distanceTo:function(px) {
        return Math.sqrt(
            Math.pow(this.x - px.x, 2) +
            Math.pow(this.y - px.y, 2)
        );
    },
 
    //坐标分别相加, 返回新Px对象
    add:function(x, y) {
        if ( (x == null) || (y == null) ) {
            throw new TypeError('Pixel.add cannot receive null values');
        }
        return new OpenLayers.Pixel(this.x + x, this.y + y);
    },
 
    //返回一个偏移后的新Px对象
    offset:function(px) {
        var newPx = this.clone();
        if (px) {
            newPx = this.add(px.x, px.y);
        }
        return newPx;
    },
 
    CLASS_NAME: "OpenLayers.Pixel"
});

四: 表示宽高的类, 没有什么方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//表示宽高的类, 没有什么方法 
OpenLayers.Size = OpenLayers.Class({
 
    w: 0.0,
     
    h: 0.0,
 
    //构造
    initialize: function(w, h) {
        this.w = parseFloat(w);
        this.h = parseFloat(h);
    },
 
    //带描述的toString
    toString:function() {
        return ("w=" + this.w + ",h=" + this.h);
    },
 
    //克隆, 返回一个新的
    clone:function() {
        return new OpenLayers.Size(this.w, this.h);
    },
 
    //判断相等
    equals:function(sz) {
        var equals = false;
        if (sz != null) {
            equals = ((this.w == sz.w && this.h == sz.h) ||
                      (isNaN(this.w) && isNaN(this.h) && isNaN(sz.w) && isNaN(sz.h)));
        }
        return equals;
    },
 
    CLASS_NAME: "OpenLayers.Size"
});