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

news2024/10/28 5:27:18

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

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2225212.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从病理AI的基础模型发展历程,看未来的医学AI发展趋势|个人观点·24-10-23

小罗碎碎念 在临床相关的人工智能(AI)模型发展方面,传统上需要大量标注数据集,这使得AI的进步主要围绕大型中心和私营企业展开。所以,在这期推文中,我会介绍一些已经商用的模型,并且为计划进军…

Minio文件服务器:SpringBoot实现文件上传

在Minio文件服务器部署成功后(参考上篇文章Minio文件服务器:安装)接下来我们通过SpringBoot框架写一个接口,来实现文件的上传功能:文件通过SpringBoot接口,上传到Minio文件服务器。并且,如果上传的文件是图片类型&…

裴蜀定理与欧几里得算法——蓝桥杯真题中的应用

目录 裴蜀定理(Bzouts Theorem)1、定义2、推论3、欧几里得算法4、多个整数的裴蜀定理扩展 真题挑战解题思路代码实现与详细注释代码解析 裴蜀定理(Bzout’s Theorem) 1、定义 对于任意两个整数 a 和 b ,如果它们的最…

Gateway 统一网关

一、初识 Gateway 1. 为什么需要网关 我们所有的服务可以让任何请求访问,但有些业务不是对外公开的,这就需要用网关来统一替我们筛选请求,它就像是房间的一道门,想进入房间就必须经过门。而请求想要访问微服务,就必须…

聚链成网,趣链科技参与 “跨链创新联合体”建设

近日,2024全球数商大会在上海举办。大会由上海数据集团和上海市数商协会联合主办,上海市数据局和浦东新区人民政府支持,以“数联全球,商通未来——‘链’接数字经济新未来”为主题,聚焦区块链技术和应用场景展开。 会上…

Windows生成公钥和私钥

1、打开命令提示符或 PowerShell: 按下 Win R,输入 cmd 或 powershell,然后按 Enter 打开命令提示符或 PowerShell 窗口。 2、生成密钥对: 输入以下命令生成 RSA 密钥对 ssh-keygen -t rsa -b 2048-t rsa 表示生成 RSA 类型的密…

开源模型应用落地-Qwen2-VL-7B-Instruct-vLLM-OpenAI API Client调用

一、前言 学习Qwen2-VL ,为我们打开了一扇通往先进人工智能技术的大门。让我们能够深入了解当今最前沿的视觉语言模型的工作原理和强大能力。这不仅拓宽了我们的知识视野,更让我们站在科技发展的潮头,紧跟时代的步伐。 Qwen2-VL 具有卓越的图…

android studio编译错误提示无法下载仓库

一、调整方法之一 buildscript {repositories {google()jcenter()//maven { url https://maven.aliyun.com/repository/google }//maven { url https://maven.aliyun.com/repository/central }}dependencies {// classpath "com.android.tools.build:gradle:4.1.1"c…

Python金色流星雨

系列目录 序号直达链接爱心系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3Python无限弹窗满屏表白代码4Python李峋同款可写字版跳动的爱心5Python流星雨代码6Python漂浮爱心代码7Python爱心光波代码8Python普通的玫瑰花代码9Python炫酷的玫瑰花代码10Python多…

算法的学习笔记—翻转单词顺序列(牛客JZ73)

😀前言 在《剑指 Offer》系列题中,有一道关于翻转单词顺序的经典题目。给定一个由多个单词组成的字符串,需要将每个单词的顺序颠倒。这道题考察了对字符串的操作技巧,尤其是如何在限定空间内完成字符串的翻转。本文将详细解析这道…

吉客云与金蝶云星空系统高效数据对接实践

调拨出库红字对接分步式调入(退货)案例分享:吉客云数据集成到金蝶云星空 在企业的日常运营中,数据的高效流转和准确对接是实现业务流程自动化和优化的重要环节。本文将聚焦于一个具体的系统对接集成案例——如何将吉客云的数据无缝集成到金蝶云星空&…

阿里云物联网的通信方式

阿里云物联网通信的两种方式,一个是物模型(分为服务,事件,属性),一个是自定义topic(要另外设置数据流转) 1.使用产品内的功能定义,(其实也就是Topic中定义好的…

Prompt Engineering (Prompt工程)

2 prompt工程2大原则 2.1 给出清晰&#xff0c;详细的指令 策略1&#xff1a;使用分割符清晰的指示输出的不同部分&#xff0c;比如"",<>,<\tag>等分隔符 策略2&#xff1a;指定一个结构化的输出&#xff0c;比如json,html等格式 策略3&#xff1a;要…

重学SpringBoot3-Spring WebFlux之SSE服务器发送事件

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ Spring WebFlux之SSE服务器发送事件 1. 什么是 SSE&#xff1f;2. Spring Boot 3 响应式编程与 SSE为什么选择响应式编程实现 SSE&#xff1f; 3. 实现 SSE 的基本步骤3.…

【JavaEE】【多线程】volatile,wait/notify

目录 一、volatile关键字1.1 内存可见性1.2 volatile解决内存可见性问题 二、wait和notify2.1 wait2.2 notify2.3 使用例子2.3.1 例子12.3.2 例子二 一、volatile关键字 volatile可以保证内存可见性&#xff0c;只能修饰变量。 1.1 内存可见性 在前面介绍线程不安全原因时介…

AI编译器与TVM

由于AI芯片的特殊性和高度定制化&#xff0c;为了兼容硬件的多样性&#xff0c;AI模型必须能被高效地映射到各种AI芯片上。AI编译器将深度学习框架描述的AI模型作为输入&#xff0c;将为各种AI芯片生成的优化代码作为输出。AI编译器的目标是通过编译优化的方法将深度学习框架产…

Git的原理和使用(六)

本文主要讲解企业级开发模型 1. 引入 交付软件的流程&#xff1a;开发->测试->发布上线 上面三个过程可以详细划分为一下过程&#xff1a;规划、编码、构建、测试、发 布、部署和维护 最初&#xff0c;程序⽐较简单&#xff0c;⼯作量不⼤&#xff0c;程序员⼀个⼈可以完…

2025 - AI人工智能药物设计 - 中药网络药理学和毒理学的研究

中药网络药理学和毒理学的研究 TCMSP&#xff1a;https://old.tcmsp-e.com/tcmsp.php 然后去pubchem选择&#xff1a;输入Molecule Name 然后进行匹配&#xff1a;得到了smiles 再次通过smiles&#xff1a;COC1C(CC(C2C1OC(CC2O)C3CCCCC3)O)O 然后再次输入&#xff1a;http…

单体架构VS微服务架构

单体架构&#xff1a;一个包含有所有功能的应用程序 优点&#xff1a;架构简单、开发部署简单缺点&#xff1a;复杂性高、业务功能多、部署慢、扩展差、技术升级困难 如上示意图&#xff0c;应用前端页面&#xff0c;后台所有模块功能都放在一个应用程序中&#xff0c;并部署在…

「C/C++」C++标准库之#include<fstream>文件流

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…