Geoserver
Geoserver是一個(gè)功能齊全，遵循OGC開放標(biāo)準(zhǔn)的開源WFS-T和WMS服務(wù)器。利用Geoserver可以把數(shù)據(jù)作為maps/images來發(fā)布(利用WMS來實(shí)現(xiàn))也可以直接發(fā)布實(shí)際的數(shù)據(jù)(利用WFS來實(shí)現(xiàn))，同時(shí)也提供了修改，刪除和新增的功能(利用WFS-T)。
GeoServer, 顧名思義,是一個(gè)Server. 它是開源的，允許用戶查看和編輯地理數(shù)據(jù)。這是地理信息系統(tǒng)(GIS) 領(lǐng)域。GeoServer 是符合OGC 規(guī)范的一個(gè)全功能的WFS-T 和WMS server。
GeoServer能夠發(fā)布的數(shù)據(jù)類型：
l 地圖或影象——應(yīng)用WMS，
l 實(shí)時(shí)數(shù)據(jù)——應(yīng)用WFS，
l 用戶更新、刪除和編輯的數(shù)據(jù)——應(yīng)用WFS-T。
相關(guān)概念的：
WMS: Web Map Service（Web地圖服務(wù)）
l 利用具有地理空間位置信息的數(shù)據(jù)制作地圖。其中將地圖定義為地理數(shù)據(jù)可視的表現(xiàn)。這個(gè)規(guī)范定義了三個(gè)操作：
n GetCapabitities 返回服務(wù)級(jí)元數(shù)據(jù)，它是對(duì)服務(wù)信息內(nèi)容和要求參數(shù)的一種描述；
n GetMap 返回一個(gè)地圖影像，其地理空間參考和大小參數(shù)是明確定義了的；
n GetFeatureInfo（可選）返回顯示在地圖上的某些特殊要素的信息
WFS: Web Feature Service（Web要素服務(wù)）
l Web 地圖服務(wù)返回的是圖層級(jí)的地圖影像，
l Web要素服務(wù)（WFS）返回的是要素級(jí)的GML編碼，并提供對(duì)要素的增加、修改、刪除等事務(wù)操作，是對(duì)Web地圖服務(wù)的進(jìn)一步深入。OGC Web要素服務(wù)允許客戶端從多個(gè)Web要素服務(wù)中取得使用地理標(biāo)記語言（GML）編碼的地理空間數(shù)據(jù)，定義了五個(gè)操作：
n GetCapabilites 返回Web要素服務(wù)性能描述文檔（用XML描述）；
n DescribeFeatureType 返回描述可以提供服務(wù)的任何要素結(jié)構(gòu)的XML文檔；
n GetFeature 一個(gè)獲取要素實(shí)例的請(qǐng)求提供服務(wù)；
n Transaction 為事務(wù)請(qǐng)求提供服務(wù)；
n LockFeature 處理在一個(gè)事務(wù)期間對(duì)一個(gè)或多個(gè)要素類型實(shí)例上鎖的請(qǐng)求。
WFS-T: Web Map Service-Transactional. 允許用戶以可傳輸?shù)膲K編輯地理數(shù)據(jù)。
WCS：Web Coverage Service（Web覆蓋服務(wù)）
Web 覆蓋服務(wù)（WCS）面向空間影像數(shù)據(jù)，它將包含地理位置值的地理空間數(shù)據(jù)作為“覆蓋（Coverage）”在網(wǎng)上相互交換。
l 網(wǎng)絡(luò)覆蓋服務(wù)由三種操作組成：GetCapabilities，GetCoverage和DescribeCoverageType：
n GetCapabilities 操作返回描述服務(wù)和數(shù)據(jù)集的XML文檔。
n GetCoverage操作是在GetCapabilities確定什么樣的查詢可以執(zhí)行、什么樣的數(shù)據(jù)能夠獲取之后執(zhí)行的，它使用通用的覆蓋格式返回地理位置的值或?qū)傩浴?/p>
n DescribeCoverageType 操作允許客戶端請(qǐng)求由具體的WCS服務(wù)器提供的任一覆蓋層的完全描述。
GML: Geography Markup Language. 一種用于描述地理數(shù)據(jù)的XML。
OGC——Open Geospatial Consortium——開放地理信息聯(lián)盟
總之，GeoServer 是您需要顯示地圖在網(wǎng)頁(yè)的那些工具的當(dāng)中一個(gè)，用戶可以縮放并且移動(dòng)。可以與一些客戶端聯(lián)合使用，比如：MapBuilder (for web pages), UDig, GVSig,等等。對(duì)標(biāo)準(zhǔn)的使用允許信息從GeoServer 到其它地理信息可以很容易地被結(jié)合。
如果你對(duì)GeoServer發(fā)出一個(gè)WMS請(qǐng)求，你就可能得到如下的一張圖：
查看Demo
在welcome界面中單擊demo page鏈接，進(jìn)入頁(yè)面后單擊WFS-T鏈接就可以啟動(dòng)一個(gè)名叫MapBuilder的基于Javascript的地圖地圖編輯器。啟動(dòng)MapBuilder后我們可以看到一張樣圖，那就就從它開始吧！用其提供的工具對(duì)圖進(jìn)行修改。自己練習(xí)。
關(guān)于geoserver開發(fā)
geoserver只能用j2ee開發(fā)
geoserver是符合ogc wms/wfs/wcs標(biāo)準(zhǔn)的地圖服務(wù)器，建設(shè)一套完整的webgis系統(tǒng)還需要客戶端配合，mapbuilder和openlayers是非常好的兩個(gè)選擇。對(duì)于較大的項(xiàng)目，空間數(shù)據(jù)庫(kù)也是必不可少的，geoserver支持商業(yè)的oracle、db2，開源的postgis、mysql。
扯得更遠(yuǎn)一點(diǎn)，geoserver支持google map和google earth。
Geotools
外文官網(wǎng)http://geotools.codehaus.org/
Geotools是開源的Java代碼庫(kù)，在GIS中提供對(duì)地理空間數(shù)據(jù)的標(biāo)準(zhǔn)操作。簡(jiǎn)單說，它就是一個(gè)中間件，提供的功能符合OGC規(guī)范，且與GeoAPI有密切的聯(lián)系。它支持的數(shù)據(jù)格式有Shapefile、GML、WFS、PostGIS、Oracle Spatial、ArcSDE、MySQL、GeoMedia、MapInfo等。
利用Geotools能夠?qū)崿F(xiàn)：
l 格網(wǎng)覆蓋Grid coverages——柵格數(shù)據(jù)，
l 坐標(biāo)系統(tǒng)轉(zhuǎn)換Coordinate Transformation，
l 數(shù)據(jù)渲染Renderers，
l 格式化Styling——符號(hào)化數(shù)據(jù)集等功能。
WFS地址
把下面地址中的HighwayInterchange改成自己創(chuàng)建的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結(jié)構(gòu)
OpenLayers項(xiàng)目分析——（一）項(xiàng)目介紹
(OpenLayers JavaScript Mapping Library)
（一）項(xiàng)目介紹
網(wǎng)址：http://www.openlayers.org/
OpenLayers 是由MetaCarta公司開發(fā)的，用于WebGIS客戶端的JavaScript包，目前的最高版本是2.5 V，通過BSD License 發(fā)行。它實(shí)現(xiàn)訪問地理空間數(shù)據(jù)的方法都符合行業(yè)標(biāo)準(zhǔn)，比如OpenGIS的WMS和WFS規(guī)范，OpenLayers采用純面向?qū)ο蟮腏avaScript方式開發(fā)，同時(shí)借用了Prototype框架和Rico庫(kù)的一些組件。
采用OpenLayers作為客戶端不存在瀏覽器依賴性。由于OpenLayers采用JavaScript語言實(shí)現(xiàn)，而應(yīng)用于Web瀏覽器中的DOM（文檔對(duì)象模型）由JavaScript實(shí)現(xiàn)，同時(shí)，Web瀏覽器（比如IE，FF等）都支持DOM 。
OpenLayers APIs采用動(dòng)態(tài)類型腳本語言JavaScript編寫，實(shí)現(xiàn)了類似與Ajax功能的無刷新更新頁(yè)面，能夠帶給用戶豐富的桌面體驗(yàn)（它本身就有一個(gè)Ajax類，用于實(shí)現(xiàn)Ajax功能）。
目前，OpenLayers所能夠支持的Format有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。在OPenlayers.Format名稱空間下的各個(gè)類里，實(shí)現(xiàn)了具體讀／寫這些Format的解析器。
OpenLayers所能夠利用的地圖數(shù)據(jù)資源“豐富多彩”，在這方面提供給擁護(hù)較多的選擇，比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。當(dāng)然，也可以用簡(jiǎn)單的圖片作為源。
第一次使用OpenLayers：
先到它的官方網(wǎng)站http://www.openlayers.org下載他的壓縮包，解壓后可以看到其中的一些目錄和文件，拷貝目錄下的OpenLayer.js、根目錄下的lib目錄、根目錄下的img目錄到你網(wǎng)站的Scripts目錄下（當(dāng)然，這個(gè)只是例子，您網(wǎng)站的目錄結(jié)構(gòu)您自己說得算，只要保證OpenLayers.js，/lib，/img在同一目錄中即可）。然后，創(chuàng)建一個(gè)index.html作為查看地圖的頁(yè)面，導(dǎo)入OpenLayers.js和你將要?jiǎng)?chuàng)建的js。
我們以加載WMS和GML文件為例?！?/p>
<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');
//實(shí)例化一個(gè)地圖類OpenLayers.Map
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
//以WMS的格式實(shí)例化圖層類OpenLayers.Layer
map.addLayer(layer);
map.zoomToExtent(newOpenLayers.Bounds(-3.922119,44.335327,
4.866943,49.553833));
//在Map對(duì)象上加載Layer對(duì)象，并用map.zoomToExtent函數(shù)使地圖合適地顯示
map.addLayer(new OpenLayers.Layer.GML("GML", "gml/polygon.xml"));
//再在剛加載的WMS文件上，加載一GML文件
剩下的工作就是，加上一些控件OpenLayers.Control之類的東西，比如LayerSwitcher等。它們會(huì)在地圖瀏覽的“窗口”上增加一些工具欄或是“按鈕”，增加互動(dòng)性和功能性。
當(dāng)然，Openlayers中的東西遠(yuǎn)不止這些，至于它的框架分析、APIs實(shí)現(xiàn)機(jī)制，會(huì)在后續(xù)文章中說出。寫這個(gè)的過程，也是一個(gè)學(xué)習(xí)的過程，其中難免有不妥之處，熱烈歡迎大家批評(píng)指正，相互交流。
OpenLayers 項(xiàng)目完整分析——（二）源代碼總體結(jié)構(gòu)分析
（二）源代碼總體結(jié)構(gòu)分析
通過前面的項(xiàng)目介紹，我們大概已經(jīng)知道Openlayers是什么，能夠做什么，有什么意義。接下來我們分析它怎么樣，以及怎樣實(shí)現(xiàn)的等問題。
這個(gè)圖是從它的文檔上截取的，旨在從感官上認(rèn)識(shí)一下OpenLayers的類。下面分別介紹（文檔中的類是按字母順序排列的，也按這個(gè)順序說吧）：
?
我們看到在類的頂層“高高在上”的是OpenLayers，它為整個(gè)項(xiàng)目實(shí)現(xiàn)提供名稱空間（JavaScript語言沒有名稱空間一說，但是它確實(shí)有自己的機(jī)制實(shí)現(xiàn)類似的功能，后面會(huì)說明），它直接擁有一常量VERSION_NUMBER，以標(biāo)識(shí)版本。
?
Ajax：顧名思義，用于實(shí)現(xiàn)Ajax功能，只是OpenLayers的開發(fā)者們把它單獨(dú)寫到一個(gè)類里了，其中用到了Prototype.js框架里的一些東西。同時(shí)，設(shè)計(jì)的時(shí)候也考慮了跨瀏覽器的問題。
?
BaseTypes：這里定制了OpenLayers中用到的string，number 和 function。比如，OpenLayers. String. startsWith，用于測(cè)試一個(gè)字符串是否一以另一個(gè)字符串開頭；OpenLayers. Number. limitSigDigs，用于限制整數(shù)的有效數(shù)位；OpenLayers. Function.bind，用于把某一函數(shù)綁定于對(duì)象等等。
?
Console：OpenLayers.Console，此名稱空間用于調(diào)試和把錯(cuò)誤等輸出到“控制臺(tái)”上，需要結(jié)合使用../Firebug/firebug.js。
?
Control：我們通常所說的控件類，它提供各種各樣的控件，比如上節(jié)中說的圖層開關(guān)LayerSwitcher，編輯工具條EditingToolbar等等。加載控件的例子：
?
class = new OpenLayers.Map('map', { controls: [] });
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseToolbar());
?
Events：用于實(shí)現(xiàn)OpenLayers的事件機(jī)制。具體來說，OpenLayers中的事件分為兩種，一種是瀏覽器事件，例如mouseup,mousedown之類的；另外一種是自定義的，如addLayer之類的。OpenLayers中的事件機(jī)制是非常值得我們學(xué)習(xí)的，后面將具體討論。
?
Feature：我們知道：Feature是geography 和attributes的集合。在OpenLayers中，特別地OpenLayers.Feature 類由一個(gè)marker 和一個(gè)lonla組成。OpenLayers. Feature.WFS與OpenLayers. Feature. Vector繼承于它。
?
Format：此類用于讀／寫各種格式的數(shù)據(jù)，它的子類都分別創(chuàng)建了各個(gè)格式的解析器。這些格式有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。
?
Geometry：怎么翻譯呢，幾何？是對(duì)地理對(duì)象的描述。它的子類有Collection、Curve、LinearRing、LineString、MultiLineString、MultiPoint、MultiPolygon、Point、Polygon、Rectangle、Surface，正是這些類的實(shí)例，構(gòu)成了我們看到的地圖。需要說明的是，Surface 類暫時(shí)還沒有實(shí)現(xiàn)。
?
Handler：這個(gè)類用于處理序列事件，可被激活和取消。同時(shí)，它也有命名類似于瀏覽器事件的方法。當(dāng)一個(gè)handler 被激活，處理事件的方法就會(huì)被注冊(cè)到瀏覽器監(jiān)聽器listener ，以響應(yīng)相應(yīng)的事件；當(dāng)一個(gè)handler被取消，這些方法在事件監(jiān)聽器中也會(huì)相應(yīng)的被取消注冊(cè)。Handler通過控件control被創(chuàng)建，而control通過icon表現(xiàn)。
?
Icon：在計(jì)算機(jī)屏幕上以圖標(biāo)的形式呈現(xiàn)，有url、尺寸size和位置position３個(gè)屬性。一般情況，它與 OpenLayers.Marker結(jié)合應(yīng)用，表現(xiàn)為一個(gè)Marker。
?
Layer：圖層。
?
Map：網(wǎng)頁(yè)中動(dòng)態(tài)地圖。它就像容器，可向里面添加圖層Layer和控件Control。實(shí)際上，單個(gè)Map是毫無意義的，正是Layer和Control成就了它。
?
Marker：它的實(shí)例是OpenLayers.LonLat 和OpenLayers.Icon的集合。通俗一點(diǎn)兒說，Icon附上一定的經(jīng)緯度就是Marker。
Popup：地圖上一個(gè)小巧的層，實(shí)現(xiàn)地圖“開關(guān)”功能。使用例子：
?
Class = new OpenLayers.Popup("chicken",
new OpenLayers.LonLat(5,40),
new OpenLayers.Size(200,200),
"example popup",
true);
map.addPopup(popup);
?
Renderer：渲染類。在OpenLayers中，渲染功能是作為矢量圖層的一個(gè)屬性存在的，我們稱之為渲染器，矢量圖層就是通過這個(gè)渲染器提供的方法將矢量數(shù)據(jù)顯示出來。以SVG和VML為例，繼承關(guān)系是這樣的：
至于OpenLayers. Renderer. Elements為什么要存在，以及它的渲染機(jī)制，后面會(huì)說。
?
Tile：設(shè)計(jì)這個(gè)類用于指明單個(gè)“瓦片”Tile，或者更小的分辨率。Tiles存儲(chǔ)它們自身的信息，比如url和size等。它的類繼承關(guān)系如下：
Util：“跑龍?zhí)住钡念悺?/p>
?
寫到這里，可以看到OpenLayers 的類纏繞的挺麻煩的，接下來的文章將從代碼部分分析更細(xì)部的東西。
OpenLayers 項(xiàng)目分析——（三）BaseTypes
（三）BaseTypes ：定義底層類與定制JS內(nèi)置類
先說基類型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 ）。這里說明一下，怎么經(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)不多說了。
OpenLayers. Element：在這個(gè)名稱空間下，開發(fā)者寫了好多API，有visible、toggle、hide、show、remove、getHeight、getDimensions和getStyle，以實(shí)現(xiàn)元素的顯示、隱藏、刪除、取得高度，取得范圍等功能。以getHeight函數(shù)為例我們看看它的代碼：
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的代碼如下：
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ù)來源函數(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 < 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;}
}
}
}
可以看出，對(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);
凈說底層類了，對(duì)js內(nèi)置類的擴(kuò)展下回寫。
OpenLayers 項(xiàng)目分析——（三）BaseTypes (續(xù))
（三）BaseTypes：OpenLayers中定制JavaScript內(nèi)置類
OpenLayers不僅“自己”寫了一些底層的類，像上回說的那些都是。同時(shí)也定制了一些JS的一些內(nèi)置類，即對(duì)JS內(nèi)置類的擴(kuò)展。這個(gè)擴(kuò)展主要包含3類：String，Number，Function，存在于BaseTypes.js文件中。
String：OpenLayers對(duì)string類型定制了８個(gè)方法，分別是startsWith、contains、trim和camelize；還有另外４個(gè)方法：String. startsWith、String. contains、String.trim和String. Camelize，它們將會(huì)在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：
項(xiàng)目?jī)H對(duì)number類型擴(kuò)展了一個(gè)方法OpenLayers. Number. limitSigDigs（還有一個(gè)方法Number. limitSigDigs，同樣在3.0中會(huì)刪除）。
//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：
擴(kuò)展了兩個(gè)方法bind 和bindAsEventListener（同樣存在Function.bind和Function. bindAsEventListener兩個(gè)被“遺棄”的函數(shù)）。
//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);
};
}
這里說說這兩個(gè)方法。
首先看看bind方法，這是一個(gè)能夠被Function的實(shí)例得到的方法，如下所示：
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實(shí)例自身，bind可接收多個(gè)參數(shù)，不過它綁定是是第一個(gè)參數(shù)，該參數(shù)是一個(gè)function或者是調(diào)用環(huán)境，后面的都是執(zhí)行函數(shù)的參數(shù)。
Function.prototype.bindAsEventListener = function(object) {
var _method = this;
return function(event) {
return _method.call(object, event || window.event);
}
};
這里只是將object作為_method 引用的環(huán)境，就是說現(xiàn)在可以在object對(duì)象中這樣使用,
object. _method （event||window.event）。
也許你注意到了Funtion擴(kuò)展的兩個(gè)方法一個(gè)用到了call而另一個(gè)用的是apply，其實(shí)這兩個(gè)并沒有什么太大的區(qū)別，只是參數(shù)傳遞的形式不同，如若沒有參數(shù)要傳遞，那么這兩個(gè)是一樣的：
apply(obj[,argumentsArray]),call(obj[,arg1[,arg2…]])。
OpenLayers項(xiàng)目分析——（四）空間數(shù)據(jù)的組織與實(shí)現(xiàn)
提到數(shù)據(jù)，先思考幾個(gè)問題：
GIS，核心是什么？數(shù)據(jù)？平臺(tái)？服務(wù)？
空間數(shù)據(jù)的特征、表達(dá)方式？
地理數(shù)據(jù)的模型（結(jié)構(gòu)）？
在OpenLayers空間數(shù)據(jù)的實(shí)現(xiàn)主要存在OpenLayers. Geometry類及其子類中。我們先看下面的兩個(gè)圖片，表現(xiàn)了這些類的繼承關(guān)系。從圖上可以清楚的看出MultiPoint、Polygon和MultiLineString 這三個(gè)類實(shí)現(xiàn)了多重繼承，即直接繼承于Geometry類，又繼承于Collection類（為什么要這樣實(shí)現(xiàn)？）。
OpenLyers對(duì)于Geometry對(duì)象的組織是這樣的，其實(shí)最基礎(chǔ)的就是點(diǎn)，然后MultiPoint由點(diǎn)構(gòu)成，繼承自O(shè)penlayers.Geometry.Collection,而LinearRing,LineString均由Point構(gòu)成，
Polygon由OpenLayers.Geometry.LinearRing構(gòu)成。OpenLyers在解析數(shù)據(jù)時(shí)候，將所有的面、線包含的點(diǎn)全部都對(duì)象化為Openlayers.Geometry.Point。有人測(cè)試這里面存在問題：解析矢量數(shù)據(jù)慢，甚至在點(diǎn)數(shù)多的情況下，會(huì)使瀏覽器“崩潰”掉。想想是有道理的：OpenLyers在解析數(shù)據(jù)時(shí)候，將所有的面、線包含的點(diǎn)全部都對(duì)象化為點(diǎn)對(duì)象t，并首先將所有的對(duì)象讀取到內(nèi)存，得到一個(gè)Feature的集合，然后將這個(gè)集合提交給渲染器進(jìn)行渲染。這樣渲染起來當(dāng)然慢了。至于為什么要這樣，可能是OpenLayers項(xiàng)目本身在標(biāo)準(zhǔn)上，在框架結(jié)構(gòu)上做的比較好，更細(xì)部的東西還得優(yōu)化呀。可話又說回來，OpenLayers作為一個(gè)優(yōu)秀的開源JS框架，學(xué)習(xí)借鑒的意義要比應(yīng)用的意義大吧?！?/p>
下面以Point和Collection為例來說明其內(nèi)部實(shí)現(xiàn)過程，先看Point。
我們知道一個(gè)點(diǎn)就是一個(gè)坐標(biāo)對(duì)(x,y)嘛，當(dāng)然它得有兩個(gè)屬性x，y。在point類里，提供了六個(gè)成員函數(shù)，分別是clone、distanceTo、equals、move、rotate和resize?？纯从?jì)算兩點(diǎn)距離的函數(shù)是怎么寫的：
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集合對(duì)象中，可以存放同一類型的地理對(duì)象，也可以放不同的地理對(duì)象。定義了一個(gè)屬性component ，以數(shù)組對(duì)象的形式存儲(chǔ)組成collection對(duì)象的“組件”。別的不說了，看一個(gè)獲取集合大小的函數(shù)getLength：
getLength: function() {
var length = 0.0;
for (var i = 0; i < this.components.length; i++) {
length += this.components[i].getLength();
}
return length;
}
細(xì)心的朋友也許會(huì)發(fā)現(xiàn)，每一個(gè)基類都有一個(gè)destroy函數(shù)。它是OpenLayers實(shí)現(xiàn)的垃圾回收機(jī)制，以防止內(nèi)存泄露，優(yōu)化性能：
destroy: function () {
this.components.length = 0;
this.components = null;
}。
OpenLayers項(xiàng)目分析——（五）數(shù)據(jù)解析——以GML為例
（五）OpenLayers 數(shù)據(jù)解析—以GML為例
前面也提到過，OpenLayers設(shè)計(jì)是符合標(biāo)準(zhǔn)的，有良好的框架結(jié)構(gòu)和實(shí)現(xiàn)機(jī)制，非常值得學(xué)習(xí)。OpenLayers支持的格式比較多，有XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS等。這回主要以GML為例來看OpenLayers 數(shù)據(jù)的解析過程。
先來了解一下GML：
GML (Geography Markup Language)即地理標(biāo)識(shí)語言，它由OGC（開放式地理信息系統(tǒng)協(xié)會(huì)）于1999年提出，目前版本是3.0。GML是XML在地理空間信息領(lǐng)域的應(yīng)用。利用GML可以存儲(chǔ)和發(fā)布各種特征的地理信息，并控制地理信息在Web瀏覽器中的顯示。地理空間互聯(lián)網(wǎng)絡(luò)作為全球信息基礎(chǔ)架構(gòu)的一部分，已成為Internet上技術(shù)追蹤的熱點(diǎn)。許多公司和相關(guān)研究機(jī)構(gòu)通過Web將眾多的地理信息源集成在一起，向用戶提供各種層次的應(yīng)用服務(wù)，同時(shí)支持本地?cái)?shù)據(jù)的開發(fā)和管理。GML可以在地理空間Web領(lǐng)域完成了同樣的任務(wù)。GML技術(shù)的出現(xiàn)是地理空間數(shù)據(jù)管理方法的一次飛躍。
介紹一篇文章：GML3．0的WebGlS研究。
我們從總體上來把握一下OpenLayers對(duì)于GML數(shù)據(jù)的解析，首先通過調(diào)用得到GML文本數(shù)據(jù)，然后通過Formate.GML類的read方法來解析這個(gè)文本，解析得到Geometry對(duì)象，然后Geometry對(duì)象用相應(yīng)的渲染器畫出來。其實(shí)解析得到還是那些基本的Point呀、LineString呀之類的Geometry對(duì)象，就是我們?cè)诘貓D上看到的那些內(nèi)容。
下面看其實(shí)現(xiàn)過程：
//read()函數(shù)讀取數(shù)據(jù)，獲取特征列表
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;
}
//函數(shù)parseFeature()是OpenLayers中GML數(shù)據(jù)格式解析的核心，就是它創(chuàng)建地理對(duì)象
//和其屬性。
//實(shí)際上，每一個(gè)Foramt 子類都實(shí)現(xiàn)了這個(gè)成員函數(shù)，完成類似的功能。
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;
}
剩下就是由具體的函數(shù)parse and bulid基本的地理對(duì)象（還有Attribute），包括point、multipoint、linestring、multilinestring、polygon、multipolygon等，然后在write出來。
結(jié)合前面的“OpenLayers空間數(shù)據(jù)的組織”，我們可以看到OpenLayers在解析獲取GML數(shù)據(jù)的時(shí)候，比如涉及到面、線的時(shí)候，總是以點(diǎn)為基礎(chǔ)構(gòu)建的。有的朋友做過測(cè)試，說這時(shí)候，直接用SVG畫出來，性能上會(huì)好很多（具體沒測(cè)試過，不想多說什么）。
OpenLayers項(xiàng)目分析——（六）數(shù)據(jù)渲染分析
（六）數(shù)據(jù)渲染分析
實(shí)際上，OpenLayers的整個(gè)表現(xiàn)過程是這樣的：通過調(diào)用獲取數(shù)據(jù)，然后各種格式的解析器解析數(shù)據(jù)，在用所謂的渲染器渲染后加到圖層上，最后再結(jié)合相應(yīng)的控件表現(xiàn)出來，成為一幅我們看到的“動(dòng)態(tài)”地圖。
這里主要討論OpenLayers. Renderer這個(gè)類及其子類。
Renderer類提供了一些虛方法，以供其子類繼承，像setExtent、drawFeature、drawGeometry、eraseFeatures、eraseGeometry等。
Elements繼承Renderer，具體實(shí)現(xiàn)渲染的類又繼承Renderer類。之所以這樣設(shè)計(jì)，是因?yàn)椴煌氖噶扛袷綌?shù)據(jù)需要共享相應(yīng)的函數(shù)，在Elements這個(gè)類中封裝一下。這個(gè)類的核心是drawGeometry和drawGeometryNode兩個(gè)函數(shù)。其中drawGeometry調(diào)用了drawGeometryNode，創(chuàng)建出基本的地理對(duì)象。
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);
}
渲染器的繼承關(guān)系這樣的：
具體實(shí)現(xiàn)渲染的方法在OpenLayers. Renderer.SVG和OpenLayers. Renderer.VML兩個(gè)類中實(shí)現(xiàn)的，就是實(shí)現(xiàn)Elements提供的虛方法，比如drawPoint、drawCircle、drawLineString、drawLinearRing、drawLine、drawPolygon、drawSurface等。以drawCircle為例看看具體的實(shí)現(xiàn)過程：
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項(xiàng)目分析——（七）地圖表現(xiàn)
（七）地圖表現(xiàn)
一開始看到OpenLayers，就有一個(gè)問題。就是它作為WebGIS的前端，通俗地說，是“顯示”地圖的。那么，它顯示的地圖是什么，是怎么顯示的，又是怎么實(shí)現(xiàn)的？——暫且把這個(gè)問題叫做地圖表現(xiàn)。我覺得最關(guān)鍵的就是Map類，把這個(gè)類分析清楚了，問題就解決了一大半了。
前面第一回里說過怎么實(shí)例化一個(gè)地圖，怎么向地圖里加圖層加控件。其實(shí)，地圖是這樣的，它就像一個(gè)容器，可以盛東西。要分析它光理解這些還不夠，我們要知道這個(gè)容器是怎么做出來的，及具體都有什么功能。
Map類有兩個(gè)常量：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頁(yè)的div通過以id或name的形式獲得map對(duì)象，然后layers和control在加載到map上，表現(xiàn)為地圖。順便說一句，控件control和事件event是相關(guān)聯(lián)的，這以后會(huì)說。
OpenLayers.Map類提供了兩種實(shí)例化方式，舉例來看：
// 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類實(shí)現(xiàn)的函數(shù)APIMethod是分組的，比如Layer Functions、Control Functions、Popup Functions、Container Div Functions、Zoom, Center, Pan Functions、Layer Options、Baselayer Functions、Zooming Functions、Translation Functions。其中，最關(guān)鍵的是Layer Functions和Control Functions，因?yàn)榫褪荓ayer對(duì)象和Control對(duì)象構(gòu)成了map的主體。下面從每組函數(shù)中挑選出一兩個(gè)來，看看具體實(shí)現(xiàn)過程。
Layer Functions：
就看addLayer函數(shù)吧，下面的addLayers就是調(diào)用的它，代碼如下：
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()兩個(gè)函數(shù)共同完成的。
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：這組函數(shù)和上兩組函數(shù)相似，是在地圖上添加或刪除Popup 對(duì)象。
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:
這里就看看放大縮小函數(shù)吧。
zoomIn: function() {
this.zoomTo(this.getZoom() + 1);
}
zoomOut: function() {
this.zoomTo(this.getZoom() - 1);
}
顯然，zoomIn和zoomOut都使用了getZoom方法，放大就是讓zoom加１，縮小減１。
OpenLayers項(xiàng)目分析——（八）地圖表現(xiàn)（續(xù)）
（八）地圖表現(xiàn)（續(xù)）
上一回說到OpenLayers.Map類，這回介紹組成Map的主體部分OpenLayers. Layer類，先從其實(shí)現(xiàn)細(xì)節(jié)上分析，看它是怎么設(shè)計(jì)出來的。關(guān)于它許許多多的子類，即各種圖層，想單獨(dú)寫一篇。
OpenLayers. Layer提供了一個(gè)EVENT_TYPES常量，用于支持關(guān)于圖層的應(yīng)用事件類型，這些事件有"loadstart", "loadend", "loadcancel", "Visibilitychanged"。
它“固有”的３個(gè)屬性：id,name,div。其中，id和name是layer的身份，在對(duì)圖層進(jìn)行操作的時(shí)候，就是用它們標(biāo)志的。至于div，大家都制知道，DOM元素，用于存放圖層。
定義的map、event屬性，是圖層對(duì)象對(duì)map、event對(duì)象的引用；projection屬性，設(shè)置默認(rèn)情況下，地圖的投影，同時(shí)也設(shè)置maxExtent, maxResolution, 和units 。
來看看構(gòu)造函數(shù)：
* 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中每一個(gè)類的構(gòu)造函數(shù)都是以initialize命名的。
再看看其成員函數(shù)：
destroy函數(shù)，相當(dāng)于析構(gòu)函數(shù)；
onMapResize，removeMap 虛函數(shù)，提供給子類繼承；
//移動(dòng)函數(shù)
moveTo:function(bounds, zoomChanged, dragging) {
var display = this.visibility;
if (!this.isBaseLayer) {
display = display && this.inRange;
}
this.display(display);
}
下面一組函數(shù)是Baselayer Functions函數(shù)，就是layer是Baselayer 的話，所用的函數(shù)。
比如，initResolutions、getResolution、getExtent等。
通過這兩次的分析，可以發(fā)現(xiàn)，Map和Layers的關(guān)系：它們是相互引用的。實(shí)際上是這樣，OpenLayers的Map類主要包含了對(duì)每個(gè)圖層的引用，對(duì)每個(gè)控件的引用，對(duì)事件的引用，對(duì)裝載容器的引用（其實(shí)就是那些map上層的div）以及對(duì)pop的引用，而其自身又包含有大量的方法和屬性。圖層主要包含了對(duì)map的引用，對(duì)自身div容器的引用以及事件的引用，而圖層自身又包含了大量的屬性和方法。map引用了layer，而layer又引用了map，這里就直接形成了循環(huán)引用關(guān)系。
這樣的組成和關(guān)聯(lián)關(guān)系，每動(dòng)一下，就會(huì)涉及到大量的對(duì)象，影響了性能
OpenLayers項(xiàng)目分析——（九）控件
（九）OpenLayers中的控件
OpenLayers中的控件，是通過加載到地圖上而起作用的，也算地圖表現(xiàn)的一部分。同時(shí)，控件需要對(duì)地圖發(fā)生作用，所以每個(gè)控件也持有對(duì)地圖（map對(duì)象）的引用。
前面說過，控件是于事件相關(guān)聯(lián)的。具體的說就是控件的實(shí)現(xiàn)是依賴于事件綁定的，每個(gè)OpenLayers.Control及其子類的實(shí)例都會(huì)持有一個(gè)handler的引用的。
那么，怎么來創(chuàng)建并添加一個(gè)控件呢？用下面的語句：
//實(shí)例化一個(gè)控件
var control1 = new OpenLayers.Control({div: myDiv});
//向地圖中添加控件
var map = new OpenLayers.Map('map', { controls: [] });
map.addControl(control1 );
對(duì)一些常用的OpenLayers控件，項(xiàng)目本身都封裝好了，用下面的語句添加：
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基類的實(shí)現(xiàn)過程，再選擇幾個(gè)典型的子類分析一下。
OpenLayers. Control：
//設(shè)置控件的map屬性，即控件所引用的地圖
setMap: function(map) {
this.map = map;
if (this.handler) {
this.handler.setMap(map);
}
}
//drew方法，當(dāng)控件準(zhǔn)備顯示在地圖上是被調(diào)用。當(dāng)然，這個(gè)方法只對(duì)有圖標(biāo)的控件起
//作用。
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及其子類的實(shí)例都是會(huì)持有一個(gè)handler的引用的，因?yàn)槊總€(gè)控件起作用時(shí)，鼠標(biāo)事件都是不一樣的，這需要?jiǎng)討B(tài)的綁定和接觸綁定。在OpenLayers.Control中是通過active和deactive兩個(gè)方法實(shí)現(xiàn)，就是動(dòng)態(tài)的激活和注銷。
//激活方法
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中的控件有些是需要圖標(biāo)的，像EditingToolbar，有些是不需要的，像OpenLayers. Control. DragPan。
OpenLayers. Control. OverviewMap：
“鷹眼”實(shí)際上也是地圖導(dǎo)航的一種形式，在外部形態(tài)上跟圖層開關(guān)控件有點(diǎn)兒像。
添加鷹眼控件的語句：
map.addControl(new OpenLayers.Control.OverviewMap());
在它實(shí)現(xiàn)的成員函數(shù)中，draw函數(shù)是核心，繼承基類OpenLayers.Control，在地圖中顯示這個(gè)控件。
此控件關(guān)聯(lián)了一些瀏覽器事件，比如
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版就對(duì)矢量編輯進(jìn)行了支持，就是圖上右上角幾個(gè)圖標(biāo)。完成點(diǎn)、線、面的編輯功能。
同樣，它也是用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項(xiàng)目分析——（十）事件機(jī)制分析
（十）OpenLayers事件機(jī)制分析
OpenLayers中的事件封裝是其一大亮點(diǎn)，非常值得學(xué)習(xí)。說到事件機(jī)制，在宏觀上不得不涉及控件OpenLayers.Control類、OpenLayers. Marker類、OpenLayers.Icon類等。是這樣，在外觀上控件通過Marker和Icon表現(xiàn)出來，而事件包含在控件之后，用他們自己的話說就是：The controls that wrap handlers define the methods that correspond to these abstract events 。順便再說一句，控件實(shí)現(xiàn)的核心是handler類，每個(gè)控件中都包含對(duì)handler的引用，通過active和deactive兩個(gè)方法，實(shí)現(xiàn)動(dòng)態(tài)的激活和注銷。
OpenLayers中的事件有兩種：一種是瀏覽器事件（比如onclick，onmouseup等），另一種是自定義的事件。自定義的事件像addLayer ,addControl等，不象瀏覽器事件會(huì)綁定相應(yīng)的dom節(jié)點(diǎn)，它是與layer、map等關(guān)聯(lián)的。
OpenLayers中支持的瀏覽器事件類型有（以常量的形式提供的）：
BROWSER_EVENTS: [
"mouseover", "mouseout",
"mousedown", "mouseup", "mousemove",
"click", "dblclick",
"resize", "focus", "blur" ]
看看構(gòu)造函數(shù)的的實(shí)現(xiàn)過程：
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）方法會(huì)將以數(shù)組eventTypes的每個(gè)元素為key建立哈希表listeners，表中每個(gè)鍵對(duì)應(yīng)一個(gè)數(shù)組。還會(huì)給this.eventHandler賦值，它實(shí)際只是一個(gè)包裝了triggerEvent事件觸發(fā)函數(shù)的方法，所有的事件，包括瀏覽器事件和自定義事件都是通過它來中轉(zhuǎn)的。然后initialize將所有的瀏覽器事件放入listeners中，并為其綁定相應(yīng)的dom節(jié)點(diǎn)element和this.eventHandler事件處理函數(shù)OpenLayers.Event.observe(element, eventType, this.eventHandler)，節(jié)點(diǎn)上事件觸發(fā)的時(shí)候會(huì)把事件傳給this.eventHandler，它調(diào)用triggerEvent，從而將事件傳出來。
來看其他的成員函數(shù)：
addEventType：Add a new event type to this events object；
attachToElement：把瀏覽器事件關(guān)聯(lián)到相應(yīng)的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參數(shù)是預(yù)先定義的回調(diào)函數(shù)。
unregister：注銷方法；
remove：Remove all listeners for a given event type.
triggerEvent：Trigger a specified registered event。
OpenLayers的Vector與Markers
OpenLayers在2.4版本中歷史性地添加了Vector圖層的支持。這個(gè)功能分別在不同的瀏覽器上用SVG/VML實(shí)現(xiàn)，其難度可以想象。Vector的出現(xiàn)可能大大增加開源WebGIS客戶端的功能。
不過問題也隨之而來，在使用Vector的時(shí)候，我們通常還要添加一個(gè)SelectFeature控件。這個(gè)控件的功能是使矢量的Feature可選，或是響應(yīng)其他鼠標(biāo)事件。問題就在于添加了SelectFeature之后，原本的Marker就不能再捕捉到事件，導(dǎo)致Popup之類的功能失效（包括Popup本身也不能捕捉到事件）。
魚和熊掌不能兼得，不過OpenLayers 2.4中已經(jīng)給Vector圖層里增加了createMarker和createPopup兩個(gè)方法，它的注釋是“HACK - we need to decide if all vector features should be able to create markers”。料想利用這兩個(gè)方法構(gòu)造的marker和應(yīng)該是可以解決前面的問題。
Vector的Marker的沖突可能還是會(huì)繼續(xù)一段時(shí)間，看起來確實(shí)是一個(gè)小小的缺陷。
下一個(gè)
OpenLayers是一個(gè)開源的js框架，用于在您的瀏覽器中實(shí)現(xiàn)地圖瀏覽的效果和基本的zoom，pan等功能。OpenLayers支持的地圖來源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用簡(jiǎn)單的圖片作為源，在這一方面OPenLayers提供了非常多的選擇。
要使用OpenLayers，您可以到它的官方網(wǎng)站http://www.openlayers.org下載他的壓縮包，解壓后可以看到其中的一些目錄和文件。拷貝dist目錄下的OpenLayer.js、根目錄下的lib目錄、根目錄下的img目錄到你網(wǎng)站的scripts目錄下（當(dāng)然，這個(gè)只是例子，您網(wǎng)站的目錄結(jié)構(gòu)您自己說得算，只要保證OpenLayers.js，/lib，/img在同一目錄中即可）。
接下來創(chuàng)建一個(gè)index.html作為查看地圖的頁(yè)面。導(dǎo)入OpenLayers.js和你將要?jiǎng)?chuàng)建的js。內(nèi)容需要一個(gè)div，我們給它的id起名叫做area。你有必要在寫一些CSS限定#area的寬度和高度，如果樂意，加上一個(gè)border也是很不錯(cuò)的選擇。
廢話不多說，我們首先要?jiǎng)?chuàng)建一個(gè)OpenLayer.Map對(duì)象的實(shí)例:
var map = new OpenLayers.Map("area");
其中的參數(shù)可以傳id，也可以傳ElementObject，當(dāng)然id更加方便一些。
接下來就是向地圖中添加圖層，通常情況下使用OpenLayers.Layer的子類來完成圖層的初始化。
OpenLayers提供了一下Layers的擴(kuò)展：
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類封裝一個(gè)實(shí)際圖象作為圖曾內(nèi)容
HTTPRequest類可以接收一個(gè)動(dòng)態(tài)生成的圖片，你可以通過HTTPRequest類的參數(shù)向服務(wù)器發(fā)送參數(shù)
Grid類是HTTPRequest類的子類，提供更加詳細(xì)的方法
WMS類用于連接WMS服務(wù)器以獲得圖象
KaMap類用于連接MapServer
EventPane類作為用于接收用戶操作的圖層
Google類用于從Google獲得圖象，它仍然需要你從Google獲得API KEY，并且include
VirtualEarth類用于操作VirtualEarth的圖層
Markers類用于生成接收和顯示用戶本地標(biāo)記的圖層
Text類用于接收CSV文件
GeoRSS類是Marker類的子類，用于封裝接收GeoRSS并在圖層中作出marker
Boxes同樣也是Marker類的子類，可以用div來做marker，而非image
TMS用于接收TMS服務(wù)器的地圖
創(chuàng)建完圖層后，可以用Map的addLayer(layer)方法插入，并執(zhí)行Map的zoomToMaxExtent()方法讓地圖合適地顯示。
OpenLayers還提供了豐富的Control類為地圖瀏覽添加一些工具，繼承自O(shè)penLayers.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
這些類的實(shí)例會(huì)在地圖瀏覽的“窗口”上增加一些工具欄或是“按鈕”，增加互動(dòng)性和功能性。
OpenLayers對(duì)常用的數(shù)據(jù)結(jié)構(gòu)進(jìn)行了封裝
OpenLayers.LonLat
OpenLayers.Size
OpenLayers.Pixel
OpenLayers.Bounds
以便于操作。
此外OpenLayers.Util類可以對(duì)圖片載入錯(cuò)誤時(shí)圖片框的顏色和圖片框中默認(rèn)的圖片進(jìn)行自定義，這一點(diǎn)是非常方便的。OpenLayers的Ajax類對(duì)創(chuàng)建XHR對(duì)象的過程進(jìn)行了封裝，可以使用它進(jìn)行簡(jiǎn)單的Ajax操作。
轉(zhuǎn)載于:https://www.cnblogs.com/ada-zheng/p/3192921.html
總結(jié)
- 上一篇： 区块链技术落地应用医疗服务平台搭建
- 下一篇： html：table如何固定首行