一切都准备好了,现在终于可以通过ol3加载配置好的数据了。上一节中最后的预览结果,大家已经看到了,此处我们自己通过ol来实现这个预览页面,直接上代码如下:
1、加载Geoserver发布的wfs地图服务,直接上代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<title>加载wfs地图服务</title>
</head>
s
<body>
<div id="map" style="width:100%;height:100%;"></div>
<script>
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
}),
style: function(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
})
});
}
});
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
}), vector],
target: 'map',
view: new ol.View({
center: [-73.99710639567148, 40.742270050255556],
maxZoom: 19,
zoom: 14,
projection: 'EPSG:4326'
})
});
</script>
</body>
</html>
下面运行代码看一下效果:

加载wfs服务成功!这里我们其实是加载的GeoJSON数据。
这里我们来看一下代码,和一般的矢量地图加载没什么两样,对于wfs而言,需要弄明白的是ol.source.Vector的url参数:
http://localhost:8080/geoserver/wfs?这一个不用多说,说明的是我们请求的是wfs地图服务;
service=wfs&version=1.1.0说明我们请求的服务是wfs服务,版本号是1.1.0;
request=GetFeature说明我们请求的是获取这个图层所有的要素;
typeNames=nyc_roads是因为我们之前配置的图层命名是这个;
outputFormat=application/json是说明我们的地图输出格式是json数据;
srsname=EPSG:4326这个是指定我们的地图输出坐标系为4326
这样我们就把url的所有参数解释了一遍!下面我们再思考一下,上面是全部查询,我们知道wfs也支持filter,所以我们可以在url里面设置filter,从而实现更细粒度的查询,比如这样:
http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326&cql_filter=in ('nyc_roads.1162')
我们先在网页上输入上面的url看一下:

可以看到返回的是一串json字符串,我们格式化一个这个json数据如下图:

可以看到这是我们之前发布的wfs地图服务中一个id为1162的地图Feature!
这样我们就做到了过滤wfs图层中的数据的功能。大家可以使用这个url做一下测试!
2、通过wfs修改要素
在查询的基础上,我们更进一步对界面上呈现的要素进行修改,然后通过wfs协议保存到服务器端。直接上代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<title>修改wfs地图要素</title>
</head>
<body>
<input type="button" value="查询" onclick="queryWfs();" />
<input id="select" type="checkbox" value="select" />选择
<input id="modify" type="checkbox" value="modify" />编辑
<input id="save" type="button" value="保存" onclick="onSave();" />
<div id="map" style="width:100%;height:100%;"></div>
<script>
//wfs地图服务图层,暂时设置为空
var wfsVectorLayer = null;
//修改的地图feature,暂时设置为空
var modifiedFeatures = null;
// 地图选取feature的交互类
var selectInteraction = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
})
})
});
// 地图选取feature修改器
var modifyInteraction = new ol.interaction.Modify({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 5
})
}),
//这个要修改的feature是我们之前通过ol.interaction.Select选中的feature
features: selectInteraction.getFeatures()
});
//监听地图feature修改
modifyInteraction.on('modifyend', function(e) {
// 把修改完成的feature暂存起来
modifiedFeatures = e.features;
});
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: 'map',
view: new ol.View({
center: [-73.99710639567148, 40.742270050255556],
maxZoom: 19,
zoom: 13,
projection: 'EPSG:4326'
})
});
// 通过wfs查询所有的要素方法
function queryWfs() {
// 支持重新查询,即如果已经查询过了wfs图层,那我们就移除这个图层,然后重新查询添加
if (wfsVectorLayer) {
map.removeLayer(wfsVectorLayer);
}
// 创建新的图层来加载wfs的要素,即重新加载wfs矢量图层
wfsVectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'the_geom' // 因为数据源里面字段the_geom存储的是geometry,所以需要指定
}),
url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
}),
//使用style+feature的方式修改添加的矢量图层的feature样式
style: function(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
});
}
});
map.addLayer(wfsVectorLayer);
}
//选择地图要素时执行的方法
$('#select').change(function() {
if (this.checked) {
// 勾选选择复选框时,添加选择器到地图。先移除后添加
map.removeInteraction(selectInteraction);
map.addInteraction(selectInteraction);
} else {
// 不勾选选择复选框的情况下,移出选择器和修改器
//移除选择器
map.removeInteraction(selectInteraction);
//把修改的checkbox置为false
document.getElementById('modify').checked = false;
//移除修改选择器
map.removeInteraction(modifyInteraction);
//把修改features置为空
modifiedFeatures = null;
}
});
//修改地图要素时执行的方法
$('#modify').change(function() {
if (this.checked) {
// 勾选修改复选框时,添加选择器和修改器到地图
//首先把选择地图要素的checkbox置为true
document.getElementById('select').checked = true;
//先移除修改器
map.removeInteraction(modifyInteraction);
//再添加修改器
map.addInteraction(modifyInteraction);
//先移除选择器
map.removeInteraction(selectInteraction);
//再添加选择器
map.addInteraction(selectInteraction);
} else {
// 不勾选修改复选框时,移出修改器
map.removeInteraction(modifyInteraction);
modifiedFeatures = null;
}
});
// 保存已经编辑的要素
function onSave() {
//如果修改的地图要素不为空
if (modifiedFeatures && modifiedFeatures.getLength() > 0) {
// 转换坐标
var modifiedFeature = modifiedFeatures.item(0).clone();
// 注意ID是必须,通过ID才能找到对应修改的feature
modifiedFeature.setId(modifiedFeatures.item(0).getId());
// 调换经纬度坐标,以符合wfs协议中经纬度的位置
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]);
}
}
// 把修改提交到服务器端
function modifyWfs(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(null,
features, null, {
featureType: 'nyc_roads',
featureNS: 'http://geoserver.org/nyc_roads', // 注意这个值必须为创建工作区时的命名空间URI
srsName: 'EPSG:4326' //参考坐标系
});
// 转换为xml内容发送到服务器端
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:8080/geoserver/wfs?service=wfs');
// 指定内容为xml类型
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}
</script>
</body>
</html>
运行一下看一下效果:

然后我们点击查询:

我们的wfs地图服务就加载上了,然后点击选择:

我们选择的feature样式会改变,然后再点击编辑:

我们就可以修改feature样式了,然后点击保存,这里我们打开开发者工具看一下网络交互!
可以看到发起了一个wfs的http请求到geoserver服务器,请求的url为:http://localhost:8080/geoserver/wfs?service=wfs,

发送的内容大致为:
<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">
<Update typeName="feature:nyc_roads" xmlns:feature="http://geoserver.org/nyc_roads">
<Property>
<Name>the_geom</Name>
<Value>
<MultiLineString xmlns="http://www.opengis.net/gml" srsName="EPSG:4326">
<lineStringMember>
<LineString srsName="EPSG:4326">
<posList>-73.98528635501862 40.768332481384284 -73.98608637 40.76719342 -73.98449242115021 40.767849683761604 -73.98447096347809 40.76647639274598 -73.98299038410187 40.767334699630744 -73.98336657 40.76604531</posList>
</LineString>
</lineStringMember>
</MultiLineString>
</Value>
</Property>
<Property>
<Name>modified</Name>
<Value>5/28/2001</Value>
</Property>
<Property>
<Name>name</Name>
<Value>W 56 ST</Value>
</Property>
<Property>
<Name>vsam</Name>
<Value>15060</Value>
</Property>
<Property>
<Name>sourcedate</Name>
<Value>3/31/1996</Value>
</Property>
<Property>
<Name>sourcetype</Name>
<Value>Photogrammetric</Value>
</Property>
<Property>
<Name>source_id</Name>
<Value>96083</Value>
</Property>
<Property>
<Name>borough</Name>
<Value>Manhattan</Value>
</Property>
<Property>
<Name>feat_code</Name>
<Value>2900</Value>
</Property>
<Property>
<Name>feat_desc</Name>
<Value>Paved Road</Value>
</Property>
<Property>
<Name>exported</Name>
<Value>05/19/2004</Value>
</Property>
<Property>
<Name>feat_type</Name>
<Value>0</Value>
</Property>
<Filter xmlns="http://www.opengis.net/ogc">
<FeatureId fid="nyc_roads.882" />
</Filter>
</Update>
</Transaction>
如果保存成功,则response的内容大致如下:
<?xml version="1.0" encoding="UTF-8"?>
<wfs:TransactionResponse
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:sf="http://www.openplans.org/spearfish"
xmlns:wfs="http://www.opengis.net/wfs"
xmlns:gml="http://www.opengis.net/gml"
xmlns:nyc_roads="http://geoserver.org/nyc_roads"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:ows="http://www.opengis.net/ows"
xmlns:tiger="http://www.census.gov"
xmlns:topp="http://www.openplans.org/topp"
xmlns:xlink="http://www.w3.org/1999/xlink" x
mlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
version="1.1.0"
xsi:schemaLocation="http://www.opengis.net/wfs http://localhost:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd">
<wfs:TransactionSummary>
<wfs:totalInserted>0</wfs:totalInserted>
<wfs:totalUpdated>1</wfs:totalUpdated>
<wfs:totalDeleted>0</wfs:totalDeleted>
</wfs:TransactionSummary>
<wfs:TransactionResults/>
<wfs:InsertResults>
<wfs:Feature><ogc:FeatureId fid="none"/></wfs:Feature>
</wfs:InsertResults>
</wfs:TransactionResponse>
有的同学可能保存没有成功,那么就会response就会返回下面的信息:
<?xml version="1.0" encoding="UTF-8"?><ows:ExceptionReport xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ows="http://www.opengis.net/ows" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/ows http://localhost:8080/geoserver/schemas/ows/1.0.0/owsExceptionReport.xsd">
<ows:Exception exceptionCode="NoApplicableCode">
<ows:ExceptionText>{http://geoserver.org/nyc_roads}nyc_roads is read-only</ows:ExceptionText>
</ows:Exception>
</ows:ExceptionReport>
这是因为我们在的nyc_roads图层设置了只读服务,即我们不能在服务器上修改这个feature!但是我们是可以在本地修改保存的!
3、我们前面写完了查询、修改feature,下面我们再来写一个增加要素的功能,现在我们该介绍一下如何在前端绘制一个新的要素,并且保存到服务器端,直接上代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<title>增加wfs地图要素</title>
</head>
<body>
<input type="button" value="查询" onclick="queryWfs();" />
<input id="add" type="checkbox" value="add" />新增
<input id="saveNew" type="button" value="保存" onclick="onSaveNew();" />
<div id="map" style="width:100%;height:100%;"></div>
<script>
var newId = 1;
var wfsVectorLayer = null;
//绘制feature,暂时设置为空
var drawedFeature = null;
// 创建用于新绘制feature的layer
var drawLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
})
});
// 添加绘制新图形的interaction,用于添加新的线条
var drawInteraction = new ol.interaction.Draw({
type: 'LineString', // 设定为线条
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 10
})
}),
source: drawLayer.getSource()
});
//监听绘制方法
drawInteraction.on('drawend', function(e) {
// 绘制结束时暂存绘制的feature
drawedFeature = e.feature;
});
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
}), drawLayer],
target: 'map',
view: new ol.View({
center: [-73.99710639567148, 40.742270050255556],
maxZoom: 19,
zoom: 13,
projection: 'EPSG:4326'
})
});
function queryWfs() {
if (wfsVectorLayer) {
map.removeLayer(wfsVectorLayer);
}
wfsVectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'the_geom'
}),
url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
}),
style: function(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
});
}
});
map.addLayer(wfsVectorLayer);
}
$('#add').change(function() {
if (this.checked) {
// 勾选新增复选框时,添加绘制的Interaction
map.removeInteraction(drawInteraction);
map.addInteraction(drawInteraction);
} else {
// 取消勾选新增复选框时,移出绘制的Interaction,删除已经绘制的feature
map.removeInteraction(drawInteraction);
if (drawedFeature) {
drawLayer.getSource().removeFeature(drawedFeature);
}
drawedFeature = null;
}
});
// 保存新绘制的feature
function onSaveNew() {
// 转换坐标
var geometry = drawedFeature.getGeometry().clone();
geometry.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;
}
});
// 设置feature对应的属性,这些属性是根据数据源的字段来设置的
var newFeature = new ol.Feature();
newFeature.setId('nyc_roads.new.' + newId);
newFeature.setGeometryName('the_geom');
newFeature.set('the_geom', null);
newFeature.set('name', newFeature.getId());
newFeature.set('modified', newFeature.getId());
newFeature.set('vsam', 0);
newFeature.set('sourcedate', '');
newFeature.set('sourcetype', '');
newFeature.set('source_id', newId);
newFeature.set('borough', '');
newFeature.set('feat_code', 0);
newFeature.set('feat_desc', '11');
newFeature.set('feat_type', 0);
newFeature.set('exported', 'true');
newFeature.setGeometry(new ol.geom.MultiLineString([geometry.getCoordinates()]));
addWfs([newFeature]);
// 更新id
newId = newId + 1;
// 3秒后,自动刷新页面上的feature
setTimeout(function() {
drawLayer.getSource().clear();
queryWfs();
}, 3000);
}
// 添加到服务器端
function addWfs(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(features,
null, null, {
featureType: 'nyc_roads',
featureNS: 'http://geoserver.org/nyc_roads',
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:8080/geoserver/wfs?service=wfs');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}
</script>
</body>
</html>
运行代码看一下效果:

点击查询:

点击新增:

可以自己绘制一个图形,然后点击保存,我们还是打开开发者工具查看网络传输情况:
在开发者工具界面可以看到http请求:

请求头文件为:

请求内容为:
<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">
<Insert>
<nyc_roads xmlns="http://geoserver.org/nyc_roads" fid="nyc_roads.new.1">
<the_geom>
<MultiLineString xmlns="http://www.opengis.net/gml" srsName="EPSG:4326">
<lineStringMember>
<LineString srsName="EPSG:4326">
<posList>-73.99970054626465 40.732669830322266 -73.98974418640137 40.71481704711914 -73.98545265197754 40.730438232421875 -73.98064613342285 40.71636199951172 -73.97360801696777 40.73284149169922</posList>
</LineString>
</lineStringMember>
</MultiLineString>
</the_geom>
<name>nyc_roads.new.1</name>
<modified>nyc_roads.new.1</modified>
<vsam>0</vsam>
<sourcedate></sourcedate>
<sourcetype></sourcetype>
<source_id>1</source_id>
<borough></borough>
<feat_code>0</feat_code>
<feat_desc>11</feat_desc>
<feat_type>0</feat_type>
<exported>true</exported>
</nyc_roads>
</Insert>
</Transaction>
服务器端response的内容为:
<?xml version="1.0" encoding="UTF-8"?>
<wfs:TransactionResponse xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:sf="http://www.openplans.org/spearfish" xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" xmlns:nyc_roads="http://geoserver.org/nyc_roads" xmlns:ogc="http://www.opengis.net/ogc" xmlns:ows="http://www.opengis.net/ows" xmlns:tiger="http://www.census.gov" xmlns:topp="http://www.openplans.org/topp" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://localhost:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd">
<wfs:TransactionSummary>
<wfs:totalInserted>1</wfs:totalInserted>
<wfs:totalUpdated>0</wfs:totalUpdated>
<wfs:totalDeleted>0</wfs:totalDeleted>
</wfs:TransactionSummary>
<wfs:TransactionResults/>
<wfs:InsertResults>
<wfs:Feature>
<ogc:FeatureId fid="new0" />
</wfs:Feature>
</wfs:InsertResults>
</wfs:TransactionResponse>
如果图层设置了只读的限制,那么在上传到服务端时response为:
<?xml version="1.0" encoding="UTF-8"?><ows:ExceptionReport xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ows="http://www.opengis.net/ows" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/ows http://localhost:8080/geoserver/schemas/ows/1.0.0/owsExceptionReport.xsd">
<ows:Exception exceptionCode="NoApplicableCode">
<ows:ExceptionText>{http://geoserver.org/nyc_roads}nyc_roads is read-only</ows:ExceptionText>
</ows:Exception>
</ows:ExceptionReport>
4、最后我们再来一个增删改查中的删除功能!直接上代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<title>增加wfs地图要素</title>
</head>
<body>
<input type="button" value="查询" onclick="queryWfs();" />
<input id="select" type="checkbox" value="select" />选择
<input id="delete" type="button" value="删除选中Feature" onclick="onDeleteFeature();" />
<div id="map" style="width:100%;height:100%;"></div>
<script>
var wfsVectorLayer = null;
// 选择器
var selectInteraction = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 10
})
})
});
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: 'map',
view: new ol.View({
center: [-73.99710639567148, 40.742270050255556],
maxZoom: 19,
zoom: 13,
projection: 'EPSG:4326'
})
});
function queryWfs() {
if (wfsVectorLayer) {
map.removeLayer(wfsVectorLayer);
}
wfsVectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'the_geom'
}),
url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
}),
style: function(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
});
}
});
map.addLayer(wfsVectorLayer);
}
$('#select').change(function() {
if (this.checked) {
map.removeInteraction(selectInteraction);
map.addInteraction(selectInteraction);
} else {
map.removeInteraction(selectInteraction);
}
});
function onDeleteFeature() {
// 删选择器选中的feature
if (selectInteraction.getFeatures().getLength() > 0) {
deleteWfs([selectInteraction.getFeatures().item(0)]);
// 3秒后自动更新features
setTimeout(function() {
selectInteraction.getFeatures().clear();
queryWfs();
}, 3000);
}
}
// 在服务器端删除feature
function deleteWfs(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(null,
null, features, {
featureType: 'nyc_roads',
featureNS: 'http://geoserver.org/nyc_roads',
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:8080/geoserver/wfs?service=wfs');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}
</script>
</body>
</html>
运行代码看一下效果:

请大家自己测试删除feature的工作!
到此,我们就完成二零地图开发实战的所有增删改查工作!
我们关于OpenLayers的所有入门开发教程也将告一段落,以后有时间的话我会把一些项目中常用的功能集中到一个项目中,开发一个完全满足上线要求的系统!请大家把我们之前学过的一些功能多写几遍,最后达到融会贯通,然后再进行实际项目的开发锻炼!大家加油!
8968



被折叠的 条评论
为什么被折叠?



