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

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

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

  
    
    
    
   

     
     
    
  

s
  
 


  

  

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

加载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协议保存到服务器端。直接上代码如下：

  
    
    
    
   
     
     
    
  
  
  
  选择
  编辑
  

  


  

运行一下看一下效果：

然后我们点击查询：

 

我们的wfs地图服务就加载上了，然后点击选择：

我们选择的feature样式会改变，然后再点击编辑：

我们就可以修改feature样式了，然后点击保存，这里我们打开开发者工具看一下网络交互！

可以看到发起了一个wfs的http请求到geoserver服务器，请求的url为：http://localhost:8080/geoserver/wfs?service=wfs，

发送的内容大致为:

  
    
      the_geom
      
        
          
            
              -73.98528635501862 40.768332481384284 -73.98608637 40.76719342 -73.98449242115021 40.767849683761604 -73.98447096347809 40.76647639274598 -73.98299038410187 40.767334699630744 -73.98336657 40.76604531
            
          
        
      
    
    
      modified
      5/28/2001
    
    
      name
      W 56 ST
    
    
      vsam
      15060
    
    
      sourcedate
      3/31/1996
    
    
      sourcetype
      Photogrammetric
    
    
      source_id
      96083
    
    
      borough
      Manhattan
    
    
      feat_code
      2900
    
    
      feat_desc
      Paved Road
    
    
      exported
      05/19/2004
    
    
      feat_type
      0
    
    
      
    
  

如果保存成功，则response的内容大致如下：

  
    0
    1
    0
  
  
  
    
  

有的同学可能保存没有成功，那么就会response就会返回下面的信息：

{http://geoserver.org/nyc_roads}nyc_roads is read-only

这是因为我们在的nyc_roads图层设置了只读服务，即我们不能在服务器上修改这个feature！但是我们是可以在本地修改保存的！

3、我们前面写完了查询、修改feature，下面我们再来写一个增加要素的功能，现在我们该介绍一下如何在前端绘制一个新的要素，并且保存到服务器端，直接上代码如下：

  
    
    
    
   
     
     
    
  
 
  
  新增
  

  


  

运行代码看一下效果：

点击查询：

点击新增：

可以自己绘制一个图形，然后点击保存，我们还是打开开发者工具查看网络传输情况：

在开发者工具界面可以看到http请求：

请求头文件为：

请求内容为：

  
    
      
        
          
            
              -73.99970054626465 40.732669830322266 -73.98974418640137 40.71481704711914 -73.98545265197754 40.730438232421875 -73.98064613342285 40.71636199951172 -73.97360801696777 40.73284149169922
            
          
        
      
      nyc_roads.new.1
      nyc_roads.new.1
      0
      
      
      1
      
      0
      11
      0
      true
    
  

服务器端response的内容为：

  
    
      1
      0
      0
    
    
    
      
        
      
    
  

如果图层设置了只读的限制，那么在上传到服务端时response为：

{http://geoserver.org/nyc_roads}nyc_roads is read-only

4、最后我们再来一个增删改查中的删除功能！直接上代码如下：

  
    
    
    
   
     
     
    
  

  
  选择
  

  


  

运行代码看一下效果：

请大家自己测试删除feature的工作！

到此，我们就完成二零地图开发实战的所有增删改查工作！

我们关于OpenLayers的所有入门开发教程也将告一段落，以后有时间的话我会把一些项目中常用的功能集中到一个项目中，开发一个完全满足上线要求的系统！请大家把我们之前学过的一些功能多写几遍，最后达到融会贯通，然后再进行实际项目的开发锻炼！大家加油！