OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）

最新推荐文章于 2024-08-08 16:17:32 发布

MagicMHD

最新推荐文章于 2024-08-08 16:17:32 发布

阅读量3.3k

点赞数 14

分类专栏： WebGIS实战 OpenLayers

本文链接：https://blog.csdn.net/MagicMHD/article/details/91437251

版权

本文介绍了如何使用OpenLayers加载Geoserver发布的WFS地图服务，实现地图要素的查询、修改、新增和删除功能。通过理解WFS服务的参数，实现了过滤查询，并展示了在前端修改要素样式并保存到服务器的过程。最后，文章强调了实践和融会贯通的重要性。

摘要由CSDN通过智能技术生成

一切都准备好了，现在终于可以通过ol3加载配置好的数据了。上一节中最后的预览结果，大家已经看到了，此处我们自己通过ol来实现这个预览页面，直接上代码如下：

1、加载Geoserver发布的wfs地图服务，直接上代码如下：


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
   

     <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
     <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <title>加载wfs地图服务</title>
  </head>

s
  <body>
 <div id="map" style="width:100%;height:100%;"></div>

  <script>
    var vector = new ol.layer.Vector({
      source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
      }),
      style: function(feature, resolution) {
        return new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'blue',
            width: 1
          })
        });
      }
    });

    var map = new ol.Map({
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      }), vector],
      target: 'map',
      view: new ol.View({
        center: [-73.99710639567148, 40.742270050255556],
        maxZoom: 19,
        zoom: 14,
        projection: 'EPSG:4326'
      })
    });
  </script>

  </body>
</html>

下面运行代码看一下效果：

加载wfs服务成功！这里我们其实是加载的GeoJSON数据。

这里我们来看一下代码，和一般的矢量地图加载没什么两样，对于wfs而言，需要弄明白的是ol.source.Vector的url参数：

http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326

http://localhost:8080/geoserver/wfs?这一个不用多说，说明的是我们请求的是wfs地图服务；

service=wfs&version=1.1.0说明我们请求的服务是wfs服务，版本号是1.1.0；

request=GetFeature说明我们请求的是获取这个图层所有的要素；

typeNames=nyc_roads是因为我们之前配置的图层命名是这个；

outputFormat=application/json是说明我们的地图输出格式是json数据；

srsname=EPSG:4326这个是指定我们的地图输出坐标系为4326

这样我们就把url的所有参数解释了一遍！下面我们再思考一下，上面是全部查询，我们知道wfs也支持filter，所以我们可以在url里面设置filter，从而实现更细粒度的查询，比如这样：

http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326&cql_filter=in ('nyc_roads.1162')

我们先在网页上输入上面的url看一下：

可以看到返回的是一串json字符串，我们格式化一个这个json数据如下图：

可以看到这是我们之前发布的wfs地图服务中一个id为1162的地图Feature！

这样我们就做到了过滤wfs图层中的数据的功能。大家可以使用这个url做一下测试！

2、通过wfs修改要素

在查询的基础上，我们更进一步对界面上呈现的要素进行修改，然后通过wfs协议保存到服务器端。直接上代码如下：


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
   
     <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
     <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <title>修改wfs地图要素</title>
  </head>
  <body>
  <input type="button" value="查询" onclick="queryWfs();" />
  <input id="select" type="checkbox" value="select" />选择
  <input id="modify" type="checkbox" value="modify" />编辑
  <input id="save" type="button" value="保存&#