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

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

npm install shapefile

npm install jszip

npm install @turf/turf

javascript 复制代码
<ElUpload
              ref="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>

核心代码

javascript 复制代码
//解析文件
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文件失败');
          });
      });
  });
};
相关推荐
Boilermaker199214 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子25 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102440 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构