当前位置：首页 > news >正文

vue通过JSON文件生成WPML文件源码

news 2024/10/24 22:20:45

可以使用封装的json解析器进行JSON数据获取，读取点的经度、维度、高程等数据，再使用对应的WPML文件生成函数使用该源码下载WPML文件（固定WPML生成：js模板式生成大疆上云wpml文件（含详细注释，已封装成函数）-CSDN博客）

自封装的JSON解析器：

import { ref } from 'vue';
import { ElMessage } from 'element-plus';
export default function handleFileChange(event) {const jsonData = ref(null);const file = event.target.files[0];if (file && file.type.match('application/json')) {const reader = new FileReader();reader.onload = (e) => {try {jsonData.value = JSON.parse(e.target.result);ElMessage.success('JSON 文件解析成功!');} catch (error) {console.error('解析 JSON 时出错:', error);ElMessage.error('解析 JSON 时出错!');}};reader.readAsText(file);}}

生成下载的WPML文件：

// 使用前需将传入的jsonData类型转换成数组，Array.from(jsonData)。
import wpmlTemplate from '../JSONToXML/JSONToWPML.js';
import {ElMessage} from 'element-plus'
export default function generateWPML(jsonData) {// 防止传入的数据为空if (!jsonData || jsonData.length === 0) {ElMessage.warning('请先提供坐标数据');return;}const wpmlContent = wpmlTemplate(jsonData);const blob = new Blob([wpmlContent], { type: 'application/xml' }); // .wpml 文件的MIME类型是application/xmlconst url = URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.download = 'DroneMission.wpml';document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(url);ElMessage.success('WPML文件生成成功');}