openlayer+ vue 加载本地wfs服务

效果:左边为代码加载的要素，右边为数据库中的gis数据

服务地址：

/geoserver/postgresql/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=postgresql%3Abuildings4547&maxFeatures=50&outputFormat=application%2Fjson

因为为本地尝试：所以用的是vue的代理，不代理的话因为两个服务端口号不一样会导致跨域：
代理：将8080端口，代理到8099端口

  devServer: {
    host: 'localhost',
    port: 8080,
    proxy:
      {
      ['/geoserver']: {
        target: 'http://localhost:8099',
        changeOrigin: true,
      }
    }
  }

.vue 完全代码，其中我发布的服务是4547坐标系的，关于4547坐标系请移步至另外一篇博客查看：openlayer 加载4547坐标系 以及 wfs服务数据（或其他坐标系）跳转

<template>
  <div class="hello" id="map"></div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { TileSuperMapRest } from "@supermap/iclient-ol";
import { Tianditu } from "@supermap/iclient-ol";
import "ol/ol.css";
import GeoJSON from "ol/format/GeoJSON";
import EsriJSON from "ol/format/EsriJSON";
// import Map from 'ol/Map';
import VectorSource from "ol/source/Vector";
// import View from 'ol/View';
// import XYZ from 'ol/source/XYZ';
import { Stroke, Style } from "ol/style";
import VectorLayer from "ol/layer/Vector";
import { bbox as bboxStrategy } from "ol/loadingstrategy";
import { register } from "ol/proj/proj4";
import proj4 from "proj4";
import Projection from "ol/proj/Projection";
import { fromLonLat } from "ol/proj";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  mounted() {
    proj4.defs(
      "EPSG:4547",
      "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
    );
    register(proj4);
    const projection = new Projection({
      code: "EPSG:4547",
      units: "metre",
      extent: [344577.88, 2380651.49, 655422.12, 5036050.38],
    });
    let wfsUrlGeoserver =
      "/geoserver/postgresql/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=postgresql%3Abuildings4547&maxFeatures=50&outputFormat=application%2Fjson";
    const vectorSource = new VectorSource({
      format: new GeoJSON(),
      loader: function (extent, resolution, projection, success, failure) {
        const proj = projection.getCode();
        const url = wfsUrlGeoserver;
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        const onError = function () {
          vectorSource.removeLoadedExtent(extent);
          failure();
        };
        xhr.onerror = onError;
        xhr.onload = function () {
          if (xhr.status == 200) {
            const features = vectorSource
              .getFormat()
              .readFeatures(xhr.responseText, {
                dataProjection: "EPSG:4547",
                // featureProjection:"EPSG:4547",
              });
            //  const features = vectorSource.getFormat()
            //  console.log('这是features',features);
            vectorSource.addFeatures(features);
            success(features);
          } else {
            onError();
          }
        };
        xhr.send();
      },
    });

    const vector = new VectorLayer({
      source: vectorSource,
      style: new Style({
        stroke: new Stroke({
          color: "rgba(255, 255, 255, 1.0)",
          width: 5,
        }),
      }),
    });
    var url =
      "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
    var map = new Map({
      target: "map",
      view: new View({
        center: [495186.517, 2496151.273600001],
        zoom: 8,
        projection: projection,
      }),
      layers: [
        new TileLayer({
          className: "baseLayerClass",
          source: new Tianditu({
            key: "1d109683f4d84198e37a38c442d68311",
          }),
        }),
        new TileLayer({
          source: new Tianditu({
            key: "1d109683f4d84198e37a38c442d68311",
            isLabel: true,
            projection: "EPSG:4326",
          }),
        }),
        vector,
      ],
    });

    map.on("click", (e) => {
      console.log(e);
      let coord = map.getCoordinateFromPixel(e.pixel);
      console.log("coord");
      console.log(coord);
    });
    // var layer = new TileLayer({
    //       className:"baseLayerClass",
    //       source: new TileSuperMapRest({
    //           url: url,
    //           wrapX: true
    //   }),
    //   projection: 'EPSG:4326'
    // });

    // map.addLayer(vector);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>