vue 读取shapefile文件转成GeoJson

项目中用到了在网页上读取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框架中的一个上传文件的组件，点这里查看详细配置，下面是项目中用到的样例。

直接用即可导入，在开始使用前需要进行一些个性化的配置。

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

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

定义简单的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));
                    }
                }

            }

完整代码：