`
jjxliu306
  • 浏览: 156900 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

    博客分类:
  • GIS
阅读更多

 

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

0
0
分享到:
评论

相关推荐

    leaflet加载本地shp文件

    在IT行业中,Leaflet.js是一个广泛使用的轻量级...在开始之前,请确保你的项目中已经引入了Leaflet.js库和相应的Shapefile加载插件。你可以通过CDN链接或者下载到本地来引入。例如,Leaflet的引入如下: ```html ...

    跟百度地图一样的ajax分页

    服务器返回数据后,JavaScript代码解析这些数据并在页面上添加或替换地图元素。 3. **GIS数据处理**:GIS数据通常包括地理位置、属性信息等,可能以Shapefile、GeoJSON、KML等格式存储。服务器端需要有能力处理这些...

    geotools-23.3

    它基于JavaScript对象表示法(JSON),因此易于解析和生成,并且适合在网络上传输。GeoJSON支持几何对象(如点、线和多边形)以及地理特征,后者可以包含属性信息。 Shapefile则是Esri公司推出的一种流行的空间数据...

    shp-viewer:查看 shapefile。

    在本案例中,JavaScript用于处理Shapefile的数据解析、地图绘制以及与用户的交互。 这个工具可能包含了以下主要组件: 1. **数据加载和解析**:Shapefile通常由多个文件组成,包括`.shp`(几何数据),`.dbf`...

    可供演示的山东省镇街道shp,cesium可以用其转换为json的数据

    与SHP相比,GeoJSON更适合Web环境,因为它是文本格式,易于在网络上传输和被JavaScript解析。要完成转换,可以使用开源工具如 ogr2ogr 或在线转换服务。 在实际操作中,你需要首先安装支持SHP文件的转换工具,比如...

    earthmesh从shape文件和geojson生成三角网格

    这通常通过使用像`turf.js`这样的库来完成,它可以解析GeoJSON,并提供了一些处理Shapefile的工具。 2. **坐标系统转换**:由于Shapefile和GeoJSON默认使用不同的坐标系统(通常是WGS84),在进行三角网格生成前,...

    webGis: Leaflet的demo程序

    这个demo程序可能是为了演示如何使用Leaflet创建一个基本的WebGIS应用,包括加载地图、添加标记、监听事件等基本操作。学习者可以通过查看和运行代码来理解Leaflet的工作原理,并进一步扩展和定制自己的地图应用。

    webgis完整功能例子-MapEasy

    1. **地图显示**:MapEasy能够加载和显示多种地图源,包括矢量地图、栅格地图和地形图。这些地图可能来自于不同的服务提供商,如Google Maps、Bing Maps或者OpenStreetMap。 2. **地图操作**:用户可以进行缩放、平...

    layers_csv:读取csv文件以构建ArcGIS图层

    `layers_csv`项目提供了一个功能,允许我们从CSV文件中读取数据并将其转化为图层,以便在地图上直观地展示。这个过程涉及到几个关键的技术点,下面将详细阐述。 首先,`layers_csv`的实现基于JavaScript语言,这是...

    webGisFramework2xiang:webGisFrameworkForXianLiubo

    本文将详细探讨一个特定的WebGIS框架——webGisFramework2xiang,它是专为"xiangliubo"设计的一个测试项目,主要用于演示JavaScript在构建WebGIS中的应用。 1. JavaScript基础 JavaScript是Web开发中的主要脚本语言...

    gis for web

    该案例可能涉及创建地图、加载地理空间数据、实现用户交互等功能。 ##### GeoServer简介 - **定义**:GeoServer是一个开源的GIS服务器,可以用来发布地理空间数据并提供访问接口。 - **特性**: - **支持多种标准...

    arcgis Scene资料

    "SceneExe"文件很可能是包含示例程序或者脚本的执行文件,旨在演示如何通过编程接口(如ArcObjects或ArcGIS API for JavaScript)来实现Scene的3D功能。开发者可以借此了解如何创建交互式的3D地图应用,包括动态数据...

Global site tag (gtag.js) - Google Analytics