一晤锹、操作結(jié)果
沒有操作前
添加后操作后
二坛吁、操作代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="ol.css" />
<script src="ol-debug.js"></script>
<script src="jquery-3.1.1.js"></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="addPoint">添加面</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()
});
var imagewms = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/HBAJ/wms',
params: {
format: "image/png",
version: '1.1.1',
layers: "HBAJ:hebei_county"
}
})
});
var view = new ol.View({
center: new ol.proj.fromLonLat([120, 30]),
zoom: 5
});
var map = new ol.Map({
layers: [layer, imagewms, vector],
view: view,
target: "map",
logo: false
})
var drawInteraction = new ol.interaction.Draw({
type: "Polygon",
source: vector.getSource()
});
var format = new ol.format.WFS();
var add = document.getElementById("addPoint");
add.addEventListener("click", function () {
map.addInteraction(drawInteraction);
});
var key = drawInteraction.on("drawend", function (e) {
console.log(e.feature.getGeometry().getCoordinates());
var points = e.feature.getGeometry().getCoordinates();
var antitone = [[]];
points[0].map(function (val, index) {
var point = new ol.proj.toLonLat(val);
antitone[0].push([point[1], point[0]]);
});
var feature = new ol.Feature({
geom: new ol.geom.MultiPolygon([antitone])
});
var xml = format.writeTransaction([feature], null, null, {
featureNS: "www.hbaj.com",
featurePrefix: "HBAJ",
featureType: "hebei_county",
srsName: "EPSG:4326"
});
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) {
imagewms.getSource().updateParams({style:''});
console.log(req);
}
});
});
</script>
</body>
</html>
三劳殖、問題
問題：插入到數(shù)據(jù)庫中，查看geom字段為空拨脉；原因是因?yàn)椴迦腩愋筒灰恢露咭觯话銥槎嗝妫∕ultiPolygon）插入的是面(Polygon)類型
