通过Vue.js的axios请求WFS数据并处理请求回来的XML文件

本文链接：https://blog.csdn.net/traceur0529/article/details/104479561

本文介绍了前端小白如何使用Vue.js的axios请求WFS接口获取XML数据，并详细阐述了从XML中提取节点数据的过程，包括DOMParser、getElementsByTagName、innerHTML、split和parseFloat等JavaScript方法的应用。

摘要由CSDN通过智能技术生成

前端小白的第一个博客

前言

这个是在GIS开发过程中遇到的一个小问题，因为里面包含了蛮多的知识点，故将其记录，废话不多说进入正文！

正文

此次需要解决的问题是通过wfs接口来获取到一些需要的内容，然后以这些内容为基础进行一系列的操作。以下展示的主要是获取wfs中的范围经纬度信息，一共分为俩大步。

一、发起axios请求

此步骤主要就是发起一个axios请求然后在请求到数据以后调用第二步的从XML中提取节点数据方法，然后将方法返回的数据对象定义一个变量存储然后打印出对象内的经纬度数组信息。

以下是具体的getXMLDate方法

getXMLDate(){
   
	this.axios({
   
		methods:"GET",
	    url: "http://localhost:8080/geoserver/smap/wfs?service=wfs&version=1.1.0&request=GetCapabilities",
	    // get请求用params携带请求信息(这里无请求信息，所以是个空对象)
	    params:{
   }
	}).then(res=>{
   
		// 定义一个变量存储 调用从XML中提取节点数据方法 返回的数据
		let resData=this.getXMLNode(