33.在 Vue 3 中使用 OpenLayers 上传 KMZ 文件并在地图上显示

前言

在 Web 开发中，地图可视化功能广泛应用于位置服务、地理信息系统（GIS）等领域。OpenLayers 是一个强大且易于使用的 JavaScript 库，它能够帮助我们在网页上展示交互式地图。Vue 3 是一个现代的前端框架，它的响应式系统和 Composition API 使得开发变得更加高效和灵活。在这篇文章中，我们将介绍如何在 Vue 3 中使用 OpenLayers 上传 KMZ 文件，并将其中包含的地理信息在地图上展示。

1. 什么是 KMZ 文件？

1.1 KMZ 文件简介

KMZ 文件是一种压缩格式，通常用于存储包含地理信息的 KML 文件。KML（Keyhole Markup Language）是 Google Earth 和 Google Maps 等应用程序使用的 XML 格式，用于表示地理数据（如点、线、面、多边形、路径等）。而 KMZ 文件则是将 KML 文件压缩成一个 .zip 格式的文件，通常还会包含其他资源，如图片和样式文件。

KML 文件：用于描述地图上的对象和空间数据。
KMZ 文件：是 KML 文件的压缩版本，能够减少文件大小，并且通常包含多个资源文件。

1.2 KMZ 文件结构

KMZ 文件内部通常包含一个或多个 KML 文件和其他资源（如图标、图片等）。当解压 KMZ 文件时，得到的主要文件是 KML 文件。KMZ 文件的结构非常简单，通常包括：

一个 KML 文件，存储地图元素的定义。
可选的资源文件，如图标、图片等。

1.3 示例 KML 文件

下面是一个简单的 KML 文件示例，描述了一个位于 Google Earth 上的地点标记。

<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <name>Simple KML Example</name> <Placemark> <name>Simple Placemark</name> <description>Sample KML File</description> <Point><coordinates>-122.0822035425683,37.42228990140251,0</coordinates> </Point> </Placemark></Document> 
</kml>

在这个 KML 文件中，我们定义了一个 Placemark 元素，包含一个 Point（坐标点），并指定了它的位置为：经度 -122.0822035425683，纬度 37.42228990140251。

2. 在 Vue 3 中使用 OpenLayers 上传 KMZ 文件

2.1 安装依赖

首先，确保你的项目中已经安装了 Vue 3 和 OpenLayers。如果没有安装，可以使用以下命令进行安装：

npm install vue@next 
npm install ol 
npm install jszip

jszip 用于解压 KMZ 文件，OpenLayers 用于地图的展示和地理数据的加载。

2.2 Vue 3 组件代码

接下来，我们将创建一个 Vue 3 组件，该组件将能够：

上传 KMZ 文件
解压并读取 KML 数据
在地图上展示 KML 文件中的地理信息

以下是完整的 Vue 3 组件代码：

<!--* @Author: 彭麒* @Date: 2024/12/18* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><div class="container"><!-- 标题 --><h1>在Vue3中使用OpenLayers上传KMZ文件，并在map上显示</h1><h4><!-- 文件选择输入框 --><input style="margin-top: 16px" type="file" id="fileselect" accept=".kml,.kmz,.zip"/></h4><!-- 地图容器 --><div id="vue-openlayers"></div></div>
</template><script setup>
import {ref, onMounted} from 'vue'; // 引入Vue的ref和onMounted函数
import 'ol/ol.css'; // 引入OpenLayers的CSS样式
import Map from 'ol/Map'; // 引入OpenLayers的Map类
import View from 'ol/View'; // 引入OpenLayers的View类
import SourceVector from 'ol/source/Vector'; // 引入OpenLayers的矢量数据源类
import LayerVector from 'ol/layer/Vector'; // 引入OpenLayers的矢量图层类
import KML from 'ol/format/KML'; // 引入OpenLayers的KML格式类
import Tile from 'ol/layer/Tile'; // 引入OpenLayers的瓦片图层类
import OSM from 'ol/source/OSM'; // 引入OpenLayers的OSM数据源类
import {fromLonLat} from 'ol/proj'; // 引入OpenLayers的坐标转换函数
import Fill from 'ol/style/Fill'; // 引入OpenLayers的填充样式类
import Stroke from 'ol/style/Stroke'; // 引入OpenLayers的描边样式类
import Style from 'ol/style/Style'; // 引入OpenLayers的样式类
import Circle from 'ol/style/Circle'; // 引入OpenLayers的圆形样式类
import Text from 'ol/style/Text'; // 引入OpenLayers的文本样式类
import JSZip from 'jszip'; // 引入JSZip库// 定义地图和矢量数据源的引用
const map = ref(null);
const source = ref(new SourceVector({wrapX: false, // 禁用X轴的环绕format: new KML({extractStyles: false}), // 使用KML格式，不提取样式
}));// 随机生成RGBA颜色
const randomRgbaColor = () => {const r = Math.floor(Math.random() * 256); // 随机生成红色分量const g = Math.floor(Math.random() * 256); // 随机生成绿色分量const b = Math.floor(Math.random() * 256); // 随机生成蓝色分量const alpha = 1; // 透明度设为1return `rgb(${r},${g},${b},${alpha})`; // 返回RGBA颜色字符串
};// 设置样式
const mystyle = (fea) => {return new Style({fill: new Fill({color: 'purple', // 填充颜色为紫色}),stroke: new Stroke({color: 'orange', // 描边颜色为橙色}),image: new Circle({radius: 10, // 圆形半径为10fill: new Fill({color: randomRgbaColor()}), // 填充颜色为随机生成的RGBA颜色stroke: new Stroke({color: '#fff', width: 2}), // 描边颜色为白色，宽度为2}),text: new Text({text: fea.get('name') || ' ', // 文本内容为要素的name属性或空格font: '12px Calibri,sans-serif', // 字体样式fill: new Fill({color: '#000'}), // 填充颜色为黑色stroke: new Stroke({color: '#fff', width: 2}), // 描边颜色为白色，宽度为2offsetX: '20', // X轴偏移量为20offsetY: '20', // Y轴偏移量为20}),});
};// 读取KMZ文件
const readFile = () => {const fileselect = document.querySelector('#fileselect'); // 获取文件选择输入框fileselect.addEventListener('change', (e) => {const files = e.target.files; // 获取选中的文件const filetype = files[0].name.substring(files[0].name.lastIndexOf('.') + 1); // 获取文件类型if (files.length === 0 || filetype !== 'kmz') { // 如果没有选中文件或文件类型不是kmzalert('请重新上传kmz格式的文件！'); // 弹出提示return;}const zip = new JSZip(); // 创建JSZip实例zip.loadAsync(files[0]).then((zip11) => { // 异步加载KMZ文件const kmlFile = zip.file(/.kml$/i)[0].async('string').then((item) => { // 查找并读取KML文件const allFeatures = new KML().readFeatures(item, {dataProjection: 'EPSG:4326', // 数据投影为EPSG:4326featureProjection: 'EPSG:3857', // 要素投影为EPSG:3857});source.value.addFeatures(allFeatures); // 添加要素到矢量数据源source.value.forEachFeature((feature) => {feature.setStyle(mystyle(feature)); // 设置要素样式});});});});
};// 初始化地图
const initMap = () => {map.value = new Map({target: 'vue-openlayers', // 目标容器IDlayers: [new Tile({source: new OSM(), // 使用OSM数据源}),new LayerVector({source: source.value, // 使用矢量数据源}),],view: new View({projection: 'EPSG:3857', // 投影为EPSG:3857center: fromLonLat([-118.2437, 34.0522]), // 设置地图中心为洛杉矶zoom: 5, // 缩放级别为5}),});
};// 生命周期钩子，组件挂载后调用初始化函数
onMounted(() => {initMap(); // 初始化地图readFile(); // 读取KMZ文件
});</script><style scoped>
.container {width: 840px;height: 590px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 400px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>

2.3 代码解释

map 和 source：我们使用 ref 来创建响应式的 map 和 source 对象，source 用于存储地图上的所有矢量数据。
randomRgbaColor：生成一个随机颜色，用于给每个地理元素指定样式。
mystyle：为每个加载的地理元素（如点、线、面等）设置样式。
readFile：通过 jszip 解压 KMZ 文件，并读取其中的 KML 数据。然后使用 OpenLayers 提供的 KML 格式化工具将 KML 文件中的地理信息转化为可用于地图的数据。
initMap：初始化 OpenLayers 地图并将地图容器渲染到页面上。

3. 总结

通过本文的介绍，你应该已经了解了如何在 Vue 3 中结合 OpenLayers 使用 KMZ 文件来展示地图数据。KMZ 文件格式是一个非常适合存储地理信息和资源的格式，而 Vue 3 和 OpenLayers 提供了灵活且强大的功能来展示这些地理数据。在实际项目中，你可以根据需要进一步扩展和自定义地图的展示样式和交互功能。