在BS端可能有這樣的需求——對發(fā)布的地圖進(jìn)行修改（例如行政邊界變化锋爪、路網(wǎng)變化副硅、建筑物的變化）梗摇。樣就必須對發(fā)布的地圖數(shù)據(jù)進(jìn)行重新修改，重新發(fā)布想许。這樣太麻煩且不方便伶授。
Openlayers提供對WFS數(shù)據(jù)進(jìn)行修改的方法
在Openlayers中提供了ol.interaction方法對矢量瓦片進(jìn)行修改。對于矢量服務(wù)流纹，主要用于feature選中（點(diǎn)擊糜烹、鼠標(biāo)懸浮等），做出相應(yīng)的操作漱凝，例如高亮顯示什么的疮蹦，改變渲染樣式∪壮矗看一下其中的方法：
-
ol.interaction.Select
interaction.Select提供了很多交互方法
（節(jié)選翻譯）Interaction for selecting vector features. By default, selected features are styled differently, so this interaction can be used for visual highlighting, as well as selecting features for other actions, such as modification or output. There are three ways of controlling which features are selected: using the browser event as defined by the condition and optionally the toggle, add/remove, and multi options; a layers filter; and a further feature filter using the filter option.
交互操作是為了選擇適量要素愕乎。默認(rèn)情況下，被選擇要素的樣式顯示會不同壁公，所以這種交互操作可以用于可視化高亮顯示感论，以及為其他操作(如修改或輸出)選擇特性。這里有三種方法控制選擇哪些要素：使用瀏覽器事件作為條件以及可選的切換紊册、添加/刪除和多個(gè)選項(xiàng)比肄。選擇更多的要素去操作。
-
ol.interaction.Modify
interaction.Modify方法
ol.interaction.Modify提供對矢量要素的修改方法。
實(shí)現(xiàn)思路
（一）因?yàn)槭菍?shí)現(xiàn)在線編輯芳绩，不是用GeoJSON數(shù)據(jù)掀亥。在PostGIS將自己的數(shù)據(jù)進(jìn)行發(fā)布。發(fā)布的格式是WFS的矢量格式的地圖服務(wù)妥色；
（二）記錄發(fā)布的工作區(qū)的URL地址和名稱（這個(gè)兩個(gè)參數(shù)尤為重要搪花，保證了數(shù)據(jù)修改提交是否成功）：
（三）編寫代碼進(jìn)行修改和編輯。
代碼思路
（一）使用Openlayers方法進(jìn)行加載發(fā)布的矢量圖層嘹害；
（二）使用interaction方法選擇撮竿、修改矢量要素；
//選擇要素
var selectInteraction=new ol.interaction.Select({
style:new ol.style.Style({
stroke:new ol.style.Stroke({
color: 'red',
width: 2
})
})
});
//修改要素
var modifyInteraction = new ol.interaction.Modify({
style:new ol.style.Style({
stroke:new ol.style.Stroke({
color: 'black',
width: 2
})
}),
features: selectInteraction.getFeatures()
});
（三）對修改的要素提交到GeoServer進(jìn)行保存吼拥，相當(dāng)于重新發(fā)布（實(shí)質(zhì)是通過XML進(jìn)行數(shù)據(jù)的重新提交）
function queryWfs() {
// 支持重新查詢
if (wfsVectorLayer) {
map.removeLayer(wfsVectorLayer);
}
// 創(chuàng)建新的圖層來加載wfs的要素
wfsVectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'geom' // 將shp格式矢量文件導(dǎo)入PostgreGIS數(shù)據(jù)庫中，對應(yīng)的表中增加了一個(gè)字段名為geom的字段线衫，所有這里的名稱就是數(shù)據(jù)庫表中增加的那個(gè)字段名稱
}), //PostgreGIS:xian_polygon為工作空間：圖層名
url:''//圖層地址
}),
style: function(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width:2
})
});
}
});
map.addLayer(wfsVectorLayer);
}
// 保存已經(jīng)編輯的要素
function onSave() {
if (modifiedFeatures && modifiedFeatures.getLength() > 0) {
// 轉(zhuǎn)換坐標(biāo)
var modifiedFeature = modifiedFeatures.item(0).clone();
// 注意ID是必須凿可，通過ID才能找到對應(yīng)修改的feature
modifiedFeature.setId(modifiedFeatures.item(0).getId());
// 調(diào)換經(jīng)緯度坐標(biāo)，以符合wfs協(xié)議中經(jīng)緯度的位置
modifiedFeature.getGeometry().applyTransform(function(flatCoordinates, flatCoordinates2, stride) {
for (var j = 0; j < flatCoordinates.length; j += stride) {
var y = flatCoordinates[j];
var x = flatCoordinates[j + 1];
flatCoordinates[j] = x;
flatCoordinates[j + 1] = y;
}
});
modifyWfs([modifiedFeature]);
}
}
// 把修改提交到服務(wù)器端
function modifyWfs(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(null,
features, null, {
featureType: '', //圖層名
featureNS: '', // 注意這個(gè)值必須為創(chuàng)建工作區(qū)時(shí)的命名空間URI
srsName: 'EPSG:4326'
});
// 轉(zhuǎn)換為xml內(nèi)容發(fā)送到服務(wù)器端
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', '');//URL地址
// 指定內(nèi)容為xml類型
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}
// 在服務(wù)器端刪除feature
function deleteWfs(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(null,
null, features, {
featureType: '', //圖層名
featureNS: '', // 注意這個(gè)值必須為創(chuàng)建工作區(qū)時(shí)的命名空間URI
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', '');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}
最后即可完成在BS端完成矢量要素的在線編輯操作授账。
