前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Arcgis for Js实现Spline插值、区域裁剪以及页面的轮播效果

Arcgis for Js实现Spline插值、区域裁剪以及页面的轮播效果

作者头像
lzugis
发布2018-10-23 11:38:52
2.6K0
发布2018-10-23 11:38:52
举报

概述:

本文讲述如何利用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、前台调用

代码语言:javascript
复制
    /**
     * 插值计算
     */
	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);
	}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年12月26日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档