web端读取shp文件压缩包，Geojson与WKT格式互转

1.前端框架使用vue;读取shp的库为shpjs;geojson转wkt或wkt转geojson用terraformer-wkt-parser。
2.安装 cnpm install shpjs --s cnpm install terraformer-wkt-parser --s
3.读取shp压缩包文件示例代码

<template>
  <div class="wrapper">
    <a-upload
      name="shp"
      :before-upload="beforeUpload"
      :customRequest="customRequest"
      :showUploadList="false"
      accept=".zip"
      :fileList="fileList"
    >
      <a-button type="primary">
        选择SHP文件
      </a-button>
    </a-upload>
  </div>
</template>

<script>
import shp from "shpjs";
export default {
  components: {},
  props: {},
  data() {
    return {
      fileList: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 删除列表文件
    deleteShp() {
      this.fileList = [];
    },
    // 上传文件前校验
    beforeUpload(file) {
      const type = file.name.split(".")[1];
      const isJpgOrPng = type === "zip";
      if (!isJpgOrPng) {
        this.$message.error("只能上传zip格式的文件!");
      }
      const isLt40K = file.size / 1024 < 500;
      if (!isLt40K) {
        this.$message.error("文件不得大于500KB!");
      }
      return isJpgOrPng && isLt40K;
    },
    // 上传文件
    customRequest(data) {
      const self = this;
      const reader = new FileReader();
      reader.readAsArrayBuffer(data.file);
      reader.onload = function() {
        // eslint-disable-next-line no-undef
        shp(this.result).then(
          (geojson) => {
            if (geojson.features && geojson.features.length === 0) {
              self.$message.error("数据存在问题，请重新上传！");
              self.deleteShp();
            } else if (geojson.features.length > 1) {
              self.$message.error("数据是多面对象，请重新上传！");
              self.deleteShp();
            }
          },
          (error) => {
            self.deleteShp();
            self.$message.error("上传文件不正确");
          }
        );
      };
      reader.onerror = function(event) {
        self.$message.error("上传失败");
        reader.abort();
        self.deleteShp();
      };
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>

2.wkt与geojson互转代码
参考示例

import WKT from 'terraformer-wkt-parser'
var geojson = WKT.parse(wktData);

本文转自 https://blog.csdn.net/wo_buzhidao/article/details/111880403?spm=1001.2014.3001.5502，如有侵权，请联系删除。