Geoserver

時間 2019-12-01

標籤 geoserver 简体版

原文原文鏈接

Geoserver是一個功能齊全，遵循OGC開放標準的開源WFS-T和WMS服務器。利用Geoserver能夠把數據做爲maps/images來發布(利用WMS來實現)也能夠直接發佈實際的數據(利用WFS來實現)，同時也提供了修改，刪除和新增的功能(利用WFS-T)。javascript

GeoServer, 顧名思義,是一個Server. 它是開源的，容許用戶查看和編輯地理數據。這是地理信息系統(GIS) 領域。GeoServer 是符合OGC 規範的一個全功能的WFS-T 和WMS server。html

GeoServer可以發佈的數據類型：前端

l 地圖或影象——應用WMS，java

l 實時數據——應用WFS，node

l 用戶更新、刪除和編輯的數據——應用WFS-T。mysql

查看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文件爲例。　

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和位置position３個屬性。通常狀況，它與 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類型定製了８個方法，分別是startsWith、contains、trim和camelize；還有另外４個方法：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加１，縮小減１。

OpenLayers項目分析——（八）地圖表現（續）

（八）地圖表現（續）

　　上一回說到OpenLayers.Map類，這回介紹組成Map的主體部分OpenLayers. Layer類，先從其實現細節上分析，看它是怎麼設計出來的。關於它許許多多的子類，即各類圖層，想單獨寫一篇。

　　OpenLayers. Layer提供了一個EVENT_TYPES常量，用於支持關於圖層的應用事件類型，這些事件有"loadstart", "loadend", "loadcancel", "Visibilitychanged"。

　　它「固有」的３個屬性：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元素上；

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操做。

相關標籤/搜索

postgressql+geoserver

postgis&geoserver

geoserver+geowebcache

geoserver+postgresql+postgis+pgrouting

2.postgis+geoserver

geoserver+postgresql+postgis+openlayers3

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Geoserver

相關概念的：

WMS: Web Map Service（Web地圖服務）

WFS: Web Feature Service（Web要素服務）

WFS-T: Web Map Service-Transactional. 容許用戶以可傳輸的塊編輯地理數據。

WCS：Web Coverage Service（Web覆蓋服務）

GML: Geography Markup Language. 一種用於描述地理數據的XML。

OGC——Open Geospatial Consortium——開放地理信息聯盟

查看Demo

關於geoserver開發

Geotools

WFS地址

Openlayers dom結構

OpenLayers項目分析——（一）項目介紹

OpenLayers 項目完整分析——（二）源代碼整體結構分析

OpenLayers 項目分析——（三）BaseTypes

OpenLayers 項目分析——（三）BaseTypes (續)

OpenLayers項目分析——（四）空間數據的組織與實現

OpenLayers項目分析——（五）數據解析——以GML爲例

OpenLayers項目分析——（六）數據渲染分析

OpenLayers項目分析——（七）地圖表現

OpenLayers項目分析——（八）地圖表現（續）

OpenLayers項目分析——（九）控件

OpenLayers項目分析——（十）事件機制分析

OpenLayers的Vector與Markers

下一個