1、使用arcgis for js 4.17 在线发布shp地图服务
在webappbuilder 里面进行代码的添加
js代码:
define(["dojo/_base/declare", "jimu/BaseWidget", "esri/request", "esri/layers/FeatureLayer", "esri/layers/support/Field", "esri/Graphic"], function(a, b,request,FeatureLayer,Field,Graphic) { return a([b], { baseClass: "jimu-widget", postCreate: function() { this.inherited(arguments); console.log("postCreate") }, startup: function() { //portal的地址,这里写的是自己部署的地址 var portalUrl ="https://laptop-rt68uhoi.cityk.com/arcgis"; var me = this; this.inherited(arguments); document.getElementById("uploadForm").addEventListener("change", function (event) { var fileName = event.target.value.toLowerCase(); if (fileName.indexOf(".zip") !== -1) { uploadFile(fileName); } else { document.getElementById("upload-status").innerHTML = '<p style="color:red">Add shapefile as .zip file</p>'; } }); //上传数据 function uploadFile(fileName) { document.getElementById("upload-status").innerHTML = "<b>加载 </b>" + fileName; request(portalUrl + "/rest/services/System/PublishingTools/GPServer/uploads/upload", { responseType: "json", body: document.getElementById("uploadForm") }) .then(function (response) { var data = response.data; if(data.success){ var itemId=data.item.itemID; var fileName = data.item.itemName.substring(0,data.item.itemName.length-4); document.getElementById("upload-status").innerHTML ="<b>发布数据...</b>"; publishServer(itemId,fileName); } }) } //发布服务 function publishServer(itemId,fileName){ var publishUrl=portalUrl+"/rest/services/System/PublishingTools/GPServer/Publish%20Portal%20Service/submitJob"; //发布服务 request(publishUrl, { query: { uploadItemId: itemId, fileType: "shapefile", portalPubParameters: '{"name":"'+fileName+'"}', hostedServerPubOptions:"" , returnZ: false, returnM: false, returnTrueCurves: false, context:"" , f: "pjson", }, responseType: "json", }) .then(function (response) { var data = response.data; //使用定时器轮询获取发布状态 var job= setInterval(() => { getJobStatus((result)=>{ clearInterval(job); if(result){ document.getElementById("upload-status").innerHTML ="<b>发布成功</b>"; loadServer(fileName); } else{ document.getElementById("upload-status").innerHTML ="<b>发布失败</b>"; } }); }, 1000); function getJobStatus(callback){ request(portalUrl + "/rest/services/System/PublishingTools/GPServer/Publish Service Definition/jobs/"+data.jobId+"?f=json", {}) .then(function (response) { var data = response.data; if(data.jobStatus == "esriJobFailed"){ callback(null); } else if(data.jobStatus == "esriJobSucceeded"){ callback(data); } }) } }); //加载发布成功的服务 function loadServer(servername){ var url = portalUrl+"/rest/services/Hosted/"+servername+"/FeatureServer/0"; var layer = new FeatureLayer({ url:url, title:servername }); me.sceneView.map.add(layer); } } }, onOpen: function() { console.log("onOpen") }, onClose: function() { console.log("onClose") }, onMinimize: function() { console.log("onMinimize") }, onMaximize: function() { console.log("onMaximize") } }) });
HTML代码:
<div> <form enctype="multipart/form-data" method="post" id="uploadForm"> <div class="field"> <label class="file-upload"> <span><strong>Add File</strong></span> <input type="hidden" name="f" id="inFile2" value="pjson"/> <input type="file" name="file" id="inFile" /> </label> </div> </form> <span class="file-upload-status" style="opacity: 1" id="upload-status" ></span> <div id="fileInfo"></div> </div>