0
点赞
收藏
分享

微信扫一扫

vue 读取shapefile文件转成GeoJson

Java旺 2021-09-21 阅读 77

项目中用到了在网页上读取shp文件,在网上看了很多教程,在此整理一份简单可行的方案。

把shp文件转换成GeoJson,之后再用openLayers展示GeoJson,就能达成将shp文件在网页上显示的目的。

本文包含的内容:

  1. element-upload使用
  2. 使用开源shapefile库转换shp为GeoJson

现在要达到的功能是在网页选择一个shp文件,然后输出GeoJson数据。
假设已经搭好了vue项目,现在安装需要的依赖库。ui框架可以自行选择,这里使用element-ui

npm i element-ui shapefile

1. element-upload使用

element-upload是ui框架中的一个上传文件的组件,点这里查看详细配置,下面是项目中用到的样例。

直接用<el-upload></el-upload>即可导入,在开始使用前需要进行一些个性化的配置。

这里把上传组件当做文件选择器用,限制只能上传一个文件,用“:auto-upload=false”禁用了自动上传。要注意是on-preview、on-change这些钩子函数需要自己在methods里面声明。

其中on-change在文件状态(添加文件、上传成功和上传失败)改变时调用,在这里用来获取文件实例。

<template>
    <div class="upload_demo">
        <el-upload
                   drag
                   :auto-upload=false
                   action=""
                   accept="shp"
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :limit="1"
                   :on-change="bind"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将shp文件拖到此处,或<em>点击配置</em></div>

            <div class="el-upload__tip" slot="tip">必须是shp文件</div>
        </el-upload>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="config">生成GeoJson数据</el-button>
    </div>
</template>

定义简单的data对象,file用来暂存文件。

data(){
            return{
                file:{}
            }
        },

on-change调用的bind函数,从fileList里面获取文件,因为只有一个文件,所以这里直接获取。

 bind(files, fileList){
                //绑定文件
                this.file=fileList[0]
            }

2. 使用开源shapefile库转换shp为GeoJson

在script开头导入shapefile的open函数。

    import {open} from 'shapefile'

官方的usage:

shapefile.open("https://cdn.rawgit.com/mbostock/shapefile/master/test/points.shp")
  .then(source => source.read()
    .then(function log(result) {
      if (result.done) return;
      console.log(result.value);
      return source.read().then(log);
    }))
  .catch(error => console.error(error.stack));

open函数内的定义如下,从中可知我们传递的shp文件可以是实际的文件地址,也可以是ArrayBuffer、Uint8Array或者文件流。

export function open(shp, dbf, options) {
  if (typeof dbf === "string") {
    if (!/\.dbf$/.test(dbf)) dbf += ".dbf";
    dbf = path(dbf, options);
  } else if (dbf instanceof ArrayBuffer || dbf instanceof Uint8Array) {
    dbf = array(dbf);
  } else if (dbf != null) {
    dbf = stream(dbf);
  }
  if (typeof shp === "string") {
    if (!/\.shp$/.test(shp)) shp += ".shp";
    if (dbf === undefined) dbf = path(shp.substring(0, shp.length - 4) + ".dbf", options).catch(function() {});
    shp = path(shp, options);
  } else if (shp instanceof ArrayBuffer || shp instanceof Uint8Array) {
    shp = array(shp);
  } else {
    shp = stream(shp);
  }
  return Promise.all([shp, dbf]).then(function(sources) {
    var shp = sources[0], dbf = sources[1], encoding = "windows-1252";
    if (options && options.encoding != null) encoding = options.encoding;
    return shapefile(shp, dbf, dbf && new TextDecoder(encoding));
  });
}

我们已经有了file文件实例,接下来就是开始准备转化。

这里用h5的FileReader协助我们读取文件,返回文件的ArrayBuffer。

直接调用open函数,传入读取到的ArrayBuffer,最后在控制台打印GeoJson数据。
点击“生成GeoJson”按钮,会调用config函数,config内代码如下:

config() {
                //判断文件是否为shp文件
                const name=this.file.name
                const extension=name.split('.')[1]
                //console.log(extension)
                if('shp'!==extension){
                    this.$alert('文件不是shp文件!请重新选择文件', {
                        confirmButtonText: '确定'
                    })
                }else {
                    const reader=new FileReader()
                    const fileData=this.file.raw
                    reader.readAsArrayBuffer(fileData)
                    reader.onload = function(e){
                        open(this.result)
                            .then(source => source.read()
                                .then(function log(result) {
                                    if (result.done) return;
                                    console.log(result.value);
                                    return source.read().then(log);
                                }))
                            .catch(error => console.error(error.stack));
                    }
                }

            }

完整代码:

<template>
    <div class="upload_demo">
        <el-upload
                   drag
                   :auto-upload=false
                   action=""
                   accept="shp"
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :limit="1"
                   :on-change="bind"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将shp文件拖到此处,或<em>点击配置</em></div>

            <div class="el-upload__tip" slot="tip">必须是shp文件</div>
        </el-upload>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="config">生成GeoJson数据</el-button>
    </div>
</template>

<script>
    import {open} from 'shapefile'
    export default {
        name: "Config",
        data(){
            return{
                file:{}
            }
        },
        methods:{
            config() {
                const name=this.file.name
                const extension=name.split('.')[1]
                //console.log(extension)
                if('shp'!==extension){
                    this.$alert('文件不是shp文件!请重新选择文件', {
                        confirmButtonText: '确定'
                    })
                }else {
                    const reader=new FileReader()
                    const  fileData=this.file.raw
                    reader.readAsArrayBuffer(fileData)
                    reader.onload = function(e){
                        open(this.result)
                            .then(source => source.read()
                                .then(function log(result) {
                                    if (result.done) return;
                                    console.log(result.value);
                                    return source.read().then(log);
                                }))
                            .catch(error => console.error(error.stack));
                    }
                }

            },
            handleRemove(file, fileList) {
                //console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            bind(files, fileList){
                //绑定文件
                this.file=fileList[0]
                //console.log(this.file)
            }

        }
    }
</script>

<style scoped>
    .upload_demo{
        text-align: center;
        margin-top: 50px;
    }
    .el-button{
       margin-top: 10px;
    }
</style>
举报

相关推荐

0 条评论