Geoserver是一個功能齊全,遵循OGC開放標准的開源WFS-T和WMS服務器。利用Geoserver可以把數據作為maps/images來發布(利用WMS來實現)也可以直接發布實際的數據(利用WFS來實現),同時也提供了修改,刪除和新增的功能(利用WFS-T)。
GeoServer, 顧名思義,是一個Server. 它是開源的,允許用戶查看和編輯地理數據。這是地理信息系統(GIS) 領域。GeoServer 是符合OGC 規范的一個全功能的WFS-T 和WMS server。
GeoServer能夠發布的數據類型:
l 地圖或影象——應用WMS,
l 實時數據——應用WFS,
l 用戶更新、刪除和編輯的數據——應用WFS-T。
相關概念的:
WMS: Web Map Service(Web地圖服務)
l 利用具有地理空間位置信息的數據制作地圖。其中將地圖定義為地理數據可視的表現。這個規范定義了三個操作:
n GetCapabitities 返回服務級元數據,它是對服務信息內容和要求參數的一種描述;
n GetMap 返回一個地圖影像,其地理空間參考和大小參數是明確定義了的;
n GetFeatureInfo(可選)返回顯示在地圖上的某些特殊要素的信息
WFS: Web Feature Service(Web要素服務)
l Web 地圖服務返回的是圖層級的地圖影像,
l Web要素服務(WFS)返回的是要素級的GML編碼,並提供對要素的增加、修改、刪除等事務操作,是對Web地圖服務的進一步深入。OGC Web要素服務允許客戶端從多個Web要素服務中取得使用地理標記語言(GML)編碼的地理空間數據,定義了五個操作:
n GetCapabilites 返回Web要素服務性能描述文檔(用XML描述);
n DescribeFeatureType 返回描述可以提供服務的任何要素結構的XML文檔;
n GetFeature 一個獲取要素實例的請求提供服務;
n Transaction 為事務請求提供服務;
n LockFeature 處理在一個事務期間對一個或多個要素類型實例上鎖的請求。
WFS-T: Web Map Service-Transactional. 允許用戶以可傳輸的塊編輯地理數據。
WCS:Web Coverage Service(Web覆蓋服務)
Web 覆蓋服務(WCS)面向空間影像數據,它將包含地理位置值的地理空間數據作為“覆蓋(Coverage)”在網上相互交換。
l 網絡覆蓋服務由三種操作組成:GetCapabilities,GetCoverage和DescribeCoverageType:
n GetCapabilities 操作返回描述服務和數據集的XML文檔。
n GetCoverage操作是在GetCapabilities確定什么樣的查詢可以執行、什么樣的數據能夠獲取之后執行的,它使用通用的覆蓋格式返回地理位置的值或屬性。
n DescribeCoverageType 操作允許客戶端請求由具體的WCS服務器提供的任一覆蓋層的完全描述。
GML: Geography Markup Language. 一種用於描述地理數據的XML。
OGC——Open Geospatial Consortium——開放地理信息聯盟
總之,GeoServer 是您需要顯示地圖在網頁的那些工具的當中一個,用戶可以縮放並且移動。可以與一些客戶端聯合使用,比如:MapBuilder (for web pages), UDig, GVSig,等等。對標准的使用允許信息從GeoServer 到其它地理信息可以很容易地被結合。
如果你對GeoServer發出一個WMS請求,你就可能得到如下的一張圖:
查看Demo
在welcome界面中單擊demo page鏈接,進入頁面后單擊WFS-T鏈接就可以啟動一個名叫MapBuilder的基於Javascript的地圖地圖編輯器。啟動MapBuilder后我們可以看到一張樣圖,那就就從它開始吧!用其提供的工具對圖進行修改。自己練習。
關於geoserver開發
geoserver只能用j2ee開發
geoserver是符合ogc wms/wfs/wcs標准的地圖服務器,建設一套完整的webgis系統還需要客戶端配合,mapbuilder和openlayers是非常好的兩個選擇。對於較大的項目,空間數據庫也是必不可少的,geoserver支持商業的oracle、db2,開源的postgis、mysql。
扯得更遠一點,geoserver支持google map和google earth。
Geotools
外文官網http://geotools.codehaus.org/
Geotools是開源的Java代碼庫,在GIS中提供對地理空間數據的標准操作。簡單說,它就是一個中間件,提供的功能符合OGC規范,且與GeoAPI有密切的聯系。它支持的數據格式有Shapefile、GML、WFS、PostGIS、Oracle Spatial、ArcSDE、MySQL、GeoMedia、MapInfo等。
利用Geotools能夠實現:
l 格網覆蓋Grid coverages——柵格數據,
l 坐標系統轉換Coordinate Transformation,
l 數據渲染Renderers,
l 格式化Styling——符號化數據集等功能。
WFS地址
把下面地址中的HighwayInterchange改成自己創建的featuretype的名字,在瀏覽器中查看,WFS的URL,
http://localhost:8080/geoserver/wfs?request=getfeature&service=wfs&version=1.0.0&typename=States
下面地址的youtian改成自己的FeatureType名字,就是自己的WFS地址
http://localhost:8080/geoserver/wms/kml_reflect?layers=youtian
Openlayers dom結構
OpenLayers項目分析——(一)項目介紹
(OpenLayers JavaScript Mapping Library)
(一)項目介紹
網址:http://www.openlayers.org/
OpenLayers 是由MetaCarta公司開發的,用於WebGIS客戶端的JavaScript包,目前的最高版本是2.5 V,通過BSD License 發行。它實現訪問地理空間數據的方法都符合行業標准,比如OpenGIS的WMS和WFS規范,OpenLayers采用純面向對象的JavaScript方式開發,同時借用了Prototype框架和Rico庫的一些組件。
采用OpenLayers作為客戶端不存在瀏覽器依賴性。由於OpenLayers采用JavaScript語言實現,而應用於Web瀏覽器中的DOM(文檔對象模型)由JavaScript實現,同時,Web瀏覽器(比如IE,FF等)都支持DOM 。
OpenLayers APIs采用動態類型腳本語言JavaScript編寫,實現了類似與Ajax功能的無刷新更新頁面,能夠帶給用戶豐富的桌面體驗(它本身就有一個Ajax類,用於實現Ajax功能)。
目前,OpenLayers所能夠支持的Format有:XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。在OPenlayers.Format名稱空間下的各個類里,實現了具體讀/寫這些Format的解析器。
OpenLayers所能夠利用的地圖數據資源“豐富多彩”,在這方面提供給擁護較多的選擇,比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。當然,也可以用簡單的圖片作為源。
第一次使用OpenLayers:
先到它的官方網站http://www.openlayers.org下載他的壓縮包,解壓后可以看到其中的一些目錄和文件,拷貝目錄下的OpenLayer.js、根目錄下的lib目錄、根目錄下的img目錄到你網站的Scripts目錄下(當然,這個只是例子,您網站的目錄結構您自己說得算,只要保證OpenLayers.js,/lib,/img在同一目錄中即可)。然后,創建一個index.html作為查看地圖的頁面,導入OpenLayers.js和你將要創建的js。
我們以加載WMS和GML文件為例。
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5; //x-axis coodinate in map units
var lat = 40; //y-axis coordinate in map units
var zoom = 5; //number of zoom levels
var map, layer; //聲明變量map、layer;等同於var map = null; var layer = null;
map = new OpenLayers.Map('map');
//實例化一個地圖類OpenLayers.Map
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
//以WMS的格式實例化圖層類OpenLayers.Layer
map.addLayer(layer);
map.zoomToExtent(newOpenLayers.Bounds(-3.922119,44.335327,
4.866943,49.553833));
//在Map對象上加載Layer對象,並用map.zoomToExtent函數使地圖合適地顯示
map.addLayer(new OpenLayers.Layer.GML("GML", "gml/polygon.xml"));
//再在剛加載的WMS文件上,加載一GML文件
剩下的工作就是,加上一些控件OpenLayers.Control之類的東西,比如LayerSwitcher等。它們會在地圖瀏覽的“窗口”上增加一些工具欄或是“按鈕”,增加互動性和功能性。
當然,Openlayers中的東西遠不止這些,至於它的框架分析、APIs實現機制,會在后續文章中說出。寫這個的過程,也是一個學習的過程,其中難免有不妥之處,熱烈歡迎大家批評指正,相互交流。
OpenLayers 項目完整分析——(二)源代碼總體結構分析
(二)源代碼總體結構分析
通過前面的項目介紹,我們大概已經知道Openlayers是什么,能夠做什么,有什么意義。接下來我們分析它怎么樣,以及怎樣實現的等問題。
這個圖是從它的文檔上截取的,旨在從感官上認識一下OpenLayers的類。下面分別介紹(文檔中的類是按字母順序排列的,也按這個順序說吧):
我們看到在類的頂層“高高在上”的是OpenLayers,它為整個項目實現提供名稱空間(JavaScript語言沒有名稱空間一說,但是它確實有自己的機制實現類似的功能,后面會說明),它直接擁有一常量VERSION_NUMBER,以標識版本。
Ajax:顧名思義,用於實現Ajax功能,只是OpenLayers的開發者們把它單獨寫到一個類里了,其中用到了Prototype.js框架里的一些東西。同時,設計的時候也考慮了跨瀏覽器的問題。
BaseTypes:這里定制了OpenLayers中用到的string,number 和 function。比如,OpenLayers. String. startsWith,用於測試一個字符串是否一以另一個字符串開頭;OpenLayers. Number. limitSigDigs,用於限制整數的有效數位;OpenLayers. Function.bind,用於把某一函數綁定於對象等等。
Console:OpenLayers.Console,此名稱空間用於調試和把錯誤等輸出到“控制台”上,需要結合使用../Firebug/firebug.js。
Control:我們通常所說的控件類,它提供各種各樣的控件,比如上節中說的圖層開關LayerSwitcher,編輯工具條EditingToolbar等等。加載控件的例子:
class = new OpenLayers.Map('map', { controls: [] });
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseToolbar());
Events:用於實現OpenLayers的事件機制。具體來說,OpenLayers中的事件分為兩種,一種是瀏覽器事件,例如mouseup,mousedown之類的;另外一種是自定義的,如addLayer之類的。OpenLayers中的事件機制是非常值得我們學習的,后面將具體討論。
Feature:我們知道:Feature是geography 和attributes的集合。在OpenLayers中,特別地OpenLayers.Feature 類由一個marker 和一個lonla組成。OpenLayers. Feature.WFS與OpenLayers. Feature. Vector繼承於它。
Format:此類用於讀/寫各種格式的數據,它的子類都分別創建了各個格式的解析器。這些格式有:XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。
Geometry:怎么翻譯呢,幾何?是對地理對象的描述。它的子類有Collection、Curve、LinearRing、LineString、MultiLineString、MultiPoint、MultiPolygon、Point、Polygon、Rectangle、Surface,正是這些類的實例,構成了我們看到的地圖。需要說明的是,Surface 類暫時還沒有實現。
Handler:這個類用於處理序列事件,可被激活和取消。同時,它也有命名類似於瀏覽器事件的方法。當一個handler 被激活,處理事件的方法就會被注冊到瀏覽器監聽器listener ,以響應相應的事件;當一個handler被取消,這些方法在事件監聽器中也會相應的被取消注冊。Handler通過控件control被創建,而control通過icon表現。
Icon:在計算機屏幕上以圖標的形式呈現,有url、尺寸size和位置position3個屬性。一般情況,它與 OpenLayers.Marker結合應用,表現為一個Marker。
Layer:圖層。
Map:網頁中動態地圖。它就像容器,可向里面添加圖層Layer和控件Control。實際上,單個Map是毫無意義的,正是Layer和Control成就了它。
Marker:它的實例是OpenLayers.LonLat 和OpenLayers.Icon的集合。通俗一點兒說,Icon附上一定的經緯度就是Marker。
Popup:地圖上一個小巧的層,實現地圖“開關”功能。使用例子:
Class = new OpenLayers.Popup("chicken",
new OpenLayers.LonLat(5,40),
new OpenLayers.Size(200,200),
"example popup",
true);
map.addPopup(popup);
Renderer:渲染類。在OpenLayers中,渲染功能是作為矢量圖層的一個屬性存在的,我們稱之為渲染器,矢量圖層就是通過這個渲染器提供的方法將矢量數據顯示出來。以SVG和VML為例,繼承關系是這樣的:
至於OpenLayers. Renderer. Elements為什么要存在,以及它的渲染機制,后面會說。
Tile:設計這個類用於指明單個“瓦片”Tile,或者更小的分辨率。Tiles存儲它們自身的信息,比如url和size等。它的類繼承關系如下:
Util:“跑龍套”的類。
寫到這里,可以看到OpenLayers 的類纏繞的挺麻煩的,接下來的文章將從代碼部分分析更細部的東西。
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函數為例我們看看它的代碼:
getHeight: function(element) {
element = OpenLayers.Util.getElement(element);
return element.offsetHeight;
}
這里涉及到文檔對象模型DOM的一些東西,函數本身很簡單,最后返回元素的高度。
OpenLayers. Bounds:在這個類中,數據以四個浮點型數left, bottom, right, top 的格式存儲,它是一個像盒子一樣的范圍。它實現了三個描述一個Bound的函數:toString、toArray和toBBOX。其中,toString的代碼如下:
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 < this.left)) {
this.left = bounds.left;}
if ( (this.bottom == null) || (bounds.bottom < this.bottom) ) {
this.bottom = bounds.bottom;}
if ( (this.right == null) || (bounds.right > this.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 項目分析——(三)BaseTypes (續)
(三)BaseTypes:OpenLayers中定制JavaScript內置類
OpenLayers不僅“自己”寫了一些底層的類,像上回說的那些都是。同時也定制了一些JS的一些內置類,即對JS內置類的擴展。這個擴展主要包含3類:String,Number,Function,存在於BaseTypes.js文件中。
String:OpenLayers對string類型定制了8個方法,分別是startsWith、contains、trim和camelize;還有另外4個方法: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…]])。
OpenLayers項目分析——(四)空間數據的組織與實現
提到數據,先思考幾個問題:
GIS,核心是什么?數據?平台?服務?
空間數據的特征、表達方式?
地理數據的模型(結構)?
在OpenLayers空間數據的實現主要存在OpenLayers. Geometry類及其子類中。我們先看下面的兩個圖片,表現了這些類的繼承關系。從圖上可以清楚的看出MultiPoint、Polygon和MultiLineString 這三個類實現了多重繼承,即直接繼承於Geometry類,又繼承於Collection類(為什么要這樣實現?)。
OpenLyers對於Geometry對象的組織是這樣的,其實最基礎的就是點,然后MultiPoint由點構成,繼承自Openlayers.Geometry.Collection,而LinearRing,LineString均由Point構成,
Polygon由OpenLayers.Geometry.LinearRing構成。OpenLyers在解析數據時候,將所有的面、線包含的點全部都對象化為Openlayers.Geometry.Point。有人測試這里面存在問題:解析矢量數據慢,甚至在點數多的情況下,會使瀏覽器“崩潰”掉。想想是有道理的:OpenLyers在解析數據時候,將所有的面、線包含的點全部都對象化為點對象t,並首先將所有的對象讀取到內存,得到一個Feature的集合,然后將這個集合提交給渲染器進行渲染。這樣渲染起來當然慢了。至於為什么要這樣,可能是OpenLayers項目本身在標准上,在框架結構上做的比較好,更細部的東西還得優化呀。可話又說回來,OpenLayers作為一個優秀的開源JS框架,學習借鑒的意義要比應用的意義大吧。
下面以Point和Collection為例來說明其內部實現過程,先看Point。
我們知道一個點就是一個坐標對(x,y)嘛,當然它得有兩個屬性x,y。在point類里,提供了六個成員函數,分別是clone、distanceTo、equals、move、rotate和resize。看看計算兩點距離的函數是怎么寫的:
distanceTo: function(point) {
var distance = 0.0;
if ( (this.x != null) && (this.y != null) &&
(point != null) && (point.x != null) && (point.y != null) ) {
var dx2 = Math.pow(this.x - point.x, 2);
var dy2 = Math.pow(this.y - point.y, 2);
distance = Math.sqrt( dx2 + dy2 );
}
return distance;
}
在collection集合對象中,可以存放同一類型的地理對象,也可以放不同的地理對象。定義了一個屬性component ,以數組對象的形式存儲組成collection對象的“組件”。別的不說了,看一個獲取集合大小的函數getLength:
getLength: function() {
var length = 0.0;
for (var i = 0; i < this.components.length; i++) {
length += this.components[i].getLength();
}
return length;
}
細心的朋友也許會發現,每一個基類都有一個destroy函數。它是OpenLayers實現的垃圾回收機制,以防止內存泄露,優化性能:
destroy: function () {
this.components.length = 0;
this.components = null;
}。
OpenLayers項目分析——(五)數據解析——以GML為例
(五)OpenLayers 數據解析—以GML為例
前面也提到過,OpenLayers設計是符合標准的,有良好的框架結構和實現機制,非常值得學習。OpenLayers支持的格式比較多,有XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS等。這回主要以GML為例來看OpenLayers 數據的解析過程。
先來了解一下GML:
GML (Geography Markup Language)即地理標識語言,它由OGC(開放式地理信息系統協會)於1999年提出,目前版本是3.0。GML是XML在地理空間信息領域的應用。利用GML可以存儲和發布各種特征的地理信息,並控制地理信息在Web瀏覽器中的顯示。地理空間互聯網絡作為全球信息基礎架構的一部分,已成為Internet上技術追蹤的熱點。許多公司和相關研究機構通過Web將眾多的地理信息源集成在一起,向用戶提供各種層次的應用服務,同時支持本地數據的開發和管理。GML可以在地理空間Web領域完成了同樣的任務。GML技術的出現是地理空間數據管理方法的一次飛躍。
介紹一篇文章:GML3.0的WebGlS研究。
我們從總體上來把握一下OpenLayers對於GML數據的解析,首先通過調用得到GML文本數據,然后通過Formate.GML類的read方法來解析這個文本,解析得到Geometry對象,然后Geometry對象用相應的渲染器畫出來。其實解析得到還是那些基本的Point呀、LineString呀之類的Geometry對象,就是我們在地圖上看到的那些內容。
下面看其實現過程:
//read()函數讀取數據,獲取特征列表
read: function(data) {
if(typeof data == "string") {
data = OpenLayers.Format.XML.prototype.read.apply(this, [data]);
}
var featureNodes = this.getElementsByTagNameNS (data.documentElement,this.gmlns, this.featureName);
var features = [];
for(var i=0; i<featureNodes.length; i++) {
var feature = this.parseFeature(featureNodes[i]);
if(feature) {
features.push(feature);
}
}
return features;
}
//函數parseFeature()是OpenLayers中GML數據格式解析的核心,就是它創建地理對象
//和其屬性。
//實際上,每一個Foramt 子類都實現了這個成員函數,完成類似的功能。
parseFeature: function(node) {
// only accept on geometry per feature - look for highest "order"
var order = ["MultiPolygon", "Polygon",
"MultiLineString", "LineString",
"MultiPoint", "Point"];
var type, nodeList, geometry, parser;
for(var i=0; i<order.length; ++i) {
type = order[i];
nodeList = this.getElementsByTagNameNS(node, this.gmlns, type);
if(nodeList.length > 0) {
// only deal with first geometry of this type
var parser = this.parseGeometry[type.toLowerCase()];
if(parser) {
geometry = parser.apply(this, [nodeList[0]]);
} else {
OpenLayers.Console.error("Unsupported geometry type: " +
type);
}
// stop looking for different geometry types
break;
}
}
// construct feature (optionally with attributes)
var attributes;
if(this.extractAttributes) {
attributes = this.parseAttributes(node);
}
var feature = new OpenLayers.Feature.Vector(geometry, attributes);
// assign fid - this can come from a "fid" or "id" attribute
var childNode = node.firstChild;
var fid;
while(childNode) {
if(childNode.nodeType == 1) {
fid = childNode.getAttribute("fid") ||
childNode.getAttribute("id");
if(fid) {
break;
}
}
childNode = childNode.nextSibling;
}
feature.fid = fid;
return feature;
}
剩下就是由具體的函數parse and bulid基本的地理對象(還有Attribute),包括point、multipoint、linestring、multilinestring、polygon、multipolygon等,然后在write出來。
結合前面的“OpenLayers空間數據的組織”,我們可以看到OpenLayers在解析獲取GML數據的時候,比如涉及到面、線的時候,總是以點為基礎構建的。有的朋友做過測試,說這時候,直接用SVG畫出來,性能上會好很多(具體沒測試過,不想多說什么)。
OpenLayers項目分析——(六)數據渲染分析
(六)數據渲染分析
實際上,OpenLayers的整個表現過程是這樣的:通過調用獲取數據,然后各種格式的解析器解析數據,在用所謂的渲染器渲染后加到圖層上,最后再結合相應的控件表現出來,成為一幅我們看到的“動態”地圖。
這里主要討論OpenLayers. Renderer這個類及其子類。
Renderer類提供了一些虛方法,以供其子類繼承,像setExtent、drawFeature、drawGeometry、eraseFeatures、eraseGeometry等。
Elements繼承Renderer,具體實現渲染的類又繼承Renderer類。之所以這樣設計,是因為不同的矢量格式數據需要共享相應的函數,在Elements這個類中封裝一下。這個類的核心是drawGeometry和drawGeometryNode兩個函數。其中drawGeometry調用了drawGeometryNode,創建出基本的地理對象。
drawGeometry: function(geometry, style, featureId) {
var className = geometry.CLASS_NAME;
if ((className == "OpenLayers.Geometry.Collection") ||
(className == "OpenLayers.Geometry.MultiPoint") ||
(className == "OpenLayers.Geometry.MultiLineString") ||
(className == "OpenLayers.Geometry.MultiPolygon")) {
for (var i = 0; i < geometry.components.length; i++) {
this.drawGeometry(geometry.components[i], style, featureId);
}
return;
};
//first we create the basic node and add it to the root
var nodeType = this.getNodeType(geometry);
var node = this.nodeFactory(geometry.id, nodeType, geometry);
node._featureId = featureId;
node._geometryClass = geometry.CLASS_NAME;
node._style = style;
this.root.appendChild(node);
//now actually draw the node, and style it
this.drawGeometryNode(node, geometry);
}
渲染器的繼承關系這樣的:
具體實現渲染的方法在OpenLayers. Renderer.SVG和OpenLayers. Renderer.VML兩個類中實現的,就是實現Elements提供的虛方法,比如drawPoint、drawCircle、drawLineString、drawLinearRing、drawLine、drawPolygon、drawSurface等。以drawCircle為例看看具體的實現過程:
drawCircle: function(node, geometry, radius) {
if(!isNaN(geometry.x)&& !isNaN(geometry.y)) {
var resolution = this.getResolution();
node.style.left = (geometry.x /resolution).toFixed() - radius;
node.style.top = (geometry.y /resolution).toFixed() - radius;
var diameter = radius * 2;
node.style.width = diameter;
node.style.height = diameter;
}
}
OpenLayers項目分析——(七)地圖表現
(七)地圖表現
一開始看到OpenLayers,就有一個問題。就是它作為WebGIS的前端,通俗地說,是“顯示”地圖的。那么,它顯示的地圖是什么,是怎么顯示的,又是怎么實現的?——暫且把這個問題叫做地圖表現。我覺得最關鍵的就是Map類,把這個類分析清楚了,問題就解決了一大半了。
前面第一回里說過怎么實例化一個地圖,怎么向地圖里加圖層加控件。其實,地圖是這樣的,它就像一個容器,可以盛東西。要分析它光理解這些還不夠,我們要知道這個容器是怎么做出來的,及具體都有什么功能。
Map類有兩個常量:Z_INDEX_BASE和EVENT_TYPES,不說了,可顧名而思其意。再看它定義的一些屬性:div(The element that contains the map)、baseLayer(The currently selected base layer)、events(An events object that handles all events on the map)。是這樣,web頁的div通過以id或name的形式獲得map對象,然后layers和control在加載到map上,表現為地圖。順便說一句,控件control和事件event是相關聯的,這以后會說。
OpenLayers.Map類提供了兩種實例化方式,舉例來看:
// create a map with default options in an element with the id "map1"
var map = new OpenLayers.Map("map1");
// create a map with non-default options in an element with id "map2"
//Optional object with properties to tag onto the map.
var options = {
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'meters',
projection: "EPSG:41001"
};
var map = new OpenLayers.Map("map2", options);
OpenLayers.Map類實現的函數APIMethod是分組的,比如Layer Functions、Control Functions、Popup Functions、Container Div Functions、Zoom, Center, Pan Functions、Layer Options、Baselayer Functions、Zooming Functions、Translation Functions。其中,最關鍵的是Layer Functions和Control Functions,因為就是Layer對象和Control對象構成了map的主體。下面從每組函數中挑選出一兩個來,看看具體實現過程。
Layer Functions:
就看addLayer函數吧,下面的addLayers就是調用的它,代碼如下:
addLayer: function (layer) {
for(var i=0; i < this.layers.length; i++) {
if (this.layers[i] == layer) {
var msg = "You tried to add the layer: " + layer.name +
" to the map, but it has already been added";
OpenLayers.Console.warn(msg);
return false;
}
}
layer.div.style.overflow = "";
this.setLayerZIndex(layer, this.layers.length);
if (layer.isFixed) {
this.viewPortDiv.appendChild(layer.div);
} else {
this.layerContainerDiv.appendChild(layer.div);
}
this.layers.push(layer);
layer.setMap(this);
if (layer.isBaseLayer) {
if (this.baseLayer == null) {
// set the first baselaye we add as the baselayer
this.setBaseLayer(layer);
} else {
layer.setVisibility(false);
}
} else {
layer.redraw();
}
this.events.triggerEvent("addlayer");
}
可以看到其中涉及到layer的一些方法,下一回具體介紹OpenLayers. Layer類。
Control Functions:
addControl: function (control, px) {
this.controls.push(control);
this.addControlToMap(control, px);
}
可以看出,添加控件的過程是由controls.Push()和addControlToMap()兩個函數共同完成的。
addControlToMap: function (control, px) {
// If a control doesn't have a div at this point, it belongs in the
// viewport.
control.outsideViewport = (control.div != null);
control.setMap(this);
var div = control.draw(px);
if (div) {
if(!control.outsideViewport) {
div.style.zIndex = this.Z_INDEX_BASE['Control'] +
this.controls.length;
this.viewPortDiv.appendChild( div );
}
}
}
Popup Functions:這組函數和上兩組函數相似,是在地圖上添加或刪除Popup 對象。
Zoom, Center, Pan Functions:
//Allows user to pan by a value of screen pixels
pan: function(dx, dy) {
// getCenter
var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
// adjust
var newCenterPx = centerPx.add(dx, dy);
// only call setCenter if there has been a change
if (!newCenterPx.equals(centerPx)) {
var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
this.setCenter(newCenterLonLat);
}
}
Zooming Functions:
這里就看看放大縮小函數吧。
zoomIn: function() {
this.zoomTo(this.getZoom() + 1);
}
zoomOut: function() {
this.zoomTo(this.getZoom() - 1);
}
顯然,zoomIn和zoomOut都使用了getZoom方法,放大就是讓zoom加1,縮小減1。
OpenLayers項目分析——(八)地圖表現(續)
(八)地圖表現(續)
上一回說到OpenLayers.Map類,這回介紹組成Map的主體部分OpenLayers. Layer類,先從其實現細節上分析,看它是怎么設計出來的。關於它許許多多的子類,即各種圖層,想單獨寫一篇。
OpenLayers. Layer提供了一個EVENT_TYPES常量,用於支持關於圖層的應用事件類型,這些事件有"loadstart", "loadend", "loadcancel", "Visibilitychanged"。
它“固有”的3個屬性:id,name,div。其中,id和name是layer的身份,在對圖層進行操作的時候,就是用它們標志的。至於div,大家都制知道,DOM元素,用於存放圖層。
定義的map、event屬性,是圖層對象對map、event對象的引用;projection屬性,設置默認情況下,地圖的投影,同時也設置maxExtent, maxResolution, 和units 。
來看看構造函數:
* name - {String} The layer name
* options - {Object} Hashtable of extra options to tag onto the layer
*/
initialize: function(name, options) {
this.addOptions(options);
this.name = name;
if (this.id == null) {
this.id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
this.div = OpenLayers.Util.createDiv();
this.div.style.width = "100%";
this.div.style.height = "100%";
this.div.id = this.id;
this.events = new OpenLayers.Events(this, this.div,
this.EVENT_TYPES);
}
if (this.wrapDateLine) {
this.displayOutsideMaxExtent = true;
}
}
OpenLayers中每一個類的構造函數都是以initialize命名的。
再看看其成員函數:
destroy函數,相當於析構函數;
onMapResize,removeMap 虛函數,提供給子類繼承;
//移動函數
moveTo:function(bounds, zoomChanged, dragging) {
var display = this.visibility;
if (!this.isBaseLayer) {
display = display && this.inRange;
}
this.display(display);
}
下面一組函數是Baselayer Functions函數,就是layer是Baselayer 的話,所用的函數。
比如,initResolutions、getResolution、getExtent等。
通過這兩次的分析,可以發現,Map和Layers的關系:它們是相互引用的。實際上是這樣,OpenLayers的Map類主要包含了對每個圖層的引用,對每個控件的引用,對事件的引用,對裝載容器的引用(其實就是那些map上層的div)以及對pop的引用,而其自身又包含有大量的方法和屬性。圖層主要包含了對map的引用,對自身div容器的引用以及事件的引用,而圖層自身又包含了大量的屬性和方法。map引用了layer,而layer又引用了map,這里就直接形成了循環引用關系。
這樣的組成和關聯關系,每動一下,就會涉及到大量的對象,影響了性能
OpenLayers項目分析——(九)控件
(九)OpenLayers中的控件
OpenLayers中的控件,是通過加載到地圖上而起作用的,也算地圖表現的一部分。同時,控件需要對地圖發生作用,所以每個控件也持有對地圖(map對象)的引用。
前面說過,控件是於事件相關聯的。具體的說就是控件的實現是依賴於事件綁定的,每個OpenLayers.Control及其子類的實例都會持有一個handler的引用的。
那么,怎么來創建並添加一個控件呢?用下面的語句:
//實例化一個控件
var control1 = new OpenLayers.Control({div: myDiv});
//向地圖中添加控件
var map = new OpenLayers.Map('map', { controls: [] });
map.addControl(control1 );
對一些常用的OpenLayers控件,項目本身都封裝好了,用下面的語句添加:
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseToolbar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
先看看OpenLayers. Control基類的實現過程,再選擇幾個典型的子類分析一下。
OpenLayers. Control:
//設置控件的map屬性,即控件所引用的地圖
setMap: function(map) {
this.map = map;
if (this.handler) {
this.handler.setMap(map);
}
}
//drew方法,當控件准備顯示在地圖上是被調用。當然,這個方法只對有圖標的控件起
//作用。
draw: function (px) {
if (this.div == null) {
this.div = OpenLayers.Util.createDiv();
this.div.id = this.id;
this.div.className = this.displayClass;
}
if (px != null) {
this.position = px.clone();
}
this.moveTo(this.position);
return this.div;
}
前面說過,OpenLayers.Control及其子類的實例都是會持有一個handler的引用的,因為每個控件起作用時,鼠標事件都是不一樣的,這需要動態的綁定和接觸綁定。在OpenLayers.Control中是通過active和deactive兩個方法實現,就是動態的激活和注銷。
//激活方法
activate: function () {
if (this.active) {
return false;
}
if (this.handler) {
this.handler.activate();
}
this.active = true;
return true;
}
//注銷方法
deactivate: function () {
if (this.active) {
if (this.handler) {
this.handler.deactivate();
}
this.active = false;
return true;
}
return false;
}
再來看OpenLayers.Control的子類,即各類“特色”控件。選鷹眼控件OpenLayers. Control. OverviewMap和矢量編輯工具條控件OpenLayers. Control. EditingToolbar來說。
順便說一句,OpenLayers中的控件有些是需要圖標的,像EditingToolbar,有些是不需要的,像OpenLayers. Control. DragPan。
OpenLayers. Control. OverviewMap:
“鷹眼”實際上也是地圖導航的一種形式,在外部形態上跟圖層開關控件有點兒像。
添加鷹眼控件的語句:
map.addControl(new OpenLayers.Control.OverviewMap());
在它實現的成員函數中,draw函數是核心,繼承基類OpenLayers.Control,在地圖中顯示這個控件。
此控件關聯了一些瀏覽器事件,比如
rectMouseDown: function (evt) {
if(!OpenLayers.Event.isLeftClick(evt)) return;
this.rectDragStart = evt.xy.clone();
this.performedRectDrag = false;
OpenLayers.Event.stop(evt);
}。
OpenLayers. Control. EditingToolbar:
OpenLayers從2.3版就對矢量編輯進行了支持,就是圖上右上角幾個圖標。完成點、線、面的編輯功能。
同樣,它也是用drew方法激活:
draw: function() {
Var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
this.activateControl(this.controls[0]);
return div;
}
下面的代碼是使用此控件的具體過程:
Var map, layer;
map = new OpenLayers.Map( 'map', { controls: [] } );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
vlayer = new OpenLayers.Layer.Vector( "Editable" );
map.addLayer(vlayer);
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
OpenLayers項目分析——(十)事件機制分析
(十)OpenLayers事件機制分析
OpenLayers中的事件封裝是其一大亮點,非常值得學習。說到事件機制,在宏觀上不得不涉及控件OpenLayers.Control類、OpenLayers. Marker類、OpenLayers.Icon類等。是這樣,在外觀上控件通過Marker和Icon表現出來,而事件包含在控件之后,用他們自己的話說就是:The controls that wrap handlers define the methods that correspond to these abstract events 。順便再說一句,控件實現的核心是handler類,每個控件中都包含對handler的引用,通過active和deactive兩個方法,實現動態的激活和注銷。
OpenLayers中的事件有兩種:一種是瀏覽器事件(比如onclick,onmouseup等),另一種是自定義的事件。自定義的事件像addLayer ,addControl等,不象瀏覽器事件會綁定相應的dom節點,它是與layer、map等關聯的。
OpenLayers中支持的瀏覽器事件類型有(以常量的形式提供的):
BROWSER_EVENTS: [
"mouseover", "mouseout",
"mousedown", "mouseup", "mousemove",
"click", "dblclick",
"resize", "focus", "blur" ]
看看構造函數的的實現過程:
initialize: function (object, element, eventTypes, fallThrough) {
this.object = object;
this.element = element;
this.eventTypes = eventTypes;
this.fallThrough = fallThrough;
this.listeners = {};
// keep a bound copy of handleBrowserEvent() so that we can
// pass the same function to both Event.observe() and .stopObserving()
this.eventHandler = OpenLayers.Function.bindAsEventListener(
this.handleBrowserEvent, this
);
// if eventTypes is specified, create a listeners list for each
// custom application event.
if (this.eventTypes != null) {
for (var i = 0; i < this.eventTypes.length; i++) {
this.addEventType(this.eventTypes[i]);
}
}
// if a dom element is specified, add a listeners list
// for browser events on the element and register them
if (this.element != null) {
this.attachToElement(element);
}
}
可以這樣理解:
initialize(object, element, eventTypes, fallThrough)方法會將以數組eventTypes的每個元素為key建立哈希表listeners,表中每個鍵對應一個數組。還會給this.eventHandler賦值,它實際只是一個包裝了triggerEvent事件觸發函數的方法,所有的事件,包括瀏覽器事件和自定義事件都是通過它來中轉的。然后initialize將所有的瀏覽器事件放入listeners中,並為其綁定相應的dom節點element和this.eventHandler事件處理函數OpenLayers.Event.observe(element, eventType, this.eventHandler),節點上事件觸發的時候會把事件傳給this.eventHandler,它調用triggerEvent,從而將事件傳出來。
來看其他的成員函數:
addEventType:Add a new event type to this events object;
attachToElement:把瀏覽器事件關聯到相應的DOM元素上;
register: Register an event on the events object.
register: function (type, obj, func) {
if (func != null) {
if (obj == null) {
obj = this.object;
}
var listeners = this.listeners[type];
if (listeners != null) {
listeners.push( {obj: obj, func: func} );
}
}
}
其中,func參數是預先定義的回調函數。
unregister:注銷方法;
remove:Remove all listeners for a given event type.
triggerEvent:Trigger a specified registered event。
OpenLayers的Vector與Markers
OpenLayers在2.4版本中歷史性地添加了Vector圖層的支持。這個功能分別在不同的瀏覽器上用SVG/VML實現,其難度可以想象。Vector的出現可能大大增加開源WebGIS客戶端的功能。
不過問題也隨之而來,在使用Vector的時候,我們通常還要添加一個SelectFeature控件。這個控件的功能是使矢量的Feature可選,或是響應其他鼠標事件。問題就在於添加了SelectFeature之后,原本的Marker就不能再捕捉到事件,導致Popup之類的功能失效(包括Popup本身也不能捕捉到事件)。
魚和熊掌不能兼得,不過OpenLayers 2.4中已經給Vector圖層里增加了createMarker和createPopup兩個方法,它的注釋是“HACK - we need to decide if all vector features should be able to create markers”。料想利用這兩個方法構造的marker和應該是可以解決前面的問題。
Vector的Marker的沖突可能還是會繼續一段時間,看起來確實是一個小小的缺陷。
下一個
OpenLayers是一個開源的js框架,用於在您的瀏覽器中實現地圖瀏覽的效果和基本的zoom,pan等功能。OpenLayers支持的地圖來源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用簡單的圖片作為源,在這一方面OPenLayers提供了非常多的選擇。
要使用OpenLayers,您可以到它的官方網站http://www.openlayers.org下載他的壓縮包,解壓后可以看到其中的一些目錄和文件。拷貝dist目錄下的OpenLayer.js、根目錄下的lib目錄、根目錄下的img目錄到你網站的scripts目錄下(當然,這個只是例子,您網站的目錄結構您自己說得算,只要保證OpenLayers.js,/lib,/img在同一目錄中即可)。
接下來創建一個index.html作為查看地圖的頁面。導入OpenLayers.js和你將要創建的js。內容需要一個div,我們給它的id起名叫做area。你有必要在寫一些CSS限定#area的寬度和高度,如果樂意,加上一個border也是很不錯的選擇。
廢話不多說,我們首先要創建一個OpenLayer.Map對象的實例:
var map = new OpenLayers.Map("area");
其中的參數可以傳id,也可以傳ElementObject,當然id更加方便一些。
接下來就是向地圖中添加圖層,通常情況下使用OpenLayers.Layer的子類來完成圖層的初始化。
OpenLayers提供了一下Layers的擴展:
OpenLayers.Layer.Image
OpenLayers.Layer.HTTPRequest
OpenLayers.Layer.Grid
OpenLayers.Layer.WMS
OpenLayers.Layer.KaMap
OpenLayers.Layer.EventPane
OpenLayers.Layer.Google
OpenLayers.Layer.VirtualEarth
OpenLayers.Layer.Markers
OpenLayers.Layer.Text
OpenLayers.Layer.GeoRSS
OpenLayers.Layer.Boxes
OpenLayers.Layer.TMS
Image類封裝一個實際圖象作為圖曾內容
HTTPRequest類可以接收一個動態生成的圖片,你可以通過HTTPRequest類的參數向服務器發送參數
Grid類是HTTPRequest類的子類,提供更加詳細的方法
WMS類用於連接WMS服務器以獲得圖象
KaMap類用於連接MapServer
EventPane類作為用於接收用戶操作的圖層
Google類用於從Google獲得圖象,它仍然需要你從Google獲得API KEY,並且include
VirtualEarth類用於操作VirtualEarth的圖層
Markers類用於生成接收和顯示用戶本地標記的圖層
Text類用於接收CSV文件
GeoRSS類是Marker類的子類,用於封裝接收GeoRSS並在圖層中作出marker
Boxes同樣也是Marker類的子類,可以用div來做marker,而非image
TMS用於接收TMS服務器的地圖
創建完圖層后,可以用Map的addLayer(layer)方法插入,並執行Map的zoomToMaxExtent()方法讓地圖合適地顯示。
OpenLayers還提供了豐富的Control類為地圖瀏覽添加一些工具,繼承自OpenLayers.Control類
OpenLayers.Control.LayerSwitcher
OpenLayers.Control.MouseDefaults
OpenLayers.Control.MousePosition
OpenLayers.Control.MouseToolbar
OpenLayers.Control.OverviewMap
OpenLayers.Control.PanZoom
OpenLayers.Control.PanZoomBar
OpenLayers.Control.Permalink
OpenLayers.Control.Scale
這些類的實例會在地圖瀏覽的“窗口”上增加一些工具欄或是“按鈕”,增加互動性和功能性。
OpenLayers對常用的數據結構進行了封裝
OpenLayers.LonLat
OpenLayers.Size
OpenLayers.Pixel
OpenLayers.Bounds
以便於操作。
此外OpenLayers.Util類可以對圖片載入錯誤時圖片框的顏色和圖片框中默認的圖片進行自定義,這一點是非常方便的。OpenLayers的Ajax類對創建XHR對象的過程進行了封裝,可以使用它進行簡單的Ajax操作。