二十.WFS

前言

用户利用这些数据可以创建他们自己的地图与应用、数据格式转换以及底层的地理操作。这类返回地理要素数据的规范称为 WFS（Web Feature Service——Web 要素服务）。

只要服务器和客户端遵循统一规范，那么服务器与客户端传送的数据可以是任意格式的。为了规范通过 Web 服务发送矢量数据的过程，OGC 制定了 WFS 规范。

那么 WMS 与 WFS 有什么区别呢？

WMS 是由服务器将一地图图像发送给客户端，而 WFS 是服务器将矢量数据发送给客户端，也就是在使用 WMS 时地图由服务器绘制，在使用 WFS 时地图由客户端绘制。

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
  
  <script>
export default {
  mounted() {
    let {
      format: {
        GeoJSON,
        WFS,
        filter: { and: andFilter, equalTo: equalToFilter, like: likeFilter },
      },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { XYZ, Vector: VectorSource },
      style: { Stroke, Style },
      proj: { fromLonLat },
    } = ol;
    const vectorSource = new VectorSource();
    const vector = new VectorLayer({
      source: vectorSource,
      style: new Style({
        stroke: new Stroke({
          color: "rgba(0, 0, 255, 1.0)",
          width: 2,
        }),
      }),
    });
    const attributions =
      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
      '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
    const raster = new TileLayer({
      source: new XYZ({
        attributions: attributions,
        url:
          "https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=" +
          mapkeys.maptiler,
        maxZoom: 20,
      }),
    });
    const map = new Map({
      layers: [raster, vector],
      target: this.$refs.map,
      view: new View({
        center: [-8908887.277395891, 5381918.072437216],
        maxZoom: 19,
        zoom: 12,
      }),
    });
    const featureRequest = new WFS().writeGetFeature({
      srsName: "EPSG:3857",
      featureNS: "http://openstreemap.org",
      featurePrefix: "osm",
      featureTypes: ["water_areas"],
      outputFormat: "application/json",
      filter: andFilter(
        likeFilter("name", "Mississippi*"),
        equalToFilter("waterway", "riverbank")
      ),
    });
    fetch("https://ahocevar.com/geoserver/wfs", {
      method: "POST",
      body: new XMLSerializer().serializeToString(featureRequest),
    })
      .then(function (response) {
        return response.json();
      })
      .then(function (json) {
        const features = new GeoJSON().readFeatures(json);
        vectorSource.addFeatures(features);
        map.getView().fit(vectorSource.getExtent());
      });
  },
};
</script>