• arcgis for js 发布shp数据地图服务


    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>
  • 相关阅读:
    创建双向数据绑定 ng-model
    数据绑定指令
    ios操作系统输入完成后,键盘没有弹下去的问题
    anjularjs 指令(1)
    关于苹果手机模态框问题
    手机端页面中去除a标签点击时的默认样式
    ffsfsdsfsfd
    8、排列组合
    7、递归的二分查找
    6、递归
  • 原文地址:https://www.cnblogs.com/GIScore/p/14107808.html
Copyright © 2020-2023  润新知