可以使用封装的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文件生成成功');}