一、结果如下
原始地图显示内容
后来增加四个点
二、代码如下
<!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:center_point"
}
})
});
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: "Point",
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) {
var point=new ol.proj.toLonLat(e.feature.getGeometry().getCoordinates());
var feature = new ol.Feature({
geom: new ol.geom.Point([point[1],point[0]])
});
var xml = format.writeTransaction([feature], null, null, {
featureNS: "www.hbaj.com",//该图层所在工作空间的uri
featurePrefix: "HBAJ",//工作空间名称
featureType: "center_point",//图层名称
// srsName: "EPSG:4326"
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(xml);//需要把字符串序列化为xml格式
$.ajax({
url: "http://localhost:8080/geoserver/HBAJ/wfs",
type:"POST",
data: featString,
contentType: 'text/xml',
success: function (req) {
console.log(req);
}
});
});
</script>
</body>
</html>
三、问题总结
完成环境：openlayers3.18.2;Geoserver版本为2.8.1
问题一、WFS的1.1.0和2.0.0版本在Geoserver中的经纬度顺序为纬度、经度,而Openlayers默认版本是1.1.0。
Geoserver官方文档对不同版本的经纬度顺序进行说明
问题二、需要序列化从format中生成的字符串为xml的格式，后台才能够正确解析。
问题三、srsName的作用在是用来直接转换坐标的比如直接把3857坐标转为4326存入数据库。
官方文档说明
网友评论