Vue3使用shapefile读取矢量数据，以数组形式返回坐标点

npm安装:

npm install shapefile --save-dev

源码:

<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue'; // 引入 ref
import * as shapefile from "shapefile";

// 使用 ref 创建一个引用
const uploadRef = ref(null);

// 解析文件
const fileChange = (param) => {
  console.log(param.file)
  // 直接使用 uploadRef 引用来调用 clearFiles 方法
  uploadRef.value.clearFiles()

  const reader = new FileReader()
  const fileData = param.file
  // 读取文件
  reader.readAsArrayBuffer(fileData)

  reader.onload = function () {
    // 定义geojson数组, 一个shp里会有多个面, 即有多个geometry
    let geojsonArr = []
    shapefile.open(this.result)
      .then((source) => {
        source.read().
        then(function log(result){
          if (result.done) {
            // 解析完成
            console.log(geojsonArr)
          }

          const json = result.value
          geojsonArr.push(json)
          return source.read().then(log)
        })
      })
      .catch((error) => {
        console.error(error.stack)
        ElMessage.error("读取shp文件失败")
      })
  }
}
</script>
<template>
  <el-upload ref="uploadRef" action="111111" :limit="1" :file-list="fileList" accept="shp" :http-request="fileChange"
    :auto-upload="true">
    <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
  </el-upload>
</template>
<style scoped>

</style>

效果展示:

原文地址：https://blog.csdn.net/Ian1025/article/details/142337973

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！