WFS1.1.0協議（增刪改查）+openlayers4.3.1前端構建+geoserver2.15.1安裝部署+shpfile數據源配置

• WFS簡介

1.WFS即，Web要素服務，全稱WebFeatureService。GIS下，支持對地理要素的插入，更新，刪除，檢索和發現服務。

2.屬於OGC標準下的通訊協議。OGC標準下的GIS服務還有：WMS、WMTS、WCS等。

3.服務根據HTTP客戶請求返回GML(Geography Markup Language、地理標識語言)數據。 WFS對應於常見桌面程序中的條件查詢功能，WFS經過OGC Filter構造查詢條件，支持基於空間幾何關係的查詢，基於屬性域的查詢，固然還包括基於空間關係和屬性域的共同查詢。

 

• 自言自語

網上已經有關於wfs使用方法的文章，零零散散，有的關於insert，有關於delete，不是特別完整。這幾天工做上有需求，儘快搭好了geoserver，完整地開發並測試了增刪改查。其中查詢使用了get請求，其餘使用了post。有此文章以自備，提供較爲完整的方案，如能幫助他人，再好不過。

 

• GeoServer安裝、部署

1.安裝依賴

因爲依賴於JDK，因此先按照此依賴。我安裝的是1.8版本，具體版本是8u73。安裝後，能夠不用配置環境變量。

 

2.安裝

安裝geoserver2.15.1。注意默認端口號是8080，建議修改成其餘，防止衝突。帳號和密碼可使用默認的。 

                                                       

3.啓動

安裝完以後，啓動服務器。可使用開始菜單欄的快捷方式，也可使用文件目錄下的腳本。

 

4.登錄

登錄url→localhost:端口號。登錄後的界面：

5.新建工做區

點擊左側「工做區」，添加新的工做區。name和命名空間url，都很是重要，不要隨意填寫。

6.新建數據源

點擊左側「數據存儲」，添加新的數據源，選擇shpfile類型。指向你的shp文件。工做區選擇剛剛本身新建的那個，數據源名稱不是很重要。由於最終的數據源名稱使用的是你的shp的文件名。

7.預覽

建立完畢後，點擊左側的"Layer Preview"，在列表中能夠看到本身建立的數據源。點擊openlayers，能夠預覽。

8.開啓跨域權限

因爲GIS應用基本上都構建於其餘的服務器，這裏必須開啓跨域才能訪問。打開以下路徑的web.xml

 

須要Uncomment以下代碼。能夠直接在文本編輯器中搜索Uncomment。

-------------------------------------------------------------------分割線---------------------------------------------------------------------

 9.開啓讀寫權限

回到geoserver配置頁，左側Security→Data，在rule path中，找到*.*.W，而後勾選Grant access to any role。至此所有配置完畢

 

• WFS請求

　　下面以點要素爲例，介紹相關協議。

 1.查詢

1  var xhr = new XMLHttpRequest(); 2 
3     xhr.open("GET", "http://localhost:9000/geoserver/zzjz/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=zzjz%3AExport_Output&maxFeatures=50&outputFormat=application%2Fjson", true); 4 
5     xhr.onreadystatechange = function () { 6      //請求後的處理
7     }; 8 
9     xhr.send();

 

這裏的zzjz是工做區名稱，typeName是工做區和數據源名稱， 以冒號相連，outputFormat是要求服務器返回JSON格式的結果。

 

實際請求內容：

 

請求成功會見到以下返回response：

 

 

2.新增

 1     var format = new ol.format.WFS();  2 
 3     var xml = format.writeTransaction([feature], null, null, {  4         featureNS: "www.zzjz.com",  5         featurePrefix: "ZZJZ",  6         featureType: "Export_Output",  7         srsName: "EPSG:3857"
 8     });  9 
10     var serializer = new XMLSerializer(); 11     var featString = serializer.serializeToString(xml); 12 
13     featString = featString.replace("geometry", "the_geom"); 14     featString = featString.replace("geometry", "the_geom"); 15     featString = featString.replace("pos", 'coordinates decimal="." cs=" "'); 16     featString = featString.replace("pos", 'coordinates'); 17     featString = featString.replace(" undefined", ''); 18 
19     var xhrInsert = new XMLHttpRequest(); 20     xhrInsert.open("POST", "http://localhost:9000/geoserver/zzjz/ows?service=WFS", true); 21     xhrInsert.setRequestHeader('Content-Type', 'text/xml'); 22     xhrInsert.send(featString); 23     xhrInsert.onreadystatechange = function () { 24       //請求後的處理 
25     }

 

 這裏使用了ol的方法，將feature要素序列化。須要注意的是，須要將geometry標籤替換爲the_geom標籤，將pos標籤替換爲coordinates標籤，同時將高程數據刪除。

 

3.刪除

 1     var xml = '<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">';  2     xml += '<Delete typeName="ZZJZ:Export_Output" xmlns:ZZJZ="www.zzjz.com">';  3     xml += '<Filter xmlns="http://www.opengis.net/ogc">'//www.zzjz.com
 4     xml += '<PropertyIsEqualTo>'
 5     xml += '<PropertyName>' + propertySTR + '</PropertyName>'
 6     xml += '<Literal>' + feature.getProperties()[propertySTR] + '</Literal>'
 7     xml += '</PropertyIsEqualTo>'
 8     xml += '</Filter>'
 9     xml += '</Delete>'
10     xml += '</Transaction>'
11     var xhrDelete = new XMLHttpRequest(); 12     xhrDelete.open("POST", "http://localhost:9000/geoserver/zzjz/ows?service=WFS", t 13     xhrDelete.setRequestHeader('Content-Type', 'text/xml'); 14  xhrDelete.send(xml); 15     xhrDelete.onreadystatechange = function () { 16     }

 

  這裏使用了本身構建的GML文本，Filter指向刪除條件，PropertyName指向屬性名稱，Literal指向屬性值

 

4.更新（位置信息）

 1     var xml = '<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">';  2     xml += '<Update typeName="ZZJZ:Export_Output" xmlns:ZZJZ="www.zzjz.com">';  3     xml += '<Property>'
 4     xml += '<Name>the_geom</Name>';  5     xml += '<Value>'
 6     xml += '<Point xmlns="http://www.opengis.net/gml" srsName="EPSG:3857">';  7     xml += '<coordinates decimal="." cs=",">'
 8     xml += feature.getGeometry().getCoordinates().toString();  9     xml += '</coordinates>'
10     xml += '</Point>'
11     xml += '</Value>'
12     xml += '</Property>'
13     xml += '<Filter xmlns="http://www.opengis.net/ogc">'//www.zzjz.com
14     xml += '<PropertyIsEqualTo>'
15     xml += '<PropertyName>' + propertySTR + '</PropertyName>'
16     xml += '<Literal>' + feature.getProperties()[propertySTR] + '</Literal>'
17     xml += '</PropertyIsEqualTo>'
18     xml += '</Filter>'
19     xml += '</Update>'
20     xml += '</Transaction>'
21     var xhrUpdate = new XMLHttpRequest(); 22     xhrUpdate.open("POST", "http://localhost:9000/geoserver/zzjz/ows?service=WFS", true); 23     xhrUpdate.setRequestHeader('Content-Type', 'text/xml'); 24  xhrUpdate.send(xml); 25     xhrUpdate.onreadystatechange = function () { 26     }

 

 更新位置信息，須要在Update標籤下設置兩個屬性：Property、Filter。一個用於更新屬性，一個用於設置條件。Property中的Name固定爲「the_geom」，Value爲要素信息。

 

5.更新（屬性信息）

 1     var xml = '<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">';  2     xml += '<Update typeName="ZZJZ:Export_Output" xmlns:ZZJZ="www.zzjz.com">';  3     xml += '<Property>'
 4     xml += '<Name>OBJECTID</Name>';  5     xml += '<Value>'
 6     xml += feature.getProperties()["OBJECTID"]  7     xml += '</Value>'
 8     xml += '</Property>'
 9     xml += '<Property>'
10     xml += '<Name>heitht</Name>'; 11     xml += '<Value>'
12     xml += feature.getProperties()["heitht"] 13     xml += '</Value>'
14     xml += '</Property>'
15     xml += '<Property>'
16     xml += '<Name>remark</Name>'; 17     xml += '<Value>'
18     xml += feature.getProperties()["remark"] 19     xml += '</Value>'
20     xml += '</Property>'
21     xml += '<Filter xmlns="http://www.opengis.net/ogc">'//www.zzjz.com
22     xml += '<PropertyIsEqualTo>'
23     xml += '<PropertyName>' + propertySTR + '</PropertyName>'
24     xml += '<Literal>' + feature.getProperties()[propertySTR] + '</Literal>'
25     xml += '</PropertyIsEqualTo>'
26     xml += '</Filter>'
27     xml += '</Update>'
28     xml += '</Transaction>'
29     var xhrUpdate = new XMLHttpRequest(); 30     xhrUpdate.open("POST", "http://localhost:9000/geoserver/zzjz/ows?service=WFS", true); 31     xhrUpdate.setRequestHeader('Content-Type', 'text/xml'); 32  xhrUpdate.send(xml); 33     // xhrUpdate.send(featString);
34     xhrUpdate.onreadystatechange = function () { 35     }

 

  更新屬性信息，須要在Update標籤下設置兩個屬性：Property、Filter。一個用於更新屬性，一個用於設置條件。Property中的Name爲屬性名稱，Value爲屬性值。

 

• 關於Openlayers

Openlayers4.3.1的版本因爲工做須要不能更換，因此構建出的文本信息與當前geoserver默認的協議格式有些不一樣，因此目前只在insert操做時可使用ol的接口，直接生成文本。其餘操做都必須修改大量請求內容。

我的以爲，不依賴接口反而更容易理解協議規範。