shapefile（.shp，.dbf，.prj）导入导出

已于 2023-08-25 15:18:59 修改
阅读量8.9k 收藏 27
点赞数 10
分类专栏： vue OpenLayers 文章标签： vue.js shapefile mapshaper
于 2022-01-12 20:19:03 首次发布
原创版权归博主所有，未经授权禁止转载。
本文链接：https://blog.csdn.net/qq_36305530/article/details/122457697
版权

文章目录

注意！！！： 仓库代码node版本使用的是 16，vue-cli4.5不支持使用 node18，vue-cli5使用的是webpack5，polyfill需要自行引用

请注意：jszip、mapshaper、ol 的版本，不同版本库代码可能有变。

shapefile（.shp，.dbf，.prj）导入导出

网页应用（Vue） 导入导出 shapefile（.shp，.dbf，.prj）

说明

如果网页应用只需要导入功能，只需使用 shapefile 库即可，但是 shapefile 库是无法实现导出功能的。
如果同时需导入导出功能，则需要使用 mapshaper 库。

shapefile-import

shapefile-export

1. 获取示例源码

https://gitee.com/liushuai1125/shapefile-import-export

  1. 获取源码
  • 使用 shapefile 导入
    git clone https://gitee.com/liushuai1125/shapefile-import-export.git
  • 使用 mapshaper 导入导出
    git clone -b mapshaper https://gitee.com/liushuai1125/shapefile-import-export.git

  1. 安装依赖

    npm install # cnpm install

  2. 启动项目

    npm run serve

预览地址： http://localhost:9566/

2. 使用 Shapefile 导入

流式 Shapefile 解析器

2.1. 文档

2.2. 说明

在网页应用中，我们使用文档里面的解析示例解析时，发现是无法读取选上传的文件的。观察 shapefile 的源码可知

export function openShp(source, options) {
  if (typeof source === "string") {
    if (!/\.shp$/.test(source)) source += ".shp";
    source = path(source, options);
  } else if (source instanceof ArrayBuffer || source instanceof Uint8Array) {
    source = array(source);
  } else {
    source = stream(source);
  }
  return Promise.resolve(source).then(shp);
}

shp 和 dbf 的参数类型可以是 ArrayBuffer、Uint8Array等类型，这样我们可以使用网页里的 FileReader 的 readAsArrayBuffer 方法获取选择上传的文件数据，再传给 shapefile 进行解析。

2.3. 代码示例

<template>
  <div class="shapefile-parser">
    <div class="panel">
      <input ref="file" type="file" multiple accept=".shp,.dbf">
      <button @click="handleSelect">确认</button>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { open as shapeOpen, read as shapeRead } from 'shapefile'

export default {
  name: 'ShapefileParser',
  data() {
    return {
    }
  },
  methods: {
    handleSelect() {
      let files = this.$refs.file.files
      console.log(files, typeof files, 'files FileList')
      // files = Array.from(new Array(files.length), (i, idx) => files[idx]) // 等效下面写法
      files = Array.from(files) // FileList => Array, 方便使用 Array 方法
      console.log(files, typeof files, 'files Array')
      this.parseShapefile(files) // 解析选择的 shp 并绘制显示
    },
    parseShapefile(files) {
      const shpFile = files.find(f => f.name.endsWith('.shp'))
      const dbfFile = files.find(f => f.name.endsWith('.dbf'))

      // 可使用 Promise.all 优化为下面写法
      // this.readInputFile(shpFile, 'ArrayBuffer').then(async(fileData) => {
      //   const featureJsons = []
      //
      //   await shapeOpen(fileData).then(async(source) => {
      //     await source.read().then(function log(result) {
      //       if (result.done) {
      //         return
      //       }
      //       featureJsons.push(result.value)
      //       console.log(result.value)
      //       return source.read().then(log)
      //     })
      //   }).catch(error => console.error(error.stack))
      //
      //   console.log(featureJsons, typeof featureJsons, 'featureJsons')
      // }).catch(e => {
      //   console.log(e, typeof e, 'l e')
      // })

      const promises = [shpFile, dbfFile].map(i => this.readInputFile(i))

      Promise.all(promises).then(([shp, dbf]) => {
        // return shapeOpen(shp, dbf)

        //  `shapefile` 提供了 read 方法直接返回一个 FeatureCollection geojson，封装了类似于下面注释掉的代码
        // 指定 dbf 编码 'utf-8'
        return shapeRead(shp, dbf, { encoding:'utf-8' }) 
      }).then(async(source) => {
        // const featureJsons = []
        // await source.read().then(function log(result) {
        //   if (result.done) {
        //     return
        //   }
        //   featureJsons.push(result.value)
        //   console.log(result.value)
        //   return source.read().then(log)
        // })
        // console.log(featureJsons, typeof featureJsons, 'shapeOpen featureJsons')

        console.log(source, typeof source, 'shapeRead source')
        // do something
      }).catch(error => console.error(error.stack))
    },
    async readInputFile(file, type = 'ArrayBuffer') {
      // 读取文件
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        switch (type) {
          case 'ArrayBuffer':
            reader.readAsArrayBuffer(file)
            break
          case 'Text':
            reader.readAsText(file)
            break
          case 'BinaryString':
            reader.readAsBinaryString(file)
            break
          case 'DataURL':
            reader.readAsDataURL(file)
            break
        }

        reader.onload = function() {
          // this.result 就是读取到的文件的数据
          resolve(this.result)
        }

        reader.onerror = function() {
          reject(this)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.shapefile-parser {
  width: 1000px;
  height: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .panel {
    padding: 10px 0;
  }
}
</style>

3. 使用 mapshaper 导入导出

作为一个 WebGISer ，你如果不知道 mapshaper，那你一定是一个不合格的 WebGISer。

mapshaper官网传送门

3.1. 文档

3.2. 说明

阅读 mapshaper.js 主要源码部分添加了以下一些 书签
bookmarks.png

有兴趣者可自行查看。

简而言之，在 mapshaper 里导入的数据被抽象为一个 dataset，dataset里存放着解析的数据，后续的操作都是在此基础上。
由 GeoJSON 文件生成的dataset 的格式如下图所示。
dataset.png

获取 dataset 需要用到 importContent 方法，该方法可以导入 .json 和 .shp 类型的文件。
由源码上的说明可知，参数 obj 是一个对象，具有 filename 和 content 属性，content 属性的类型可以是 Buffer、ArrayBuffer、String、Object。

  // Parse content of one or more input files and return a dataset
  // @obj: file data, indexed by file type
  // File data objects have two properties:
  //    content: Buffer, ArrayBuffer, String or Object
  //    filename: String or null
  //
  function importContent(obj, opts) {
   // ...
  }

3.3. 导入代码示例

主要代码如下：

<script>
import mapshaper from 'mapshaper'
import { GeoJSON } from 'ol/format'
import GEOJSON from '@/assets/411600.json'

const {
  importContent,
  guessInputType,
  exportDatasetAsGeoJSON
} = mapshaper.internal

export default {
  created() {
    // 直接 解析 geojson 字符串
    const content = this.analyze({ json: { filename: '411600.json', content: JSON.stringify(GEOJSON) }})
    console.log(content, typeof content, 'content')
  },
  methods: {
    handleSelect() {
      let files = this.$refs.file.files
      console.log(files, typeof files, 'files FileList')
      // files = Array.from(new Array(files.length), (i, idx) => files[idx]) // 等效下面写法
      files = Array.from(files) // FileList => Array, 方便使用 Array 方法
      console.log(files, typeof files, 'files Array')

      // 解析 shp
      const promises = files.map(i => this.readInputFileByType(i))
      Promise.all(promises).then((res) => {
        console.log(res, typeof res, 'readInputFileByType res')

        // 将选取的多个文件作为一个数据集
        return Object.fromEntries(res.map((i, idx) => {
          const filename = files[idx].name
          // 推断文件的解析类型
          return [guessInputType(filename, i), { filename: filename, content: i }]
        }))
      }).then((res) => {
        console.log(res, typeof res, 'merge res')

        const content = this.analyze(res)

        const readFeatures = new GeoJSON().readFeatures(content)
        console.log(readFeatures, typeof readFeatures, 'readFeatures')
      }).catch(error => console.error(error.stack))
    },
    analyze(obj) {
      // @obj: file data, indexed by file type
      // File data objects have two properties:
      //    content: Buffer, ArrayBuffer, String or Object
      //    filename: String or null

      // obj: {json:{filename:'',content:''}}
      const dataset = importContent(obj)
      console.log(dataset, typeof dataset, 'dataset')

      const content = exportDatasetAsGeoJSON(dataset, {})
      console.log(content, typeof content, 'exportDatasetAsGeoJSON content')
      return content
    },
    readInputFileByType(file) {
      // 以 以下 后缀名结尾的文件 读取成文本内容
      const asTest = ['.prj', '.cpg', '.json'].map(i => file.name.endsWith(i)).includes(true)
      return this.readInputFile(file, asTest ? 'Text' : 'ArrayBuffer')
    },
    async readInputFile(file, type = 'ArrayBuffer') {
      // 读取文件
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        switch (type) {
          case 'ArrayBuffer':
            reader.readAsArrayBuffer(file)
            break
          case 'Text':
            reader.readAsText(file)
            break
          case 'BinaryString':
            reader.readAsBinaryString(file)
            break
          case 'DataURL':
            reader.readAsDataURL(file)
            break
        }

        reader.onload = function() {
          // this.result 就是读取到的文件的数据
          resolve(this.result)
        }

        reader.onerror = function() {
          reject(this)
        }
      })
    }
  }
}
</script>

3.4. 导出 shapefile 代码示例

主要代码如下：

<script>
import mapshaper from 'mapshaper'
import GEOJSON from '@/assets/411600.json'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'

const {
  importContent,
  setDatasetCRS,
  exportFileContent
} = mapshaper.internal

export default {
  methods: {
    handleExport() {
      const dataset = importContent({ json: { filename: '411600.json', content: JSON.stringify(GEOJSON) }})

      // https://epsg.io/4326.esriwkt
      setDatasetCRS(dataset, { prj: 'GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]' })
      console.log(dataset, typeof dataset, 'dataset')

      this.saveDataset(dataset)
    },
    saveDataset(dataset, type = 'shapefile') {
      // format=shapefile|geojson|topojson|json|dbf|csv|tsv|svg
      const fileContent = exportFileContent(dataset, { format: type })
      console.log(fileContent, typeof fileContent, 'fileContent')

      this.saveFileContent(fileContent)
    },
    saveFileContent(fileContent) {
      var zip = new JSZip()

      fileContent.forEach(i => {
        zip.file(i.filename, i.content)
      })

      zip.generateAsync({ type: 'blob' }, function updateCallback(metadata) {
        var msg = 'progression : ' + metadata.percent.toFixed(2) + ' %'
        if (metadata.currentFile) {
          msg += ', current file = ' + metadata.currentFile
        }
        console.log(msg)
      }).then((blob) => {
        // see FileSaver.js
        saveAs(blob, 'example.zip')
        console.log('done !')
      }).catch(error => console.error(error.stack))
    }
  }
}
</script>
漠诽
关注
专栏目录
导入和导出Shapefile
CHEN_BR/BLOG
08-16 820
导入和导出Shapefile 通过2020年1月8日的aquaveo 如果您需要在GMS，SMS或WMS中与其他应用程序共享数据，则共享此数据最简单的方法之一是通过shapefiles。GMS，SMS和WMS都可以导入和导出shapefile，尽管它们之间存在一些差异。本文介绍了其中一些差异。 导入Shapefile 将shapefile导入GMS，SMS或WMS时，它们将被加载到GIS模块下。可以像使用“文件” |“其他文件”一样导入Shapefile。打开命令，“打开文件”宏，或在界
使用后端解析地图.shp.prj文件得到GeoJson数据
kuangxiuhong的博客
08-02 724
使用后端解析地图.shp.prj文件得到GeoJson数据。
.shp是什么文件_ArcGis学习记录1：shp、shx、dbf、prj都是什么文件
whl0071的专栏
02-15 3512
：shp、shx、dbf、prj都是什么文件
C#操作Shapefile空间数据的教程
最新发布
weixin_35757191的博客
09-12 890
本文还有配套的精品资源，点击获取 简介：Shapefile是地理信息系统中常用的存储点、线、多边形等空间数据的格式。C#通过.NET框架下的库如SharpMap、GeoAPI、NetTopologySuite和***patibility，提供了一系列工具来实现对Shapefile数据的读取与写入操作。本文详细介绍了使用这些工具和API进行Shapefile文件读写的方法，包...
导出为shape文件
01-19 334
private void barButtonItem2_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)//导出为shape文件。 { string serror = ""; for (int i = 0; i < sFeature.Cou...
中国详细shapefile文件
09-11
中国详细shapefile文件省市县镇村全都包括！中国详细shapefile文件省市县镇村全都包括！中国详细shapefile文件省市县镇村全都包括！
使用Geotools中的Shapefile plugin支持小数位精确控制
juweiping的专栏
02-03 1149
1背景        当前Java语言实现的Shapefile读写库中，Geotools中的shapefile插件是使用最多的开源实现，实现比较全面，成熟。但是可能为了与Geotools的核心概念一致，其对小数位DecimalCount的控制支持没有在适配层实现，只是默认了小数位的位数（其底层还是支持小数位的控制的）。     改进有几种方式，其一是参考Shapefile插件自己实现一个独立的
中国shp文件
07-12
每个shapefile由多个文件组成，每个文件有特定的功能，如.shp存储几何数据，.dbf存储属性数据，.prj定义投影信息等。 在实际应用中，将中国shp文件上传到GeoServer后，首先需要进行数据预处理，确保数据的坐标系统...
浙江省shapefile文件包括浙江省shp、shx、dbf文件
04-27
4. **其他可能的扩展名**：虽然这里只列出了这三个文件，但完整的Shapefile可能还包括其他扩展名的文件，如.prj（定义坐标系）、.sbn和.sbx（辅助索引）、.xml（元数据）等。这些文件提供了额外的信息，如投影方式、...
Bologna.osm.shp.zip_Bologna.osm.shp
09-23
在导入Shapefile之前，可能需要解压缩文件，并确保所有相关的.shp、.dbf、.shx和.prj文件都在同一目录下，因为它们共同构成了一个完整的Shapefile。同时，为了充分利用这些数据，还需要了解如何在GIS软件中操作OSM...
北京市路网.shp文件
11-03
`.shp`文件通常与其他扩展名的文件一同存在，如`.shx`(索引文件)、`.dbf`(属性数据)、`.prj`(坐标系信息)等，共同构成完整的Shapefile。在本案例中，尽管未列出所有相关文件，我们可以推测这些辅助文件也一并存在于...
Geotools Shapefile 插件支持小数位控制
02-03
修改GeoTools中的Shapefile插件，使其支持DecimalCount控制。 参考博文：http://blog.csdn.net/juweiping/article/details/54846085
shapefile4j:用于读取shapefile数据的库和实用程序
03-31
shapefile4j 这项工作基于Java ESRI Shape File Reader，该阅读器根据Apache License Version 2.0的条款分发。 该源代码已于2014年7月从Sourceforge复制， 为什么要使用另一个shapefile库？ 有一个库org.geotools:gt-shapefile ，可用于处理shapefile。 如果您不想引入12Mb的传递依赖关系，而是想使用大小为几十kB的相当小的库，则该库可能是一个更好的选择。 该库本身具有很多依赖关系，但它们的累积量大约为2Mb。 图书馆 我们通过自己的Maven存储库提供对工件的访问： 该软件包可在以下坐标处获得：
中国shapefile
08-31
史上最全shapefile，包含香港，澳门，台湾，省市区县全包括！
中国地区shape file文件
11-10
全国地区的shapefile文件，里面有三级文件，最小的各个区，在ArcGIS中非常实用。
shapefile 的读取代码（标准库）
06-24
shapefile 标准代码
China.shp.zip
07-14
在GIS中，Shapefile通常与其他文件（如`.shx`索引文件、`.dbf`属性数据库文件、`.prj`坐标系统定义文件等）一起使用，以完整地表示和处理地理信息。`.shp`文件存储几何数据，`.shx`文件提供快速访问几何记录的索引，...
python-shapefile库读取shapefile文件信息
热门推荐
fungis
01-15 2万+
python-shapefile库读取shapefile文件信息 shapefile是GIS中非常重要的一种数据类型，在ArcGIS中被称为要素类(Feature Class)，主要包括点(point)、线(polyline)和多边形(polygon)。Python脚本是ArcGIS官方推荐的脚本语言，通过Python脚本能够很方便的调用ArcGIS中的各种工具和函数批量完成所需操作。本文所介绍的...
Shapefile.js：JavaScript 库解析、操作和可视化 Shape 文件
gitblog_00034的博客
03-17 877
Shapefile.js：JavaScript 库解析、操作和可视化 Shape 文件 去发现同类优质开源项目:https://gitcode.com/ 是一个 JavaScript 库，用于解析、操作和可视化地理空间数据的 Shape 文件。该项目由 Calvin Metcalf 创建并维护，并已成为 JavaScript 社区中的一个重要工具。 什么是 Shape 文件？ Shape 文件是一...
Vue.js前端实现Shp文件的WebGIS展示技术
首先获取到zip文件，然后使用JSZip解析这个文件，最后从中提取出SHP文件以及相关的.dbf、.prj等文件。 5. **数据处理与展示**：将提取出来的数据（如坐标点、线、面等几何信息以及相应的属性信息）转换为适合前端...
评论 29
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漠诽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值