項(xiàng)目中用到了在網(wǎng)頁(yè)上讀取shp文件，在網(wǎng)上看了很多教程，在此整理一份簡(jiǎn)單可行的方案。
把shp文件轉(zhuǎn)換成GeoJson，之后再用openLayers展示GeoJson，就能達(dá)成將shp文件在網(wǎng)頁(yè)上顯示的目的。
本文包含的內(nèi)容：
- element-upload使用
- 使用開(kāi)源shapefile庫(kù)轉(zhuǎn)換shp為GeoJson
現(xiàn)在要達(dá)到的功能是在網(wǎng)頁(yè)選擇一個(gè)shp文件，然后輸出GeoJson數(shù)據(jù)。
假設(shè)已經(jīng)搭好了vue項(xiàng)目，現(xiàn)在安裝需要的依賴庫(kù)。ui框架可以自行選擇，這里使用element-ui
npm i element-ui shapefile
1. element-upload使用
element-upload是ui框架中的一個(gè)上傳文件的組件，點(diǎn)這里查看詳細(xì)配置，下面是項(xiàng)目中用到的樣例。
直接用<el-upload></el-upload>即可導(dǎo)入，在開(kāi)始使用前需要進(jìn)行一些個(gè)性化的配置。
這里把上傳組件當(dāng)做文件選擇器用，限制只能上傳一個(gè)文件，用“:auto-upload=false”禁用了自動(dòng)上傳。要注意是on-preview、on-change這些鉤子函數(shù)需要自己在methods里面聲明。
其中on-change在文件狀態(tài)（添加文件、上傳成功和上傳失?。└淖儠r(shí)調(diào)用，在這里用來(lái)獲取文件實(shí)例。
<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>點(diǎn)擊配置</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數(shù)據(jù)</el-button>
</div>
</template>
定義簡(jiǎn)單的data對(duì)象，file用來(lái)暫存文件。
data(){
return{
file:{}
}
},
on-change調(diào)用的bind函數(shù)，從fileList里面獲取文件，因?yàn)橹挥幸粋€(gè)文件，所以這里直接獲取。
bind(files, fileList){
//綁定文件
this.file=fileList[0]
}
2. 使用開(kāi)源shapefile庫(kù)轉(zhuǎn)換shp為GeoJson
在script開(kāi)頭導(dǎo)入shapefile的open函數(shù)。
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函數(shù)內(nèi)的定義如下，從中可知我們傳遞的shp文件可以是實(shí)際的文件地址，也可以是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));
});
}
我們已經(jīng)有了file文件實(shí)例，接下來(lái)就是開(kāi)始準(zhǔn)備轉(zhuǎn)化。
這里用h5的FileReader協(xié)助我們讀取文件，返回文件的ArrayBuffer。
直接調(diào)用open函數(shù)，傳入讀取到的ArrayBuffer，最后在控制臺(tái)打印GeoJson數(shù)據(jù)。
點(diǎn)擊“生成GeoJson”按鈕，會(huì)調(diào)用config函數(shù)，config內(nèi)代碼如下：
config() {
//判斷文件是否為shp文件
const name=this.file.name
const extension=name.split('.')[1]
//console.log(extension)
if('shp'!==extension){
this.$alert('文件不是shp文件！請(qǐng)重新選擇文件', {
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>點(diǎn)擊配置</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數(shù)據(jù)</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文件！請(qǐng)重新選擇文件', {
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>
