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

一、首先用 GeoServer 发布地图服务

首先WFS的介绍参见：

https://zhuanlan.zhihu.com/p/83473651；

https://zhuanlan.zhihu.com/p/83930840；

在 Layer Preview 里面选择一个图层，在 All Formats 里面可以选择 GeoJson

二、OpenLayers 读取 WFS 服务

<template>
  <div id="map" ref="rootmap">
  </div>
</template>
<script>
  import 'ol/ol.css';
  import Map from 'ol/Map';
  import View from 'ol/View';
  import {Vector as VectorLayer,Tile as TileLayer} from 'ol/layer';
  import {Vector as VectorSource,OSM} from 'ol/source';
  import {GeoJSON} from 'ol/format';
  import {bbox} from 'ol/loadingstrategy'
  import {Style,Stroke,Circle,Fill} from 'ol/style';
  import { Projection } from 'ol/proj'

  export default{
    name: 'OlWFS',
    data(){
      return{
          map: null
      };
    },
    mounted(){     //可以出来结果
      //view设置
      let view = new View({
        center: [117.234, 31.782],
        zoom: 2,
        maxZoom: 18,
        minZoom: 1
      });

      //创建wfs资源
      let wfsVectorSource = new VectorSource({
        format: new GeoJSON(),
        projection: 'EPSG:4326',
        url: 'http://localhost:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger%3Achina&maxFeatures=50&outputFormat=application%2Fjson',
        strategy: bbox
      });
      //创建wfs图层，注意需要设置好描边样式，否则不展示效果出来
      let wfsVectorLayer = new VectorLayer({
        source: wfsVectorSource,
        style: new Style({
          image:new Circle({
            radius: 5,
            fill: new Fill({
              color: "#3885ff",
              opacity: 0.5
            })
          }),
          stroke:new Stroke({
              color: 'blue',
              width: 5
            }
          )
        }),
        visible: true
      });

      //创建一个map
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new OSM()   //这个会出现底图
          }),
          wfsVectorLayer
        ],
        target: "map",
        view: view
      });

    }
  };

</script>

<style>
  #map{
    height:800px;
    width: 1400px;
  }
  /*隐藏ol的一些自带元素*/
  .ol-attribution,.ol-zoom { display: none;}

</style>

三、结果如下图所示。不过有个奇怪的地方是，我白天做的时候总是显示跨域错误，晚上再试的时候又出来了（白天按https://www.jianshu.com/p/9773ec789ba4?tdsourcetag=s_pctim_aiomsg这个链接里面最后的方法试了不行，晚上又按这个链接里面所有的方法试了才行，可能是这个原因吧）。