36.在 Vue 3 中使用 OpenLayers 上传包含 SHP 的 ZIP 文件并显示图形

在 Web 开发中，地图相关的应用需求越来越多。尤其是在地理信息系统（GIS）领域，如何在 Web 中展示地理数据、上传文件并显示图形成为了开发中的一个常见需求。今天，我将为大家介绍如何使用 Vue 3 和 OpenLayers 来实现一个功能：上传包含 SHP 文件的 ZIP 文件，并将图形解析并显示在地图上。

前言

SHP 文件（Shapefile）是常见的地理空间数据格式，由 ESRI（Environmental Systems Research Institute）开发，广泛应用于地理信息系统（GIS）中。SHP 文件实际上是由多个文件组成的，主要包括 .shp（几何数据）、.shx（索引文件）和 .dbf（属性数据）。它们通常被打包成一个 ZIP 文件一起分发和存储。

本篇文章将指导你如何在 Vue 3 中使用 OpenLayers 库来加载包含 SHP 文件的 ZIP 文件，并在地图上显示其图形。

需要的工具

Vue 3：Vue 是一个用于构建用户界面的 JavaScript 框架。
OpenLayers：一个强大的 JavaScript 地图库，可以用来展示地图以及进行地理空间数据的处理。
JSZip：一个 JavaScript 库，用于解压 ZIP 文件。
Shapefile：一个 JavaScript 库，用于解析 SHP 文件。

1. 安装依赖

首先，我们需要安装一些依赖库：

npm install ol shapefile jszip

ol：OpenLayers 库。
shapefile：解析 SHP 文件的库。
jszip：解压 ZIP 文件的库。

2. 创建 Vue 3 组件

接下来，我们将创建一个 Vue 3 组件来实现这个功能。在此组件中，我们将使用 OpenLayers 来显示地图，上传并解析包含 SHP 文件的 ZIP 文件，最后将 SHP 文件中的几何数据显示在地图上。

<!--* @Author: 彭麒* @Date: 2024/12/19* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><div class="container"><div class="font-bold text-[24px]">在vue3中使用OpenLayers: 上传包含shp的zip文件，在map上解析显示图形</div><h4><input style="margin-top: 16px" type="file" id="fileselect" accept=".kml,.kmz,.zip" @change="readFile"/></h4><div id="vue-openlayers"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'; // 引入 Vue 3 的 ref 和 onMounted 钩子
import 'ol/ol.css'; // 引入 OpenLayers 样式
import { Map, View } from 'ol'; // 引入 OpenLayers 的 Map 和 View 类
import SourceVector from 'ol/source/Vector'; // 引入 OpenLayers 的矢量数据源类
import LayerVector from 'ol/layer/Vector'; // 引入 OpenLayers 的矢量图层类
import { Tile } from 'ol/layer'; // 引入 OpenLayers 的瓦片图层类
import OSM from 'ol/source/OSM'; // 引入 OpenLayers 的 OSM 数据源类
import { fromLonLat } from 'ol/proj'; // 引入坐标转换函数
import Fill from 'ol/style/Fill'; // 引入填充样式
import Stroke from 'ol/style/Stroke'; // 引入描边样式
import Style from 'ol/style/Style'; // 引入样式
import Circle from 'ol/style/Circle'; // 引入圆形样式
import Text from 'ol/style/Text'; // 引入文本样式
import GeoJSON from 'ol/format/GeoJSON'; // 引入 GeoJSON 格式解析
import JSZip from 'jszip'; // 正确引入 JSZip
import * as shapefile from 'shapefile'; // 引入 shapefile 解析库// 使用 ref 来管理响应式数据
const map = ref(null); // 定义地图的响应式引用
const source = ref(new SourceVector({ wrapX: false })); // 定义矢量数据源的响应式引用// 随机生成 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: 'yellow', // 填充颜色为黄色}),stroke: new Stroke({color: 'blue', // 描边颜色为蓝色width: 2, // 描边宽度为 2}),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, // 描边宽度为 2}),offsetX: 20, // X 轴偏移量为 20offsetY: 20, // Y 轴偏移量为 20}),});
};// 读取文件并解析 zip 包中的 shp 文件
const readFile = (e) => {const files = e.target.files; // 获取选中的文件const filetype = files[0].name.split('.').pop(); // 获取文件类型if (files.length === 0 || filetype !== 'zip') {alert('请重新上传 zip 格式的文件！'); // 如果没有选中文件或文件类型不是 zip，则提示重新上传return false;}const zip = new JSZip(); // 创建 JSZip 实例zip.loadAsync(files[0]).then((zipData) => {zipData.file(/.shp$/i)[0].async('arraybuffer').then((item) => {shapefile.open(item).then((sourceData) => {sourceData.read().then(function log(result) {if (result.done) return; // 如果读取完成，则返回const feature = new GeoJSON().readFeature(result.value, {dataProjection: 'EPSG:4326', // 数据投影为 EPSG:4326featureProjection: 'EPSG:3857', // 要素投影为 EPSG:3857});feature.setStyle(mystyle(feature)); // 设置要���样式source.value.addFeature(feature); // 添加要素到矢量数据源return sourceData.read().then(log); // 递归读取下一个要素});}).catch((error) => console.error(error.stack)); // 捕获并打印错误});});
};// 初始化地图
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([13.7373, 51.0504]), // 设置地图初始中心点为德累斯顿zoom: 8, // 设置初始缩放级别}),});
};// Vue 生命周期钩子，组件挂载时执行
onMounted(() => {initMap(); // 初始化地图
});
</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>