前端解析压缩包，并且读取Shp生成GeoJson在MapBox上渲染

这里需要先安装shapefile；jszip;turf

npm install shapefile
npm install jszip
npm install @turf/turf

<ElUploadref="upload"v-model:file-list="fileListShp":limit="1"accept=".zip":show-file-list="true":auto-upload="true":on-exceed="() => handleExceed()":before-remove="handleRemoveFireShp":action="apiPath_fireUpload":headers="getFileHeaders()"name="files":before-upload="(file) => beforeAvatarUploadShp('fj', file)"><div class="btn_shp">上传文件</div>
</ElUpload><script setup>
import * as turf from '@turf/turf';
import JSZip from 'jszip';
import * as shapefile from 'shapefile';const handleExceed = () => {ElMessage.warning('最多上传1份压缩包');
};// 删除文档
const handleRemoveFireShp = async (uploadFile) => {if ('response' in uploadFile) {removeDocListShp.value.push(uploadFile?.response?.[0]);} else {removeDocListShp.value.push(uploadFile);}
};// 上传前验证
const beforeAvatarUploadShp = (key, rawFile) => {if (!UPLOAD_FILE_TYPE_ZIP(rawFile)) {ElMessage.error('仅支持zip格式!');return false;}fileChange(rawFile);  //核心功能代码handleCheckedIcon('删除');
};
</script>

核心代码

//解析文件
const fileChange = (param) => {// upload.value.clearFiles();const fileData = param;shpName.value = param.name;const zip = new JSZip();zip.loadAsync(fileData).then((res) => {const fileList = Object.keys(res.files);const pattern = new RegExp(/\S\.shp$/);const shpFile = fileList.find((i) => pattern.test(i));let geojsonArr = [];if (!shpFile) {ElMessage.warning('压缩包里面没有Shp文件');REMOVE_LAYER(`${layerGroupId.High_Light_RESULT_LAYER_SHP}`);fileListShp.value = [];return;}zip.file(shpFile).async('arraybuffer') // 此处是压缩包中的shp文件,arraybuffer(此时在回调的参数中已经可以获取到上传的zip压缩包下的所有文件).then(function (content) {// 这个就是文件中的内容shapefile.open(content).then((source) => {source.read().then(function log(result) {if (result.done) {//解析完成var collection = turf.featureCollection(geojsonArr);//REMOVE_LAYER(`${layerGroupId.High_Light_RESULT_LAYER_SHP}`);//ADD_MAP_ZDFX_LAYER(layerGroupId.High_Light_RESULT_LAYER_SHP, collection);//可以在地图展示图层return;}const json = result.value;geojsonArr.push(json);return source.read().then(log);});}).catch((error) => {console.error(error.stack);ElMessage.error('读取shp文件失败');});});});
};