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
Githubhttps://github.com/lzugis/联系方式q       q:1004740957e-mail:niujp08@qq.com公众号:lzugis15Q Q 群:452117357(webgis)
             337469080(Android)