ArcGIS API For Javascript調用結果地圖服務


 

 

 

1.引言

結果地圖服務也是GP服務的一種,當GP服務的結果返回柵格數據時,我們往往使用結果地圖服務來對生成的柵格數據進行渲染,如何發布結果地圖服務請看:如何發布結果地圖服務 
本實例是:克里金差值

2.ArcGIS API調用結果地圖服務

首先我們查看一下服務的定義:

這里寫圖片描述

這里寫圖片描述

2.1代碼實現

  • 在頁面添加地圖(略)
  • 創建兩個按鈕(一個是畫點,一個是進行插值運算)
<input id="Btn" type="button" value="畫點" /> <input id="king" type="button" value="插值分析" />
  • 定義點集合對象
//定義點集合 var pointSet = new FeatureSet(); //定義點符號 var psymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([0, 255, 0, 0.25]));
  • 給畫點的按鈕綁定事件
                //綁定畫點的事件 on(dom.byId("Btn"),"click",function(e){ //定義繪圖工具 var toolBar = new Draw(MyMap, { showTooltips: true }); //激活繪圖工具 toolBar.activate(Draw.POINT); //定義一個i,為了給graphic賦予屬性,為差值做准備。 var i=20; //給繪圖工具綁定繪圖完成事件 on(toolBar, "draw-complete", function(result){ //保證每一次i的值都不一樣,如果所有點的屬性都一樣,是不可以差值的。 i=i+40; //獲得幾何形狀 var geometry = result.geometry; //給圖形一個m屬性,我們后面對m進行差值 var graphicpoint = new Graphic(geometry, psymbol,{"m":i}); pointSet.features.push(graphicpoint); MyMap.graphics.add(graphicpoint); }); }); 
  • 給插值按鈕綁定事件
//聲明gp對象 var gp; on(dom.byId("king"),"click",function(e){ //定義gp服務對象 gp= new Geoprocessor("http://localhost:6080/arcgis/rest/services/Test/myKing/GPServer/king"); //定義GP服務參數對象 var gpParams={}; //添加點集合的字段信息 pointSet.fields=[{ "name":"m", "type":"esriFieldTypeSmallInteger", "alias":"m" }]; //添加Input參數 gpParams.Input=pointSet; //添加Z屬性:即差值的屬性 gpParams.Z="m"; gp.submitJob(gpParams,completeCallback); })
  • 回掉函數處理結果
function completeCallback(jobInfo) { gp.on("get-result-image-layer-complete",function(gpLayer){ MyMap.addLayer(gpLayer["layer"]) }) gp.getResultImageLayer(jobInfo.jobId,"out"); }

2.2 全部代碼

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>GP</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <style type="text/css"> .MapClass{ width:100%; height:600px; border:1px solid #000; } </style> <script type="text/javascript" charset="utf-8"> require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/dom", "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/toolbars/draw", "esri/symbols/SimpleFillSymbol", "dojo/on","esri/graphic", "esri/layers/ImageParameters", "dojo/domReady!"], function (Map, ArcGISDynamicMapServiceLayer, dom, Geoprocessor, FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol, Draw, SimpleFillSymbol,on,Graphic,ImageParameters) { var MyMap = new Map("MyMapDiv"); var layer = new ArcGISDynamicMapServiceLayer ("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer"); MyMap.addLayer(layer) //定義點集合對象 var pointSet = new FeatureSet(); //定義點符號 var psymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([0, 255, 0, 0.25])); //綁定畫點的事件 on(dom.byId("Btn"),"click",function(e){ //定義繪圖工具 var toolBar = new Draw(MyMap, { showTooltips: true }); //激活繪圖工具 toolBar.activate(Draw.POINT); //定義一個i,為了給graphic賦予屬性,為差值做准備。 var i=20; //給繪圖工具綁定繪圖完成事件 on(toolBar, "draw-complete", function(result){ //保證每一次i的值都不一樣,如果所有點的屬性都一樣,是不可以差值的。 i=i+40; //獲得幾何形狀 var geometry = result.geometry; //給圖形一個m屬性,我們后面對m進行差值 var graphicpoint = new Graphic(geometry, psymbol,{"m":i}); pointSet.features.push(graphicpoint); MyMap.graphics.add(graphicpoint); }); }); var gp; on(dom.byId("king"),"click",function(e){ //定義gp服務對象 gp= new Geoprocessor("http://localhost:6080/arcgis/rest/services/Test/myKing/GPServer/king"); //定義GP服務參數對象 var gpParams={}; //添加點集合的字段信息 pointSet.fields=[{ "name":"m", "type":"esriFieldTypeSmallInteger", "alias":"m" }]; //添加Input參數 gpParams.Input=pointSet; //添加Z屬性:即差值的屬性 gpParams.Z="m"; //執行gp服務,注意這里是執行submitJob,因為是同步的gp服務 gp.submitJob(gpParams,completeCallback); }) function completeCallback(jobInfo) { //給gp服務綁定獲得圖層事件 gp.on("get-result-image-layer-complete",function(gpLayer){ //將圖層添加到地圖中 MyMap.addLayer(gpLayer["layer"]) }) //注意out是服務定義的參數 gp.getResultImageLayer(jobInfo.jobId,"out"); } }); </script> </head> <body> <div id="MyMapDiv" class="MapClass"></div> <input id="Btn" type="button" value="畫點" /> <input id="king" type="button" value="插值分析" /> </body> </html> 

運行代碼之前:

這里寫圖片描述

運行代碼之后:

這里寫圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM