关于使用openlayer加载wfs图层

答疑：关于openlayer加载图层为什么使用wfs协议的图层，而不是使用wms图层？

想要知道为什么不适用wms图层反而使用wfs图层，这个我们就需要知道他们二者有什么本质的区别，下面我博主摘录网上关于wfs图层和wms图层的区别，希望对在座各位有所帮助。（数据来源于互联网）

wms-web地图服务

wms是指OGC的web地图服务（Web Map Servie）规范，它利用具有地理空间位置信息的数据制作地图，将地图定义伟地理数据可视的表现。
wms定义了一个规范的http接口，支持标准http协议的get和post请求，但多基于get方式进行服务请求。能够根据用户请求返回相应的地图（包括png，gif，jpeg等栅格形式或者svg和web cgm等矢量形式）
geoserver支持wms1.1.1（最广泛使用的版本）和wms1.3.0

wfs-wfs服务

wfs是指ogc的web矢量（要素）服务（Web Feature Service），返回的是矢量级的地理标记语音gml编码，并提供对矢量的增加、修改、删除等事物操作，是对web地图服务的进一步深入。wfs通过ogc filter构造查询条件，支持基于空间几何关系的查询，基于属性域的查询，还包括基于空间关系和属性域的共同查询。
wms返回的是图层级的地图影响，而wfs返回纯地理数据而设计的，它不包含任何关于绘制数据的建议

如果上面的描述还是不太清除，下面两个截图也方便各位使用
wms返回响应数据：

wfs返回响应数据：

通过对比我们可以看出通过获取到wfs图层之后，我们可以对数据进行处理。比如我们可以在图层上面展示图层名称，并且可以修改对应样式，同时我们还可以对区块信息进行样式调整，比如区块填充颜色和边框颜色等。下面是我项目实现的效果：

废话不多说了，直接整代码

第一步先加载底图

我们现在使用的是wmts的底图，实现方式使用（openlayer）

var tileLoadFun = function (image, src) {
    var client = new XMLHttpRequest();
    client.withCredentials = false;
    client.responseType = 'blob';
    client.open('GET', src);
    client.onload = function () {
      image.getImage().src = URL.createObjectURL(client.response);
    };
    client.setRequestHeader('Accept', '*/*'); // 可以通过加载XMLHttpRequest请求，并配置对应header
    client.send();
  };
  // 
  var matrixIds = [];
  for (var z = 0; z < borderLine.length; ++z) {
    matrixIds[z] = z;
  }
  var view = new ol.View({
    projection: 'EPSG:4326',
    // projection: 'EPSG:4490',
    center: [120.19425250589857512, 33.36711265060023379],
    zoom: 12,
    maxZoom: 20,
    minZoom: 10,
  });
  map = new ol.Map({
    target: 'mapDiv',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.WMTS({
          url: url,
          layer: 'Layers',
          style: 'default',
          matrixSet: 'Custom_Layers',
          projection: 'EPSG:4490',
          format: 'image/png',
          crossOrigin: 'anonymous',
          tileGrid: new ol.tilegrid.WMTS({
            origin: [118.12500000000011, 35.156249999999986],
            resolutions: borderLine,
            matrixIds: matrixIds,
          }),
          tileLoadFunction: tileLoadFun,
        }),
      }),
    ],
    view,
  });

第二步加载wfs图层

var wfsSource = new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      loader: function (extent, resolution, projection) {
        const url = '这个是你的地图api'
        fetch(url)
          .then(function (response) {
            return response.text();
          })
          .then(function (text) {
            var features = wfsSource.getFormat().readFeatures(text, {
              dataProjection: 'EPSG:4490', // 假设 WFS 数据为 EPSG:4326
              featureProjection: projection,
            });
            wfsSource.addFeatures(features);
          });
      },
      strategy: ol.loadingstrategy.bbox,
      zIndex: 1,
    });
    var tiled = new ol.layer.Vector({
      source: wfsSource,
      visible: true,
      style: createStyleFunction(), // 这个方法可以自定义你想实现的样式
    });

 // 将 WFS 层添加到地图（高亮部分）
  var highlightLayer = new ol.layer.Vector({
    source: highlightSource,
    style: function (val) {
      let plan = val.values_.plan;
      switch (plan) {
        case '保留现状内侧管控':
          return planFill3; // 自定义高亮的颜色
        case '外侧美化':
          return planFill2;
        default:
          return planFill1;
      }
    },
  });

第三步把上面图层加载到map里面

我现在使用的是openlayer
map.addLayer(tiled);
// 将高亮图层添加到地图
map.addLayer(highlightLayer);