Arcgis for Js實現Spline插值、區域裁剪以及頁面的輪播效果

概述：

本文講述如何利用Arcgis 的Gp服務實現Spline插值，並將插值的結果按照指定的區域進行裁剪，最後將裁剪的結果根據特定的樣式渲染，並在頁面實現多期輪播的這樣一個效果。

實現效果：

實現步驟：

1、模型構建

a、確定需要工具

該功能需要兩個工具：1、Spline，實現插值計算；2、Extract by Mask，實現指定區域的裁剪。

b、確定模型參數

輸入參數：1、計算點；

                    2、計算字段；

輸出參數：1、裁剪後柵格；

常        量：裁剪區域

c、設置輸出樣式

1）執行模型，驗證模型正確性；

2）設置結果樣式，並導出爲lyr圖層；

設置樣式

存爲lyr

3）設置輸出柵格樣式；

2、服務發佈

a、再執行一遍模型

b、設置參數，發佈服務

將服務發佈爲一個MapService

填寫參數

3、前臺調用

    /**
     * 插值計算
     */
	var gpUrl = "http://localhost:6080/arcgis/rest/services/lzugis/MaskSpline/GPServer/Spline";
    var jobIds = [];
    var calcFlag = 0;//循環請求
    $("#calgp").on("click", function ()
    {
    	$("#modal").show();
    	calcFlag = setInterval(calSplineGp,3000);
    }
    );
    function calSplineGp(){
    	var gpFeatures = [];
    	var features = gpData.features;
    	for(var i in features){
    		var feature = features[i];
    		var gpFeature = {
			   "attributes": {
				    "id": i,
				    "name": feature.attributes.name,
				    "heat": Math.random()*100 + 1
			   },
			   "geometry": {
				    "x": feature.geometry.x,
				    "y": feature.geometry.y
			   }
			};
			gpFeatures.push(gpFeature);
    	}
    	var inputFeature = {
    		"features":gpFeatures
    	};
        $.ajax(
        {
            type : "POST",
            cache : false,
            url : gpUrl + "/submitJob?InputFeatures="+JSON.stringify(inputFeature)+"&Field=heat&f=json",
            async : false,
            success : function (result)
            {
                result = eval("(" + result + ")");
                var jobId = result.jobId;
                if (jobId)
                {
                    submitJob(jobId);
                }
                else
                {
                    console.log("計算失敗");
                }
            }
        }
        );
    }
    function submitJob(jobId)
    {
        $.ajax({
            type: "POST",
            cache: false,
            url: gpUrl+"/jobs/"+jobId+"?f=json",
            async: false,
            success: function (result1) {
               result1 = eval("("+result1+")");
                if(result1.jobStatus==="esriJobSucceeded"){
                	jobIds.push(jobId);
                	if(jobIds.length===5){
                		clearInterval(calcFlag);
                		loadResultLayer();
                	}
                }
                else if(result1.jobStatus==="esriJobFailed"){
                	console.log("計算失敗");
                }
                else{
                    submitJob(jobId);
                }
            }
        });
    }
    var showFlag = 0, showIndex=0;
    var gpLayer;
    var gp = new Geoprocessor(gpUrl);
	function loadResultLayer(){
		$("#modal").hide();
		showFlag = setInterval(function(){
			var jobId = jobIds[showIndex];
			gp.getResultImageLayer(jobId, null, null, function(_gpLayer){
				if(gpLayer)map.removeLayer(gLayer);
                gpLayer = _gpLayer;
                gpLayer.setOpacity(0.9);
                map.addLayer(gpLayer);
                gpLayer.on("load",function(){
                	showIndex++;
                	if(showIndex===jobIds.length-1){
                		showIndex = 0;
                	}
                });
            });
		},2000);
	}