openlayer6+geoserver地图服务

一、wms

(一) 学习记录1

1. 调用wms服务

使用GeoServer发布shp数据为WMS服务和WFS服务

GeoServer + shp + Vue +OpenLayers使用

VUE+OPENLAYER系列四：Geoserver 2

2. filter过滤

2.1 参考文章

openlayers学习（三） wms图层过滤条件filter

java cqlfilter_openlayers+geoserver WMS过滤CQL_FILTER查询动态刷新图层

geoserver 踩坑记录

OpenLayers + GeoServer 实现(扩展的)通用查询语言(CQL/ECQL)

3. 代码

http://localhost:38090/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map%3Ajjjcontrol_project3857&bbox=1.2630162394499999E7%2C4307282.428599998%2C1.3341487422500001E7%2C5253950.935800003&width=577&height=768&srs=EPSG%3A3857&styles=&format=application/openlayers

     var sql = "ID ='aedcfa36-dc2e-11e9-b8a7-3052cb7708e8'"
                    
     let controlVectorSource = new TileWMS({
         url: "http://localhost:38090/geoserver/map/wms",
         params: { 
            LAYERS: "map:jjjcontrol_project3857",  // Layers需要指定要显示的图层名
            VERSION: '1.1.0', 
            TILED: true,
            /* filter: ol.format.filter.and(
                  ol.format.filter.like('NAME', 'museam'),
                  ol.format.filter.equalTo('waterway', 'riverbank'))*///多个条件联合在一起
            CQL_FILTER:sql    //属性过滤
          },
          serverType: "geoserver",
          transition: 0
      })
      this.controlLayer = new TileLayer({
          extent: [// 边界
             1.2630162394499999E7,
             4307282.428599998,
             1.3341487422500001E7,
             5253950.935800003
          ],
          source: controlVectorSource,
          style: function () {
              return new Style({
                 fill: new Fill({
                     color: 'rgba(94,129,244, 0.3)'
                 }),
                 stroke: new Stroke({
                     color: 'red',
                     width: 4
                 })
             })
          }
     });

4. 一些问题：

4.1 获取tilewms的feature

很纳闷，没有找的wms获取feature的方法，所以决定不使用wms服务，而是使用wfs服务，这样就可以通过vectorSource来获取featurce了

(二) 学习记录2

1.背景

在geoserver中添加好了样式，希望在前端直接调用，不再加样式。

2.使用TileWMS

3.使用ImageWMS

      this.WMSvector = new ImageLayer({
        source: new ImageWMS({
            url: "http://localhost:38090/geoserver/map/wms",
            params: { 
                'FORMAT': 'image/png',//这里改为png
                'LAYERS': "map:4326Insect3",  // Layers需要指定要显示的图层名
                'VERSION': '1.1.0',
                transparent: "true" //使背景透明，不会覆盖底图
            },
            ratio: 1,
        }),
        zIndex: 3,
      });

4.问题与解决

wms不能实现实时编辑的效果，但是当数据量大时，wms又很有效

后续的修改办法：在用户点击底图后，才能绘制/修改图层

5.其他

openlayers给wms服务图层设置透明度

二、wfs（不能加载geoserver样式）

（一）学习记录1

1. 调用wfs服务

1.1 参考文章

openlayers3调用GeoServer发布的wfs

openlayer3加载geoserver发布的WFS服务

Vue+OpenLayers学习系列（六）OpenLayers 加载 WFS 地图服务（GeoServer）

2. wfs查询 getfeature()

2.1 参考文章

Openlayers5 + Geoserver 实现wfs的属性查询与空间查询

Openlayer4中实现基于Geoserver的WFS服务GetFeature的查询请求

基于Geoserver的WFS服务与Openlayers实现地理查询

openlayer官网示例

开源GIS（七）——openlayers中单击获取要素（深度好文）

3. 遇到的问题

3.1 查看wfs服务+地址

在我本地的geoserver上，查看wfs服务也总是报错，地址我也不知道怎么看。后来用 公司服务器上的geoserver，可以查看wfs服务，并且可以将地址复制下来

3.2 geoserver跨域

在我本地上总是报跨域问题，搜索了一些解决办法，感觉好麻烦啊，就没有去解决。之后，直接用的公司服务器上 发布的地图服务，没有跨域问题了。

参考文章：
openlayer3 加载geoserver发布的WFS服务

GeoServer2.15.0 解决CORS跨域问题

4. 代码

let controlVectorSource = new VectorSource()
this.controlLayer = new VectorLayer({
    source: controlVectorSource,
    style: new Style({
        stroke: new Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2,
        }),
    }),
 });
 var featureRequest = new WFS().writeGetFeature({
     srsName: 'EPSG:3857',
     featureNS: 'cobona.cn',    //命名空间,geo.edu.cn/map
     featurePrefix: 'cobona',    //工作区域,map
     featureTypes: ['cobona:jjjcontrol'],    //图层名
     outputFormat: 'application/json',
     filter: (
          equalToFilter('省份', '北京市')
          equalToFilter('单元名', '清河上段北京市控制单元')
     )  //TODO： 条件查询过滤，怎么拼接多个条件？？  ----------问题已解决
 });

 // then post the request and add the received features to a layer
 fetch('http://192.168.3.101:38090/geoserver/wfs', {
     method: 'POST',
     body: new XMLSerializer().serializeToString(featureRequest)
 }).then(function(response) {
     var clone1 = response.clone()
     var data1 = clone1.text()
     return response.text();
 }).then(function(json) {
     var tmpJosn=json;
     var features = new GeoJSON().readFeatures(json);
     controlVectorSource.addFeatures(features);
     // map.getView().fit(vectorSource.getExtent());
 });

---

（二）学习记录2

1.wfs实现空间查询

openlayers+geoserver+wfs实现空间查询，属性查询

Openlayers5 + Geoserver 实现wfs的属性查询与空间查询

Openlayers5 + Geoserver 实现wfs的属性查询与空间查询

openlayers4+geoserver wfs实现空间分析、属性查询

import {
  and as andFilter,
  equalTo as equalToFilter,
  like as likeFilter,
  or as orFilter,
  intersects as intersectsFilter,
} from "ol/format/filter";


  filter: (
       equalToFilter('省份', '北京市')
       equalToFilter('单元名', '清河上段北京市控制单元')
  )  //TODO： 条件查询过滤，怎么拼接多个条件？？  ----------问题已解决
  
//模糊属性查询
  let name='*'+this.inputSearchPointName+'*'
  filter: likeFilter('用户名称',name)
  
//空间查询--相交
  let coord = ele.getGeometry().getCoordinates();
  var point = new Point(coord);
  filter: intersectsFilter("the_geom", point),

（二）学习记录

1.wfs实现编辑

openlayers wfs 修改

OpenLayer修改WFS中的要素