OpenLayers学习7-工具类Util_4

Posted on   |   In   |  

一:尺寸计算

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
//计算出popup的尺寸, left值会被写成-9999px, 防止滚动条闪烁
//size包含w 和 h参数, 
//option: displayClass是css类名, containerElement是父对象
OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
     
    var w, h;
     
    //临时div对象的容器
    var container = document.createElement("div");
    container.style.visibility = "hidden";
     
    //popup容器优先是options.containerElement, 然后是body    
    var containerElement = (options && options.containerElement) 
        ? options.containerElement : document.body;
     
    // IE7不能从父对象继承position:aboslute
    var parentHasPositionAbsolute = false;
    var superContainer = null;
    var parent = containerElement;
    while (parent && parent.tagName.toLowerCase()!="body") {
        //获取父对象的position值
        var parentPosition = OpenLayers.Element.getStyle(parent, "position");
        if(parentPosition == "absolute") {
            parentHasPositionAbsolute = true;//父对象是absolute标记
            break;
        } else if (parentPosition && parentPosition != "static") {
            break;
        }
        parent = parent.parentNode;
    }
    if(parentHasPositionAbsolute && (containerElement.clientHeight === 0 || 
                                     containerElement.clientWidth === 0) ){
        //不能继承aboslute就手工在外边套一层
        superContainer = document.createElement("div");
        superContainer.style.visibility = "hidden";
        superContainer.style.position = "absolute";
        superContainer.style.overflow = "visible";
        superContainer.style.width = document.body.clientWidth + "px";
        superContainer.style.height = document.body.clientHeight + "px";
        superContainer.appendChild(container);
    }
    container.style.position = "absolute";
 
    //写入指定的w和h
    if (size) {
        if (size.w) {
            w = size.w;
            container.style.width = w + "px";
        } else if (size.h) {
            h = size.h;
            container.style.height = h + "px";
        }
    }
 
    //写入指定css类名
    if (options && options.displayClass) {
        container.className = options.displayClass;
    }
     
    //内容div
    var content = document.createElement("div");
    content.innerHTML = contentHTML;
     
    //计算尺寸时需要overflow: visible
    content.style.overflow = "visible";
    if (content.childNodes) {
        for (var i=0, l=content.childNodes.length; i<l; i++) {
            if (!content.childNodes[i].style) continue;
            content.childNodes[i].style.overflow = "visible";//子元素overflow都改成visible
        }
    }
     
    //把内容div写入临时容器
    container.appendChild(content);
     
    //把临时容器写入页面
    if (superContainer) {
        containerElement.appendChild(superContainer);
    } else {
        containerElement.appendChild(container);
    }
     
    //没指定w的话
    if (!w) {
        w = parseInt(content.scrollWidth);
     
        //宽就是scrollWidth
        container.style.width = w + "px";
    }        
    //记录下来h
    if (!h) {
        h = parseInt(content.scrollHeight);
    }
 
    //遍历删除子元素
    container.removeChild(content);
    if (superContainer) {
        superContainer.removeChild(container);
        containerElement.removeChild(superContainer);
    } else {
        containerElement.removeChild(container);
    }
     
    return new OpenLayers.Size(w, h);//返回w 和 h
};
 
 
//获得滚动条宽度
OpenLayers.Util.getScrollbarWidth = function() {
    //默认宽度 初始化时没有, 在这个函数末尾追加
    var scrollbarWidth = OpenLayers.Util._scrollbarWidth;
     
    if (scrollbarWidth == null) {
        //初始化计算
        var scr = null;
        var inn = null;
        var wNoScroll = 0;
        var wScroll = 0;
     
        //外层div, 在视野外计算
        scr = document.createElement('div');
        scr.style.position = 'absolute';
        scr.style.top = '-1000px';
        scr.style.left = '-1000px';
        scr.style.width = '100px';//比较小
        scr.style.height = '50px';
        //没有滚动条
        scr.style.overflow = 'hidden';
     
        //内层, 写死大小
        inn = document.createElement('div');
        inn.style.width = '100%';
        inn.style.height = '200px';//比较大
     
        //外层套内层
        scr.appendChild(inn);
        //body套外层
        document.body.appendChild(scr);
     
        //原始内层的实际宽度offsetWidth(包含滚动条宽度)
        wNoScroll = inn.offsetWidth;
     
        //外层显示滚动条
        scr.style.overflow = 'scroll';
        //有滚动条以后的实际宽度offsetWidth
        wScroll = inn.offsetWidth;
     
        //计算完了, 删掉div
        document.body.removeChild(document.body.lastChild);
     
        //记录结果
        OpenLayers.Util._scrollbarWidth = (wNoScroll - wScroll);//内层没滚动条的宽度 - 有滚动条的宽度
        scrollbarWidth = OpenLayers.Util._scrollbarWidth;
    }
 
    return scrollbarWidth;
};