JS解析shapefile并在地图加载演示

 

为了解决SHP文件上传过程中用户需要预览，或者shp小文件需要进行实时加载，后端解析太频繁的问题。现在可以通过HTML5的方式直接读取本地文件，将解析的二进制流按照shp 和dbf的格式读取后按照ol的规范拼装features并加载图层。

程序主要的几个点有：

1. 本地文件读取：

借助H5的FileReader，可以轻松读取本地的文件（前提是在input type=file中已经加载）。

html:

<input type="file" id="shpFile"> <br>

JS:

var file=document.getElementById("shpFile");
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsBinaryString(file);
reader.onload=function(){
     var fileData = this.result ; //fileData就是读取到的文件的二进制数据
}

** FileReader接口的方法**

方法名 参数 描述

readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

1. shp解析

借助开源 shapefile 的js解析库，我们可以轻松的解析shp，dbf这些数据格式。

https://github.com/mbostock/shapefile

公网demo可以参考：

http://47.98.238.202:8000/ol_extension/shapefile/

本地demo参见 index.html