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