OpenLayers 項(xiàng)目分析——(三)BaseTypes上一篇 / 下一篇 2008-01-08 18:16:05 / 個(gè)人分類:OpenLayers (三)BaseTypes :定義底層類與定制JS內(nèi)置類
先說(shuō)基類型BaseTypes下,OpenLyers構(gòu)建的“自己”的類。它們分別是:OpenLayers. LonLat、OpenLayers. Pixel、OpenLayers.Size、OpenLayers. Element、OpenLayers. Bounds和OpenLayers. Class。下面分別介紹: OpenLayers. LonLat:經(jīng)緯度類,其實(shí)例為地圖提供一經(jīng)度、緯度對(duì),即位置。有兩個(gè)屬性lon(x-axis coodinate )和lat(y-axis coordinate )。這里說(shuō)明一下,怎么經(jīng)緯度又與x軸坐標(biāo)、y軸坐標(biāo)糾纏在一起?是這樣:當(dāng)?shù)貓D是在地理坐標(biāo)投影下,它就是經(jīng)緯度;不然就是地圖上的x/y軸坐標(biāo)。除構(gòu)造函數(shù)外,實(shí)現(xiàn)了五個(gè)函數(shù): toShortString:function() 把坐標(biāo)轉(zhuǎn)換為字符串; clone:function() 復(fù)制一個(gè)LonLat對(duì)象; Add:function(lon,lat) 改變現(xiàn)有地圖的位置; return new OpenLayers.LonLat(this.lon + lon, this.lat + lat); equals:function(ll) 判斷傳入的lon,lat對(duì)是否與當(dāng)前的相等; wrapDateLine:function(maxExtent) 復(fù)制下(lon,lat),指定為邊界的最大范圍。
OpenLayers. Pixel:像素類,在顯示器上以(x,y)坐標(biāo)的的形式呈現(xiàn)像素位置。有兩個(gè)屬性x坐標(biāo)、y坐標(biāo),提供四個(gè)成員函數(shù): clone:function() 拷貝像素; equals:function(px) 判斷兩像素是否相等; add:function(x,y) 改變(x,y)使其成為新像素; return new OpenLayers.Pixel(this.x + x, this.y + y); offset:function(px) 調(diào)用add()使像素位置發(fā)生偏移。 newPx = this.add(px.x, px.y);
OpenLayers.Size:也有兩個(gè)屬性,寬度width、高度height。實(shí)現(xiàn)了兩個(gè)成員函數(shù):clone:function()和equals:function(sz)不多說(shuō)了。
OpenLayers. Element:在這個(gè)名稱空間下,開(kāi)發(fā)者寫(xiě)了好多API,有visible、toggle、hide、show、remove、getHeight、getDimensions和getStyle,以實(shí)現(xiàn)元素的顯示、隱藏、刪除、取得高度,取得范圍等功能。以getHeight函數(shù)為例我們看看它的代碼: /** * 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; } 這里涉及到文檔對(duì)象模型DOM的一些東西,函數(shù)本身很簡(jiǎn)單,最后返回元素的高度。
OpenLayers. Bounds:在這個(gè)類中,數(shù)據(jù)以四個(gè)浮點(diǎn)型數(shù)left, bottom, right, top 的格式存儲(chǔ),它是一個(gè)像盒子一樣的范圍。它實(shí)現(xiàn)了三個(gè)描述一個(gè)Bound的函數(shù):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 + ")" ); } 結(jié)果類似于"left-bottom=(5,42) right-top=(10,45)" 三個(gè)Bound數(shù)據(jù)來(lái)源函數(shù):fromString、fromArray和fromSize; 五個(gè)獲取對(duì)象屬性的函數(shù):getWidth、getHeight、getSize、getCenterPixel、getCenterLonLat; 余下還有:add:function(x,y),extend:function(object),containsLonLat,containsPixel,contains,intersectsBounds,containsBounds,determineQuadrant,wrapDateLine。以函數(shù)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;} } } } 可以看出,對(duì)Bounds的擴(kuò)展可以有三種形式:point, lonlat, 或者bounds,計(jì)算的條件是零坐標(biāo)是在屏幕的左上角。
OpenLayers. Class:這個(gè)類是OpenLayers 中的“大紅人”,只要?jiǎng)?chuàng)建其他類就得用它,同時(shí)也實(shí)現(xiàn)了多重繼承。用法如下: 單繼承創(chuàng)建:class = OpenLayers.Class(prototype); 多繼承創(chuàng)建:class = OpenLayers.Class(Class1, Class2, prototype); 凈說(shuō)底層類了,對(duì)js內(nèi)置類的擴(kuò)展下回寫(xiě)。
歡迎轉(zhuǎn)載,請(qǐng)注明出處。 |
|
來(lái)自: Java修煉館 > 《openlayer》