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

看不清的看视频地址：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

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