老规矩:先看效果图,是不是你想要的,别浪费时间,耍流氓嘛。老铁们说是不是?

看不清的看视频地址:https://www.bilibili.com/video/BV1Ro4y1D7ze/


看完了效果图,到了这里应该都是真正需要的人吧,咱们慢慢来,

目录

前言:

思路一:利用arcgis js api自带的接口实现

思路二:后台解析shp文件返回geojson

思路三:前端解压zip 包 解析其中的shp文件,转化数据加载到地图并存储数据库


前言:

在项目中遇到这样一个需求:用户上传shp格式的文件,然后将数据在地图上展示

完成后,将这个功能单独提出来简化下 写个demo ,特写此博客记录并总结。

思路一:利用arcgis js api自带的接口实现

在arcgis js api中提供了这样一个demo,完全满足上述的需求

demo地址:https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=layers-featurelayer-shapefile

原理:调用的是portal中Restful API

 https://www.arcgis.com/sharing/rest/content/features/generate

但它使用的是ArcGIS Online,是公有云,如果你项目中部署的是arcgis server 并且使用的是portal

enterprise,那推荐选这种方法,将上面的地址换成你的portal地址。很显然我不是。。。




思路二:后台解析shp文件返回geojson

java后台配置GeoTools,一个开源的JAVA处理空间信息类库。

利用它解析shp然后将解析出的geojson返回给前端展示或者存入空间库中。

最好的我觉得还是这种,前后台结合嘛,效率也可以。无奈后台小哥太忙,秉着能自己动手就不麻烦别人的原则,还是选择第三种方法,前端自己解析,自己加载,然后存入数据库中。




思路三:前端解压zip 包 解析其中的shp文件,转化数据加载到地图并存储数据库

这个是用 vue + element ui +arcgis js 4.19 +jzzip+shapefile 完成的 

下面详细说下思路三吧:

1、zip包解压

2、shp 文件读取

3、转化格式用 arcgis js 加载

具体详细说明下:

1、zip包解压,这里我们用到的是jzzip 这个js库

2、shp文件读取:引入shapefile.js 这个类库

这里放入GitHub地址,js可以从这里下载,也有详细的api介绍:https://github.com/mbostock/shapefile

这里要针对shp文件进行解析时,我进行了一些过滤,主要是下列结果过滤条件:

(1)是否是zip包

(2)大小不能超过2M

(3)解压后的shp文件必须包括 后缀名为shp 和 dbf (因为我这里规定可手动输入epsg参考系,所以暂不考虑是否包含后缀prj的文件)

.shp 存储地理形状和位置信息
.dbf 存储属性信息
.shx 索引文件
.prj 坐标系
.cpg 字符编码,如UTF-8

其中当使用shapefile时要如果dbf 文件属性信息中有汉字的话会出现乱码,这时要对shapefile.js中的 encoding 进行修改下,原来是 window-1252 ,我修改成 utf-8就好了。

(3)用shapefile 解析出来的是geojson 的格式,但是要加载到arcgis 的地图上,还需要将 geojson转成成 esri json 的格式才行,这里需要用到的就是 terraformer 这个类库,其中还可以将geojson转换成wkt 格式的存入数据库中,这个我们下期来说,(shp 解析的数据添加至pg空间库中)导入的shp顺手就存储到pg 的空间库中

引入的js地址:

<script src="https://unpkg.com/terraformer@1.0.7"></script>
<script src="https://unpkg.com/terraformer-arcgis-parser@1.0.5"></script>

转化好之后就是用graphisclayer 加载就行,这个简单不多赘述哦。

不过项目中存在已知的缺陷:我预留好的EPSG位置我其实没用上,我默认的都是4326,这个留给有缘人吧。而且如果你上传的shp 坐标系是投影的,那你自己需要转化下,在我这会飘到看不见哦~~~~

具体的源码我已上传,设置的收费哦,o(* ̄︶ ̄*)o,

资源下载地址:https://download.csdn.net/download/KK_bluebule/20434088

白嫖党你懂得:一键三连:点赞收藏加关注,博客下面留邮箱,博主看到也会发的哦 

Logo

前往低代码交流专区

更多推荐