项目中用到了在网页上读取shp文件，在网上看了很多教程，在此整理一份简单可行的方案。
把shp文件转换成GeoJson，之后再用openLayers展示GeoJson，就能达成将shp文件在网页上显示的目的。
本文包含的内容：
- element-upload使用
- 使用开源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>
