前端 解析压缩包,并且读取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文件失败');
          });
      });
  });
};
相关推荐
Wiktok3 分钟前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~7 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号8 分钟前
【大前端】前端生成二维码
前端·二维码
程序员码歌38 分钟前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康1 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏2 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹3 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6