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

这篇具有很好参考价值的文章主要介绍了前端解析压缩包，并且读取Shp生成GeoJson在MapBox上渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

npm install shapefile
npm install jszip
npm install @turf/turf文章来源地址https://www.toymoban.com/news/detail-797658.html

<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>

核心代码

//解析文件
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文件失败');
          });
      });
  });
};