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文件生成成功');}

效果:

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity中GameObject介绍

在 Unity 中,Cube和Sphere等基本几何体是 Unity 引擎的内置预制体(Prefabs),它们属于 Unity 中的GameObject 系统,可以在 Unity 的 Hierarchy 视图或 Scene 视图中右键点击,然后在弹出的菜单中选择 3D Obje…

MySQL 数据出海之数据同步方案

优质博文:IT-BLOG-CN 数据库出海流程 【1】业务出海:1)数据库出海;2)应用出海;3)流量分发; 【2】数据库出海:涉及业务方、信安、DBA和框架组。 数据库出海&#xff0c…

Go 语言基础教程:7.Switch 语句

在这篇教程中,我们将学习 Go 语言中的 switch 语句,它是条件分支的重要结构。我们将通过一个示例程序逐步解析 switch 的不同用法。 package mainimport ("fmt""time" )func main() {i : 2fmt.Print("Write ", i, " …

Python画笔案例-094 绘制 神奇彩条动画

1、绘制 神奇彩条动画 通过 python 的turtle 库绘制 神奇彩条动画,如下图: 2、实现代码 绘制 神奇彩条动画,以下为实现代码: """神奇彩条动画.py一个用海龟画图的图章功能配合颜色渐变和动画原理做成的动画。 """ from random import randi…

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

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

MySQL-32.索引-操作语法

一.语法 二.代码实现 指定某个字段为主键,其实就是建立一个主键索引。而指定某个字段唯一,就是建立一个唯一索引。 -- 索引 -- 创建:为tb_emp表的name字段建立一个索引 create index idx_emp_name on tb_emp(name);-- 查询:查…

Handler、Looper、message进阶知识

Android Handler、Looper、Message的进阶知识 在Android开发中,Handler、Looper和Message机制是多线程通信的核心。为了深入理解并优化它们的使用,尤其是在高并发和UI性能优化中,可以利用一些高级特性。 1. Handler的高阶知识 Handler在基本…

Axure随机验证码高级交互

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! 课程主题:字母数字随机验证码高级交互 主要内容:4位字母数字随机验证码生成、错误提示与State状态同步 应用场景:登录验证码、其他类…

Linux - 文件描述符 | 文件系统 | 软硬链接

文章目录 一、文件描述符1、补充知识2、文件描述符是什么?3、处理文件的系统调用接口4、文件描述符的分配规则5、简单理解Linux下一切皆文件6、FILE7、重定向 二、文件系统三、软硬链接1、软连接2、硬链接3、软硬链接对比 一、文件描述符 1、补充知识 (…

5G NR:BWP入门

简介 5G NR 系统带宽比4G LTE 大了很多,4G LTE 最大支持带宽为20MHz, 而5G NR 的FR1 最大支持带宽为100MHz, FR2 最大支持带宽为 400MHz。 带宽越大,意味了终端功耗越多。为了减少终端的功耗,5G NR 引入了BWP(Band Wid…

从零实现数据结构:一文搞定所有排序!(下集)

1.快速排序 思路框架: 在有了前面冒泡选择插入希尔排序之后,人们就在想能不能再快一点,我们知道排序算法说人话就是把大的往后放小的往前放,问题就在于如何更快的把大的挪到数组队尾小的挪到数组前面。这里我们先总结一下上集前…

NVR录像机汇聚管理EasyNVR多品牌NVR管理工具/设备视频报警功能详解

在科技日新月异的今天,视频监控系统作为现代社会的“第三只眼”,正以前所未有的方式深刻影响着我们的生活与社会结构。从公共场所的安全监控到个人生活的记录分享,视频监控系统以其独特的视角和功能,为社会带来了诸多好处&#xf…

【Linux】————磁盘与文件系统

作者主页: 作者主页 本篇博客专栏:Linux 创作时间 :2024年10月17日 一、磁盘的物理结构 磁盘的物理结构如图所示: 其中具体的物理存储结构如下: 磁盘中存储的基本单位为扇区,一个扇区的大小一般为512字…

Python 自动化运维:Python基础知识

Python 自动化运维:Python基础知识 目录 📊 Python 基础复习 数据类型、控制结构与常用函数面向对象编程(OOP)与类的使用函数式编程概念与 lambda 表达式异常处理与日志记录的基本实践 1. 📊 Python 基础复习 数据…

二十二、Python基础语法(模块)

模块(module):在python中,每个代码文件就是一个模块,在模块中定义的变量、函数、类别人都可以直接使用,如果想要使用别人写好的模块,就必须先导入别人的模块,模块名须满足标识符规则(由字母、数…

SwiftUI(三)- 渐变、实心形状和视图背景

引言 在现代的应用的UI设计中,渐变和形状背景为界面带来了丰富的层次与视觉效果,而SwiftUI提供了一系列简单且强大的API,可以轻松实现这些效果。在这篇文章中,我们将介绍SwiftUI中的渐变、实心形状和视图背景的基础用法&#xff…

【论文阅读】Learning persistent homology of3D point clouds

摘要 motivation:PD计算过程非常耗时,严重限制了TDA的应用 本文提出了一种端到端的神经网络模型TopologyNet,用于直接从3D点云数据中拟合拓扑表示。TopologyNet显著减少了生成拓扑表示的计算时间,并在实际实例中保持了较小的近似…

Python4

4. 更多控制流工具 除了刚介绍的 while 语句&#xff0c;Python 还用了一些别的。我们将在本章中遇到它们。 4.1. if 语句 if elif else if x<0: x 0 print(Negative changed to zero) elif x0: print( zero) else: print(More) 4.2. for 语句 Pyth…

2024.7最新子比主题zibll7.9.2开心版源码+授权教程

授权教程&#xff1a; 1.进入宝塔搭建一个站点 绑定 api.zibll.com 域名 并上传 index.php 文件 2.设置伪静态 3.开启SSL证书&#xff0c;找一个能用的域名证书&#xff0c;将密钥(KEY)和证书(PEM格式)复制进去即可 4.在宝塔文件地址栏中输入 /etc 找到 hosts文件并打开&a…

【Docker】docker | 部署nginx

一、概述 记录下nginx的部署流程&#xff1b;将conf配置文件映射到宿主机 前提依赖&#xff1a;自行准备nginx的镜像包 二、步骤 1、运行、无映射 docker run --name nginx -p 80:80 -d nginx:1.18.0-alpine 80&#xff1a;80&#xff0c;前面是宿主机端口&#xff1b;如果冲…