From：http://liushaobo2005.blog.163.com/blog/static/253056702011541462372/
wfs是OGC的标准规范，主要用于提供对矢量地理数据的服务，我们以一个对摄像头图层进行操作为例了解如何通过openlayer+geoserver实现WFS操作。
首先利用postgis建表camera，参照http://postgis.refractions.net/docs/ch04.html
接着在geoserver中创建相关图层camera，数据来源为刚建立的postgis表
修改geoserver的WFS service配置，将Service Level改为Transactional，实现事物级的操作。
此时我们已经完成了服务器端的配置，接着通过openlayer来实现对WFS服务的调用。
wfs-protocol-transactions.js
//定义DeleteFeature类 var DeleteFeature = OpenLayers.Class(OpenLayers.Control, { initialize: function(layer, options) { OpenLayers.Control.prototype.initialize.apply(this, [options]); this.layer = layer; this.handler = new OpenLayers.Handler.Feature( this, layer, {click: this.clickFeature} ); }, clickFeature: function(feature) { // if feature doesn't have a fid, destroy it if(feature.fid == undefined) { this.layer.destroyFeatures([feature]); } else { feature.state = OpenLayers.State.DELETE; this.layer.events.triggerEvent("afterfeaturemodified", {feature: feature}); feature.renderIntent = "select"; this.layer.drawFeature(feature); } }, setMap: function(map) { this.handler.setMap(map); OpenLayers.Control.prototype.setMap.apply(this, arguments); }, CLASS_NAME: "OpenLayers.Control.DeleteFeature" }); function init() { var mapOptions = { resolutions: [], projection: new OpenLayers.Projection('EPSG:900913'), maxExtent: new OpenLayers.Bounds(1.2636720449E7,2510310.336,1.2787005936E7,2660595.8230000017), units: "meters", controls: [] }; map = new OpenLayers.Map('map', mapOptions ); var wms = new OpenLayers.Layer.WMS( "szroad","http://yourgeoserver:8088/geoserver/gwc/service/wms", {layers: 'szroad', format: 'image/png' }, { tileSize: new OpenLayers.Size(256,256) } ); var saveStrategy = new OpenLayers.Strategy.Save(); wfs = new OpenLayers.Layer.Vector("Editable Features", { strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy], projection: new OpenLayers.Projection("EPSG:900913"), protocol: new OpenLayers.Protocol.WFS({ version: "1.1.0", srsName: "EPSG:900913", url: "http://yourgeoserver:8088/geoserver/wfs", featureType: "camera", featureNS: "http://yourgeoserver:8088/szglj", featurePrefix:"szglj", geometryName: "the_geom" }) }); map.addLayers([wms, wfs]); var panel = new OpenLayers.Control.Panel( {'displayClass': 'customEditingToolbar'} ); var navigate = new OpenLayers.Control.Navigation({ title: "Pan Map" }); var drawCamera = new OpenLayers.Control.DrawFeature( wfs, OpenLayers.Handler.Point, { title: "Draw Feature", displayClass: "olControlDrawFeaturePoint" } ); drawCamera.featureAdded = function(feature) { feature.attributes ={"code":"100000001","name":"一号摄像头"}; } var editCamera = new OpenLayers.Control.ModifyFeature(wfs, { title: "Modify Feature", displayClass: "olControlModifyFeature" }); var delCamera = new DeleteFeature(wfs, {title: "Delete Feature"}); var saveCamera = new OpenLayers.Control.Button({ title: "Save Changes", trigger: function() { if(editCamera.feature) { editCamera.selectControl.unselectAll(); } saveStrategy.save(); }, displayClass: "olControlSaveFeatures" }); panel.addControls([navigate, saveCamera, delCamera, editCamera, drawCamera]); panel.defaultControl = navigate; map.addControl(panel); map.zoomTo(3); }
wfs-protocol-transactions.html
<html> <head> <link rel="stylesheet" href="http://liushaobo2005.blog.163.com/blog/../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="http://liushaobo2005.blog.163.com/blog/style.css" type="text/css" /> <script. src="http://liushaobo2005.blog.163.com/blog/../lib/OpenLayers.js"></script> <style> .customEditingToolbar { float: right; right: 0px; height: 30px; width: 200px; } .customEditingToolbar div { float: right; margin: 5px; width: 24px; height: 24px; } .olControlNavigationItemActive { background-image: url("../theme/default/img/editing_tool_bar.png"); background-repeat: no-repeat; background-position: -103px -23px; } .olControlNavigationItemInactive { background-image: url("../theme/default/img/editing_tool_bar.png"); background-repeat: no-repeat; background-position: -103px -0px; } .olControlDrawFeaturePointItemInactive { background-image: url("../theme/default/img/editing_tool_bar.png"); background-repeat: no-repeat; background-position: -77px -0px; } .olControlDrawFeaturePointItemActive { background-image: url("../theme/default/img/editing_tool_bar.png"); background-repeat: no-repeat; background-position: -77px -23px ; } .olControlModifyFeatureItemActive { background-image: url(../theme/default/img/move_feature_on.png); background-repeat: no-repeat; background-position: 0px 1px; } .olControlModifyFeatureItemInactive { background-image: url(../theme/default/img/move_feature_off.png); background-repeat: no-repeat; background-position: 0px 1px; } .olControlDeleteFeatureItemActive { background-image: url(../theme/default/img/remove_point_on.png); background-repeat: no-repeat; background-position: 0px 1px; } .olControlDeleteFeatureItemInactive { background-image: url(../theme/default/img/remove_point_off.png); background-repeat: no-repeat; background-position: 0px 1px; } </style> <script. src="http://liushaobo2005.blog.163.com/blog/wfs-protocol-transactions.js"></script> </head> <body nload="init()"> <div id="map" style="100%;height:100%"></div> </body> </html>
注意：
1.openlayer中WFS layer的featureNS为geoserver中编辑的矢量图层的workspace 的Namespace URI。
2.提交wfs服务时js存在跨域问题，所以必须保证地图web server和WFS服务器在同一域环境下。