欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > KMZ格式详解,javascript写入读取KMZ示例

KMZ格式详解,javascript写入读取KMZ示例

2024/11/30 6:51:28 来源:https://blog.csdn.net/cuclife/article/details/140943607  浏览:    关键词:KMZ格式详解,javascript写入读取KMZ示例

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。

No.内容链接
1Openlayers 【入门教程】 - 【源代码+示例300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

    • 一、KMZ 格式的基本结构
    • 二、KMZ 格式GIS实战示例
      • 1、vue+leaflet 上传KMZ文件,并在map上显示
      • 2、vue+openlayers上传KMZ文件并在map上解析显示
      • 3、cesium加载kmz文件,显示图形
    • 三、javascript 创建和读取 KMZ 文件
      • 1、安装所需的库
      • 2、写入 KMZ 文件
      • 3、读取 KMZ 文件


KMZ 是一种压缩的 KML 文件格式,它使用 ZIP 压缩算法将一个或多个 KML 文件和相关的多媒体资源(如图像、图标等)打包到一个 ZIP 文件中。KMZ 文件可以在 Google Earth 和其他支持 KMZ 格式的地理信息系统软件中打开。

一、KMZ 格式的基本结构

KMZ 文件本质上是一个 ZIP 文件,其中包含一个或多个 KML 文件和可能的附加资源文件。KMZ 文件可以包含以下组件:

  1. kml文件:主 KML 文件,描述地理信息。
  2. 图像文件:与 KML 文件关联的图像文件,如地标图标。
  3. 其他资源:其他多媒体资源,如音频或视频文件。

二、KMZ 格式GIS实战示例

1、vue+leaflet 上传KMZ文件,并在map上显示

https://dajianshi.blog.csdn.net/article/details/129024175

在这里插入图片描述

2、vue+openlayers上传KMZ文件并在map上解析显示

https://dajianshi.blog.csdn.net/article/details/126280496

在这里插入图片描述

3、cesium加载kmz文件,显示图形

https://dajianshi.blog.csdn.net/article/details/130018250
在这里插入图片描述

三、javascript 创建和读取 KMZ 文件

为了创建和读取 KMZ 文件,我们需要使用 Node.js 并安装一些额外的库,例如 adm-zip 用于处理 ZIP 文件,以及 xml-jsxml2js 用于处理 KML 文件。

1、安装所需的库

首先确保你已经安装了 Node.js 和 npm,然后运行以下命令来安装必要的库:

npm install adm-zip xml-js xml2js

2、写入 KMZ 文件

下面是一个简单的示例,展示如何创建一个包含 KML 文件的 KMZ 文件。

const fs = require('fs');
const AdmZip = require('adm-zip');
const xmlBuilder = require('xml-js');// 创建 KML 数据
const kmlData = {"kml": {"@_xmlns": "http://www.opengis.net/kml/2.2","Document": {"name": "My KML Document","Placemark": {"name": "Example Point","description": "A simple point","Point": {"coordinates": "-122.0822035,37.4222898,0"}}}}
};// 将 KML 数据转换为 XML 字符串
const options = { compact: true, spaces: 4 };
const kmlXml = xmlBuilder.js2xml(kmlData, options);// 创建 KMZ 文件
const zip = new AdmZip();// 添加 KML 文件到 ZIP
zip.addFile('example.kml', Buffer.from(kmlXml));// 可选:添加其他文件,如图像
// zip.addLocalFile('icon.png');// 写入 KMZ 文件
zip.writeZip('example.kmz');console.log('KMZ file has been written.');

3、读取 KMZ 文件

下面是一个简单的示例,展示如何从 KMZ 文件中读取 KML 文件,并解析其内容。

const fs = require('fs');
const AdmZip = require('adm-zip');
const xmlParser = require('xml2js');// 读取 KMZ 文件
const zip = new AdmZip('example.kmz');// 解压 KMZ 文件中的 KML 文件
const kmlEntries = zip.getEntries().filter(entry => entry.entryName.endsWith('.kml'));if (kmlEntries.length > 0) {const kmlEntry = kmlEntries[0];const kmlContent = zip.readAsText(kmlEntry);// 解析 KML 文件xmlParser.parseString(kmlContent, (parseErr, result) => {if (parseErr) throw parseErr;// 获取第一个 Placemark 的 name 和 coordinatesconst placemark = result.kml.Document[0].Placemark[0];const name = placemark.name[0];const description = placemark.description ? placemark.description[0] : '';const coordinates = placemark.Point[0].coordinates[0];console.log(`Name: ${name}`);console.log(`Description: ${description}`);console.log(`Coordinates: ${coordinates}`);});
} else {console.log('No KML files found in the KMZ archive.');
}

示例输出
当运行上述读取代码时,控制台将输出:

Name: Example Point
Description: A simple point
Coordinates: -122.0822035,37.4222898,0

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com