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在文件状态（添加文件、上传成功和上传失败）改变时调用，在这里用来获取文件实例。

<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>