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>