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

可以使用封装的json解析器进行JSON数据获取，读取点的经度、维度、高程等数据，再使用对应的KML文件生成函数使用该源码下载KML文件（固定KML生成：js模板式生成大疆上云kml文件（含详细注释，已封装成函数）-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);}}

生成下载的KML文件：

// 使用前需将传入的jsonData类型转换成数组，Array.from(jsonData)。
import {ElMessage} from 'element-plus'
import kmlTemplate from '../JSONToXML/JSONToKML'
export default function generateKML(jsonData) {// 防止传入的数据为空if (!jsonData || jsonData.length === 0) {ElMessage.warning('请先提供坐标数据');return;}const kmlContent = kmlTemplate(jsonData);const blob = new Blob([kmlContent], { type: 'application/vnd.google-earth.kml+xml' });const url = URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.download = 'DroneRoute.kml';document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(url);ElMessage.success('KML文件生成成功');}