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 是一种压缩的 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 和 coordinates
    const 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
  • 27
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值