JS解析shapefile并在地图加载演示
为了解决SHP文件上传过程中用户需要预览,或者shp小文件需要进行实时加载,后端解析太频繁的问题。现在可以通过HTML5的方式直接读取本地文件,将解析的二进制流按照shp 和dbf的格式读取后按照ol的规范拼装features并加载图层。
程序主要的几个点有:
- 本地文件读取:
借助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 | 读取完成,无论成功失败 |
- shp解析
借助开源 shapefile 的js解析库,我们可以轻松的解析shp,dbf这些数据格式。
https://github.com/mbostock/shapefile
公网demo可以参考:
http://47.98.238.202:8000/ol_extension/shapefile/
本地demo参见 index.html
相关推荐
在IT行业中,Leaflet.js是一个广泛使用的轻量级...在开始之前,请确保你的项目中已经引入了Leaflet.js库和相应的Shapefile加载插件。你可以通过CDN链接或者下载到本地来引入。例如,Leaflet的引入如下: ```html ...
服务器返回数据后,JavaScript代码解析这些数据并在页面上添加或替换地图元素。 3. **GIS数据处理**:GIS数据通常包括地理位置、属性信息等,可能以Shapefile、GeoJSON、KML等格式存储。服务器端需要有能力处理这些...
它基于JavaScript对象表示法(JSON),因此易于解析和生成,并且适合在网络上传输。GeoJSON支持几何对象(如点、线和多边形)以及地理特征,后者可以包含属性信息。 Shapefile则是Esri公司推出的一种流行的空间数据...
在本案例中,JavaScript用于处理Shapefile的数据解析、地图绘制以及与用户的交互。 这个工具可能包含了以下主要组件: 1. **数据加载和解析**:Shapefile通常由多个文件组成,包括`.shp`(几何数据),`.dbf`...
与SHP相比,GeoJSON更适合Web环境,因为它是文本格式,易于在网络上传输和被JavaScript解析。要完成转换,可以使用开源工具如 ogr2ogr 或在线转换服务。 在实际操作中,你需要首先安装支持SHP文件的转换工具,比如...
这通常通过使用像`turf.js`这样的库来完成,它可以解析GeoJSON,并提供了一些处理Shapefile的工具。 2. **坐标系统转换**:由于Shapefile和GeoJSON默认使用不同的坐标系统(通常是WGS84),在进行三角网格生成前,...
这个demo程序可能是为了演示如何使用Leaflet创建一个基本的WebGIS应用,包括加载地图、添加标记、监听事件等基本操作。学习者可以通过查看和运行代码来理解Leaflet的工作原理,并进一步扩展和定制自己的地图应用。
1. **地图显示**:MapEasy能够加载和显示多种地图源,包括矢量地图、栅格地图和地形图。这些地图可能来自于不同的服务提供商,如Google Maps、Bing Maps或者OpenStreetMap。 2. **地图操作**:用户可以进行缩放、平...
`layers_csv`项目提供了一个功能,允许我们从CSV文件中读取数据并将其转化为图层,以便在地图上直观地展示。这个过程涉及到几个关键的技术点,下面将详细阐述。 首先,`layers_csv`的实现基于JavaScript语言,这是...
本文将详细探讨一个特定的WebGIS框架——webGisFramework2xiang,它是专为"xiangliubo"设计的一个测试项目,主要用于演示JavaScript在构建WebGIS中的应用。 1. JavaScript基础 JavaScript是Web开发中的主要脚本语言...
该案例可能涉及创建地图、加载地理空间数据、实现用户交互等功能。 ##### GeoServer简介 - **定义**:GeoServer是一个开源的GIS服务器,可以用来发布地理空间数据并提供访问接口。 - **特性**: - **支持多种标准...
"SceneExe"文件很可能是包含示例程序或者脚本的执行文件,旨在演示如何通过编程接口(如ArcObjects或ArcGIS API for JavaScript)来实现Scene的3D功能。开发者可以借此了解如何创建交互式的3D地图应用,包括动态数据...