天天看点

ArcGIS API for JS的开发 —— 纯 JS 实现 shp 文件下载(二)引言做法

从 Esri 论坛中可以看出,基于 ArcGIS 的策略,并没有打算提供 API 客户端的 shp 文件下载接口。大量的功能仍然需要采用 服务端发布的 GP 功能接口或 ArcGIS API For Python

引言

为了实现基于前端 JS 的 SHP 文件下载功能,需要依赖第三方库:

1、mapbox的 shp-write(GITHUB地址) 。

该库提供了 GeoJSON写入 SHP文件、SHP打包压缩为ZIP、下载的功能。

2、同时采用了 ESRI 的依赖库 arcgis-to-geojson-utils (GITHUB地址) 。

该库提供了 ArcGIS 元素转 GeoJSON 的功能。

基本思路

FeatureLayer ⇨ FeatureSet ⇨ GeoJSON ⇨ Package ⇨ download

⇩ ⇨ 定义坐标系

做法

引入依赖库

如果只是实现一个 demo 或者要将代码直接写在 HTML 中,则建议采用 CDN 的方案。

对于使用 node.js 开发的就直接 npm 下来项目。

我这边是使用 Visual Studio Code 和 dojo 开发,所以通过 NPM 下载编译好的项目,从项目中取了对应的 JS 文件。然后在 dojo 中直接调用。

ArcGIS API for JS的开发 —— 纯 JS 实现 shp 文件下载(二)引言做法

修改坐标系定义

由于 shpwrite.js 的库是默认使用了 WGS84 UTM ,所以导出来的所有 矢量文件 都定义成了 UTM。

本人在项目 ArcGIS JS 的开发中并 未定义 具体项目采用的坐标系。

从图形坐标来看,应该是默认全部转化成 Web 墨卡托了。

所以需要在 坐标系描述的那个模块,调整默认坐标系。

//下为坐标文件的描述,有需要的同学也可以根据具体的项目需求设置坐标系,或者提供坐标系选择的窗口
114: [function(require, module, exports) {
    // module.exports = 'GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]';
    module.exports = 'PROJCS["WGS_1984_Web_Mercator_Auxiliary_Sphere",' +
        'GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],' +
        'UNIT["Degree",0.0174532925199433]],PROJECTION["Mercator_Auxiliary_Sphere"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],' +
        'PARAMETER["Central_Meridian",0.0],PARAMETER["Standard_Parallel_1",0.0],PARAMETER["Auxiliary_Sphere_Type",0.0],UNIT["Meter",1.0]]';
           

调用方法

//定义 依赖库 shp-write 的下载配置/
var options = {
    folder: 'myshapes',//文件夹名字
    types: {
        point: 'mypoint', //点图层的文件名,下同
        line: "myline", 
        polygon: 'mypolygons'
    }
};

//选择图层,实例变量
var layer = Layeritem.layer //我是在图层列表这个控件中实现图层下载的

//图层获取图形数据的方法只能使用 queryFeatures(),而不能使用 source属性。
var collection1 = layer.queryFeatures().then(function(featureSet) {
	var geojsons = arcgis2geojsonUtil.arcgisToGeoJSON(featureSet);//转化数据为GeoJSON
   	shpwrite.download(geojsons, options) //下载数据
});
           

继续阅读