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

16 篇文章 1 订阅
这篇博客讲述了在 OpenLayers 中如何使用 GeoJSON 格式加载图层信息,以及如何结合 Axios 进行异步请求获取数据。作者遇到在创建 VectorSource 时无法通过 `addFeatures` 方法加载数据的问题,但通过直接在构造函数中提供 features 参数成功解决了问题。同时,强调了由于 Axios 请求的异步性质,必须在接收到数据后添加图层到地图中。
摘要由CSDN通过智能技术生成

一、问题

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>

三、运行结果

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值