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 中直接調用。

修改坐标系定義

由于 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) //下載下傳資料
});