三、Openlayers3.20.1通过Geoserver删除数
2017-07-18 本文已影响66人
拜拜都不行啊
一、操作结果
没有操作前
操作后那个点没有啦
二、操作代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="ol.css" rel='stylesheet' />
<script src="ol-debug.js" type="text/javascript"></script>
<script src="jquery-3.1.1.js" type="text/javascript"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
html,
body,
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div style="position:absolute;top:95px;left:95px;z-index:20"><button id="updatePoint">删除</button></div>
<div id="map"></div>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'
})
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: "http://localhost:8080/geoserver/HBAJ/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=HBAJ:center_point&outputFormat=application%2Fjson",
format: new ol.format.GeoJSON()
}),
style: new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: "#ff0000"
}),
radius: 5
})
})
});
var view = new ol.View({
center: new ol.proj.fromLonLat([120, 30]),
zoom: 5
});
var map = new ol.Map({
layers: [layer, vector],
view: view,
target: "map",
logo: false
})
var select = new ol.interaction.Select();
var format = new ol.format.WFS();
var add = document.getElementById("updatePoint");
add.addEventListener("click", function () {
map.addInteraction(select);
});
var format = new ol.format.WFS();
select.on('select', function (evt) {
var feature = evt.selected[0];
var point = new ol.proj.toLonLat(feature.getGeometry().getCoordinates());
var xml = format.writeTransaction(null, null, [feature], {
featureNS: "www.hbaj.com",
featurePrefix: "HBAJ",
featureType: "center_point"
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(xml);
$.ajax({
url: "http://localhost:8080/geoserver/HBAJ/wfs",
type: "POST",
data: featString,
contentType: 'text/xml',
success: function (req) {
var all = vector.getSource().getFeatures();
for (var m = 0, n = all.length; m < n; m++) {
if (all[m].getId() === feature.getId()) {
vector.getSource().removeFeature(all[m]);
}
}
select.getFeatures().clear();
console.log(req);
}
});
});
</script>
</body>
</html>
三、问题
问题：实在没遇到什么问题，如果你遇到可以留言。
