一、操作结果
操作前，点的name属性为空，并且他们挤在一起
操作后，他们的点分散开
二、操作代码
<!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:25px;left:15px;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 modify = new ol.interaction.Modify({
features: select.getFeatures()
});
var format = new ol.format.WFS();
var add = document.getElementById("updatePoint");
add.addEventListener("click", function () {
map.addInteraction(select);
map.addInteraction(modify);
});
var format = new ol.format.WFS();
modify.on('modifyend', function (evt) {
var feature = evt.features.getArray()[0].clone();
var point = new ol.proj.toLonLat(feature.getGeometry().getCoordinates());
feature.set('name', '修改这个点的name属性和位置1');
feature.set('geom', new ol.geom.Point([point[1],point[0]]));
feature.setId(evt.features.getArray()[0].getId());
feature.unset('geometry');
var xml = format.writeTransaction(null, [feature], null, {
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) {
select.getFeatures().clear();
console.log(req);
}
});
});
</script>
</body>
</html>
三、难点操作
问题一、为什么用clone()函数？用来复制modify交互修改后的feature对象。
问题二、需要设置feature的ID，后台才能知道修改哪一个feature。
