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>

三、运行结果

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