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

已于 2023-08-25 15:18:59 修改
阅读量8.1k 收藏 25
点赞数 8
分类专栏： 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>
漠诽
关注
  • 8
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 29
    评论
专栏目录
【ArcGIS微课1000例】0027：ArcGIS属性表（dbf）转Excel的4中方法
「 刘一哥与GIS的故事」
06-12 3713
ArcGIS提供了直接将dbf转为Excel的工具【表转Excel】，工具位于：【系统工具箱】→【转换工具】→【Excel】→【表转Excel】，如下图所示： 运行参数设置如下： 转换完成后，双击1.xls，打开。Excel可以直接打开dbf（但是不能修改保存dbf，可以另存为csv等别的格式），可以先打开Excel，点击文件→打开→选择dbf格式。 打开结果：打开属性表，点击【表选项】→【导出】。 选择文本文件，后缀名输入.csv。 保存完成后用excel打开csv文件。 Csv可以进一步保存为Excel
【arcgis打开】中国幼儿园数据（cpg+dbf+prj+shp+shx+数据）
uranusautism的博客
10-05 497
幼儿园的任务为解除家庭在培养儿童时所受时间、空间、环境的制约，让幼儿身体、智力和心情得以健康发展。可以说幼儿园是小朋友的快乐天地，可以帮助孩子健康快乐地度过童年时光，不仅可以学到知识，而且可以从小接触集体生活。幼儿园教育作为整个教育体系基础的基础，是对儿童进行预备教育（性格完整健康、行为习惯良好、初步的自然与社会常识）。其中，普惠性幼儿园在园幼儿4082.83万人，普惠性幼儿园覆盖率达到84.74%。旧称蒙养园、幼稚园。根据《幼儿园工作规程》规定，幼儿园是对3岁以上学龄前幼儿实施保育和教育的机构。
vue点击按钮导出csv文件
weixin_51751522的博客
04-06 1049
vue点击按钮导出csv文件： outfile_CSV(){ const that=this; //请求接口获取文件 that.$axios.post('CSV_file', that.$qs.stringify({ mindId:1 })) .then((res)=>{ //使用blob对象接收文件 let blob = new Blob([res.data], {ty
探索PyShp：纯Python实现的ESRI Shapefile库
最新发布
gitblog_00003的博客
05-15 496
探索PyShp：纯Python实现的ESRI Shapefile库 项目地址:https://gitcode.com/GeospatialPython/pyshp 在GIS（地理信息系统）领域，ESRI Shapefile是一种广泛使用的矢量数据格式。PyShp，由Joel Lawhead创建并由Karim Bahgat维护，提供了一个完全用Python编写的读写Shapefile的强大工具。这个...
在openlayers地图中加载矢量数据（shp文件）
weixin_55684685的博客
05-13 2869
我们要知道，在ArcGIS、QGIS中经常使用的矢量数据一般为shp格式数据，相当于地图中的layer图层，里面无非就是点、线、面数据，但是在openlayers里面加载的时候只能加载geojson数据，所以我们想加载shp格式数据，第一步就是将shp数据格式转换为geojson数据格式。另外，还要注意坐标系的问题，一定要注意矢量数据的坐标系要和openlayers里面加载的地图的坐标系一致，通常都是用WGS84坐标系（即EPSG:4326），防止出现偏移。矢量数据找要素里面的投影。
shapefile格式说明及读写代码示例
Chendy的专栏
01-10 1万+
Shape files数据说明Shape files是ESRI提供的一种矢量数据格式，它没有拓扑信息，一个Shape files由一组文件组成，其中必要的基本文件包括坐标文件（.shp）、索引文件（.shx）和属性文件（.dbf）三个文件。坐标文件的结构说明坐标文件(.shp)用于记录空间坐标信息。它由头文件和实体信息两部分构成（如图2.1所示）。坐标文件的文件头坐标文件的文件
北京市路网.shp文件
11-03
`.shp`文件通常与其他扩展名的文件一同存在，如`.shx`(索引文件)、`.dbf`(属性数据)、`.prj`(坐标系信息)等，共同构成完整的Shapefile。在本案例中，尽管未列出所有相关文件，我们可以推测这些辅助文件也一并存在于...
Bologna.osm.shp.zip_Bologna.osm.shp
09-23
在导入Shapefile之前，可能需要解压缩文件，并确保所有相关的.shp、.dbf、.shx和.prj文件都在同一目录下，因为它们共同构成了一个完整的Shapefile。同时，为了充分利用这些数据，还需要了解如何在GIS软件中操作OSM...
森林公园空间分布点文件 .shp
02-14
每个`.shp`文件通常会伴随着多个相关文件，如`.shx`(索引文件)、`.dbf`(属性数据)和`.prj`(坐标系统信息)，它们一起构成了完整的Shapefile数据集。 1. **点、线和多边形**: Shapefile可以存储三种基本的几何对象：...
对队.shp文件的解析
08-10
这种文件格式由Esri公司开发，是Shapefile的一种表现形式，通常包括`.shp`、`.dbf`、`.shx`等多个关联文件，一起构成完整的空间数据结构。在本篇中，我们将深入探讨如何使用C++来解析`.shp`文件。 首先，理解`.shp`...
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 的读取代码（标准库）
06-24
shapefile 标准代码
ArcGIS 坐标系统文件，Wkt各个投影系统参数查询文件
07-09
ArcGIS 坐标系统文件，Wkt各个投影系统参数查询文件，可以得到各个系统各项参数。
长沙市路网.shp文件
01-07
在实际操作中，这个文件名可能对应着压缩包内的其他关联文件，如.dbf、.shx、.prj等，这些文件与.shp文件一起构成了完整的Shapefile。 对于这样的数据，我们可以进行以下操作： 1. **数据分析**：通过GIS软件（如...
arcgis使用工具箱导出dbf,怎么把excel表格导入gis!arcgis中属性表怎么导出到excel里...
weixin_36024106的博客
04-01 4862
mapgis中怎样导出区属性中的面积到excel中要先配置EXCEL数据源，然后在属性管理模块中导出区面积字段就行了查看原帖>>arcGIS中属性表怎么导出到EXCEL里arcGIS中属导出EXCEL里步骤如下：1、首先打arcgis软件，找到Layers文件夹。2、接着我们在layers处右击，在弹出的快捷菜单中选择adddata。3、然后需要添加我们需要导出属性表的shp文件，导...
将坐标系统保存为一个文件.prj
坐听风雨
09-13 6493
try { System.Windows.Forms.SaveFileDialog m_SaveFileDialog = new System.Windows.Forms.SaveFileDialog(); m_SaveFileDialog.Filter = "坐标系统文件(*.Prj...
获取shapefile并将其导入数据库的方法
热门推荐
小小Giser在成长
11-19 1万+
<br />主要完成用C#，通过AE将本地Shapefile文件导入到SDE的指定数据集下面。<br /> 首先说下思路：<br /> （1） 通过OpenFileDialog打开本地的Shp文件；<br /> （2）通过获取的Shp文件创建FeatureClass，获取shp的字段 IFields，并判断图层类别;<br /> （3）连接SDE中指定数据集，并创建新的FeatureClass；<br /> （4）将shp文件对应的 FeatureClass里的Feature复制到SDE中新建的F
GlobalMapper20如何根据EPSG代号生成prj文件
王跃军的博客
04-21 2379
一、Tool-》Config 二、输入EPSG 以CGCS2000对应的高斯三度带，中央经线102，为例，EPSG：4543 看到对应的信息如图 三、Save to file 直接保存即可 文本编辑器打开如图： PROJCS["CGCS2000_3_degree_Gauss_Kruger_CM_102E",GEOGCS["GCS_WGS_1984",DATUM["D_WGS84",SPHEROID["WGS84",6378137,298.257223563]],PR
c# 读取shp文件怎么读取
07-25
你可以使用第三方库来读取和处理 Shapefile (shp) 文件。其中一个常用的库是 DotSpatial，它提供了 C# 的 API 来读取和操作 Shapefile 数据。 首先，你需要在项目中引入 DotSpatial 库。你可以通过 NuGet 包管理器来安装它，或者手动下载并添加到项目引用中。 安装完成后，你可以按照以下步骤来读取 Shapefile 文件： 1. 导入所需的命名空间： ```csharp using DotSpatial.Data; using DotSpatial.Topology; ``` 2. 创建一个 ShapefileFeatureProvider 对象并打开 Shapefile 文件： ```csharp ShapefileFeatureProvider shapefile = new ShapefileFeatureProvider("path_to_your_shapefile.shp"); shapefile.Open(); ``` 3. 通过 FeatureSet 属性获取 Shapefile 的要素集合： ```csharp IFeatureSet featureSet = shapefile.GetFeatureSet(); ``` 4. 遍历要素集合，处理每个要素的属性和几何形状： ```csharp foreach (IFeature feature in featureSet.Features) { IGeometry geometry = feature.Geometry; // 在这里处理几何形状 DataRow attributes = feature.DataRow; // 在这里处理属性数据 } ``` 5. 关闭 Shapefile 文件： ```csharp shapefile.Close(); ``` 上述代码中的 "path_to_your_shapefile.shp" 应替换为你实际的 Shapefile 文件路径。你也可以使用其他方法来读取和处理 Shapefile 文件，例如使用 OGR 库或其他相关的库。 请注意，读取 Shapefile 文件时，你可能还需要读取相关的 dbf、shx 和 prj 文件，这些文件包含了 Shapefile 的属性、索引和投影信息。你可以通过相同的方法来读取这些文件。 希望这能帮助到你！如果有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 29
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

漠诽

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

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

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

打赏作者

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

抵扣说明：

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

余额充值