概述:
本文讲述如何利用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);
}