本文介绍了如何使用OpenLayers与GeoServer进行交互，包括查看、增加、修改和删除地理要素的操作。在查看模式下，用户可以选择图面矢量要素并查看其属性。增加模式下，用户可以绘制几何对象并提交新增。修改和删除操作同样通过选择对象后进行。代码部分展示了使用HTML文件实现这些功能的细节，强调了图层设置和坐标系的重要性，以及后端发布的需求。
一、效果
操作方式选择 查看，在图面上点选，可以渲染对应的矢量要素，表格中有要素的属性，点击 提交，会提示只支持insert、update、delete。
操作方式选择 增加，切换到绘制，可以在图面上绘制几何对象，完成绘制后，在属性表中修改属性，点击 提交，完成新增。
操作方式先 查看，选中对象，操作方式切换到 修改，可以修改矢量要素的几何和属性，点击 提交，完成新增。
操作方式先 查看，选中对象，操作方式切换到 删除，可以将选中的要素删除。
二、代码
增加一个GeoserverOL.HTML的文件。
代码如下：
在这个页面中，使用的是v6_time_pref_pgn_utf_wgs84_geoserver图层，这个图层只有一个几何字段geometry，几何类型是POLYGON，坐标系在建表的时候已经建立好了，是4326，这样才能支持geoserver的WFS服务，不至于报错。
页面中有很多细节，可参看详细注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>openlayer与geoserver交互</title>
<link rel="stylesheet" href="ol/ol.css">
<script src="ol/ol.js"></script>
<script src="jquery-1.7.2.js"></script>
<style type="text/css">
#map,
html,
body {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<form class="form-inline">
<label>操作方式 </label>
<select id="interaction">
<option value="search">查看</option>
<option value="insert">增加</option>
<option value="modify">修改</option>
<option value="delete">删除</option>
</select>
<label>先操作对象，再点击 </label>
<input type="button" id="creategml" name="name" value="提交" />
</form>
<div id="map"></div>
<div id="attributetable">
<table>
<thead>
<tr>
<th>fid</th>
<th>name_py</th>
<th>name_ch</th>
</tr>
</thead>
最低0.47元/天 解锁文章
1409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
