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);
	}

---------------------------------------------------------------------------------------------------------------

技术博客

http://blog.csdn.NET/gisshixisheng

在线教程

http://edu.csdn.Net/course/detail/799
Github

https://github.com/lzugis/

联系方式

q       q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)
             337469080(Android)