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

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

article 2024/10/28 3:22:55

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