Vue+OpenLayers学习系列（十一）使用axios加载GeoServer发布的WFS服务

一、问题

1、之前用下面官网的方法 source.addFeatures() 将查询的图层信息加载到 source 里面，但是不知道为啥，死活出不来，也不报错，就很奇怪。

var source = new VectorSource();
source.addFeatures(new GeoJSON({featureProjection: 'EPSG:3857'}).readFeatures(res.data));

后面偶然间用下列方法试了下，发现可以读取出来：

var source = new VectorSource({  //这样可以出来结果
   features: (new GeoJSON({featureProjection:EPSG:3857'})).readFeatures(res.data)
})

2、axios 请求获取数据，需要将 this.map.addLayer(vectorLayer) 放在获取的数据里面，因为请求是异步，放到外面的话可能 vectorLayer 是空的。

axios({
    methods: "GET",
    url: "http://localhost:8080/geoserver/ocean/ows",
    params : {
       service : 'WFS',
       version : '1.0.0',
       request : 'GetFeature',
       typeName : 'ocean:china',  //图层名称
       outputFormat : 'application/json'
     }
   })
   .then((res)=>{
      var source = new VectorSource({  //这样可以出来结果
         features: (new GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(res.data)
      }) 
      let vectorLayer = new VectorLayer({
        source: source,
      });
      this.map.addLayer(vectorLayer);
    }).catch(error=>{
	  console.log("请求失败，失败信息："+ error);
	});

二、完整代码

<template>
  <div id="map" ref="rootmap">
    <el-button @click="addLayers()">添加图层</el-button>
  </div>
</template>
<script>
  import 'ol/ol.css';
  import Map from 'ol/Map';
  import View from 'ol/View';
  import { fromLonLat } from "ol/proj";
  import {Vector as VectorLayer,Tile as TileLayer} from 'ol/layer';
  import {Vector as VectorSource,Stamen} from 'ol/source';
  import {GeoJSON} from 'ol/format';
  import axios from 'axios'

  export default{
    name: 'OlGeoserveAxiosWFS',
    data(){
      return{
          map: null
      };
    },
    methods:{
      addLayers(){
        axios({
            methods: "GET",
            url: "http://localhost:8080/geoserver/ocean/ows",
            params : {
              service : 'WFS',
              version : '1.0.0',
              request : 'GetFeature',
              typeName : 'ocean:china',  //图层名称
              outputFormat : 'application/json'
            }
          })
          .then((res)=>{
            var source = new VectorSource({  //这样可以出来结果
              features: (new GeoJSON({featureProjection:'EPSG:3857'})).readFeatures(res.data)
            })
            let vectorLayer = new VectorLayer({
              source: source,
            });
            this.map.addLayer(vectorLayer);
          }).catch(error=>{
		        console.log("请求失败，失败信息："+ error);
	        });
      }
    },
    mounted(){     //可以出来结果
        this.map = new Map({
            target: 'map',                          // 关联到对应的div容器
            layers: [
                new TileLayer({                 // Stamen底图
                    source: new Stamen({
                        layer: 'watercolor'
                    })
                }),
            ],
            view: new View({                     // 地图视图
                center: fromLonLat([114.38, 23.09]),
                zoom: 6
            })
        });
    }
  };

</script>

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

</style>

三、运行结果

点击上方“添加图层”按钮，可以得出结果。