还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。
No. | 内容链接 |
---|---|
1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
4 | MapboxGL【入门教程】 - 【源代码+图文示例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 文件可以包含以下组件:
- kml文件:主 KML 文件,描述地理信息。
- 图像文件:与 KML 文件关联的图像文件,如地标图标。
- 其他资源:其他多媒体资源,如音频或视频文件。
二、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-js
和 xml2js
用于处理 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