Openlayer使用WMS、WFS、WMTS加载Geoserver发布矢量数据

1、地理信息服务

OGC地理信息服务包括WFS、WMS、WMTS、WCS。
WMS服务(Web Map Service)：通过具有地理空间位置信息的数据制作地图，格式类型可以是PNG、GIF、JPEG，SVG等。
WFS(Web Feature Service)：通过GML传递地理空间数据，支持基于HTTP协议再分布式计算平台上对地理要素增删查改。
WMTS(Web Map Tiles Service):地图切片Web服务。
WCS(Web Coverage Service):提供的是包含了地理位置信息或属性的空间栅格图层。

2、需求

项目需要在geoserver上发布矢量数据，昂开始使用WMTS服务加载矢量切片，后来发现使用矢量切片渲染文本标注是缩放视图，出现大量重复的文本标注。后来又改用WFS加载矢量数据，观察到geoserver官网使用WMS加载矢量数据。所以我将三种方式整理于此。

3、项目实现

• 使用WMS方式加载矢量数据
  这种方式若在geoserver中配置了样式，加载数据后样式不会丢失。

import Image from 'ol/layer/Image'
import ImageWMS from 'ol/source/ImageWMS'
 var format = 'image/png';
    var bounds = [375599.8540000012, 3386915.9619999994,
      386213.8540000003, 3412573.9619999994];
    var source=new ImageWMS({
      ratio: 1,
      url: 'http://localhost:8080/geoserver/waterEutrophication/wms',
      params: {'FORMAT': format,
        'VERSION': '1.1.1',
        "LAYERS": this.checkLayerPoint(this.title),
        "exceptions": 'application/vnd.ogc.se_inimage',
      }
    })
     layerclassindex = new Image({
      opacity:0.1,
      source: source,
    });
    map.addLayer(layerclassindex)

也可以查看geoserver官网提供的代码，查看方式我在加载矢量切片一节中已经提到。可以点击查找Openlayer加载矢量切片

• 使用WFS方式加载矢量数据
  采用WFS加载矢量数据使用ol/layer/Vector、ol/source/Vector
  其中source 可以通过读取geojson文件方式加载，也可以通过查看调用geoserver发布的服务
  采用WFS方式需要自己添加style样式。
  1、读取geojson方式加载

import VectorSource1 from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Map from "ol/Map";
import View from "ol/View";
import bounderyJson from '../../assets/FeaturesData/clip_water_16.GeoJson'
let  singleLayer_Mark1 = new VectorLayer({
  opacity:0.1,
  source: markVector_Res1,
});
let markVector_Res1.addFeatures(
 markVector_Res1.getFormat().readFeatures(bounderyJson),{
    dataProjection: 'EPSG:4326',    // 设定JSON数据使用的坐标系
    featureProjection: 'EPSG:4326' // 设定当前地图使用的feature的坐标系
  });
  view= new View({
      center: [103.83,30.70],
      zoom: 12,
      maxZoom:20,
      minZoom:8,
      projection: projection,
      extent: [-180.0,-90.0,180.0,90.0]
    });
    map = new Map({
    view:view,
    layers: [],
    target: 'mapDIv',
})
 map.addLayer(singleLayer_Mark)

2、使用geoserver发布的WFS服务
关于查看Geoserver发布的服务地址可在官网进行查看。点击对应服务类型

查看对应服务地址所需参数，从而构造地址

import VectorSource1 from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import {bbox} from 'ol/loadingstrategy'
import Map from "ol/Map";
import View from "ol/View";
 var layerTypename="waterEutrophication:roadnetwork";//图层名
    var pointVectorSource = new VectorSource1({
      format: new GeoJSON(),
      url: function(extent) {
        return 'http://localhost:8080/geoserver/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+layerTypename+'&outputFormat=application/json';
      },
      strategy:bbox
    });
    layernetwork = new VectorLayer({
      source: pointVectorSource,
      style:  (feature)=> {
             if(view.getZoom()>=15.5){
                 return this.getFeatureNameColor(feature.get("name"))
             }
             else{
               return this.getFeatureNameColor()
             }
           }
    })
    getFeatureNameColor(name) {
      var style_highlighted = new Style({
        fill: new Fill({
          color: '#ADD8E6'
        }),
        stroke: new Stroke({
          color: '#880000',
          width: 2
        }),
        text: new Text({
          text: (name !== undefined) ? `${name}` : '',//feature.get("name"),
          fill: new Fill({
            color: 'yellow'
          }),
          stroke: new Stroke({
            color: '#880000',
            width: 4
          }),
          scale: 1.2,
        })
      });
      return style_highlighted;
  }
    view= new View({
      center: [103.83,30.70],
      zoom: 12,
      maxZoom:20,
      minZoom:8,
      projection: projection,
      extent: [-180.0,-90.0,180.0,90.0]
    });
    map = new Map({
    view:view,
    layers: [layernetwork],
    target: 'mapDIv',
})

3、使用geoserver发布的WMTS服务去加载矢量切片
这种方法我在Geoserver发布矢量切片服务及使用openlayer调用展示已经写过，这里不做赘述。
但是这种方式我采用样式渲染，出现太多重复label,查询资料说是ol/layer/VectorTile没有计算geom的重复。我采用ol/layer/Vector则不会出现重复文本标注。