当前位置:   article > 正文

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

kmz格式

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

在这里插入图片描述


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
  • 1

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.');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

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.');
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

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

Name: Example Point
Description: A simple point
Coordinates: -122.0822035,37.4222898,0
  • 1
  • 2
  • 3
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/1015548
推荐阅读
相关标签
  

闽ICP备14008679号