ArcGIS API For JavaScript利用GP服务生成等值线、等值面
继上文 arcgis api for javascript 利用gp服务生成等值线、等值面(一)之生成等值面说了等值线的建模,这次说一下等值面。
二、等值面
2.1 建模
准备环境和用到的插值算法之前说过就不再赘述了,下面直接上图:
主要思路是利用栅格计算器raster calculator提前对栅格值进行归类,再通过栅格转面工具将栅格转成矢量。下面来具体看一下idw和栅格计算器工具。
idw工具:
和生成等值线的工具一样,无需刻意设置什么,output cell size表示生成的像元大小,是自动生成的,也可以自己设置。实际运行过程中,发现这里设置的像元越小,生成的栅格像素精度越高,转出的矢量越准确(通过和同等数据源的等值线对比),当然还要考虑运行效率的问题,可以选一个效率高且能保证精度的数值。
栅格计算器:
这里需要详细说明下:
1.普通的连线是无法连接栅格和栅格计算器工具的,对于栅格计算器的说明可以点击这里,在官方文档里可以看到rastercalculator (expression, output_raster)是没有输入栅格的参数的。我们打开拖入模型的栅格计算器工具,发现输入中已经存在了当前模型内的所有栅格文件,输入有了,那如何才能通过连线才能确保流程准确性呢?查看帮助文档,在“环境”中可以看到“捕捉栅格”
点击可以看到,捕捉栅格的目的是为了让输出栅格与捕捉栅格像元大小一致,那么可以这样连线:
这样就可以了!
2.栅格计算器有点类似于字段计算器,双击列表里要计算的栅格,可以自动生成表达式,再说一下con(a,b,c)这个函数,类似于三元运算符,a如果true,执行b,如果为false,执行c。
下面是根据10、25、50、100、200重新计算栅格的表达式示例:
con("%outputint%" <= 0,0,con("%outputint%" < 10,1,con("%outputint%" < 25,11,con("%outputint%" < 50,26,con("%outputint%" < 100,51,con("%outputint%" < 200,101,201))))))
这样运行模型,设置显示标注,就能查看到效果了:
这样发布即可,发布过程可参考等值线。
js代码参考如下:
require([ "esri/map", "esri/layers/arcgistiledmapservicelayer", "esri/layers/arcgisdynamicmapservicelayer", "esri/geometry/point", "esri/spatialreference", "esri/layers/imageparameters", "esri/symbols/simplemarkersymbol", "esri/symbols/textsymbol", "esri/layers/labelclass", "esri/renderers/simplerenderer", "esri/layers/featurelayer", "esri/color", "esri/symbols/simplelinesymbol", "esri/layers/graphicslayer", "esri/graphic", "esri/tasks/featureset", "esri/geometry/geometryengine", "esri/tasks/geoprocessor", "dojo/domready!"], function(map, arcgistiledmapservicelayer,arcgisdynamicmapservicelayer, point, spatialreference, imageparameters,simplemarkersymbol,textsymbol, labelclass,simplerenderer,featurelayer,color,simplelinesymbol,graphicslayer,graphic,featureset,geometryengine,geoprocessor) { var map = new map("map", { // center: new point(1.3091608700115489e7, 4273624.108445918, new spatialreference({ wkid: 3857 })), autoresize:true, sliderstyle: "small", logo: false, showlabels : true }); var basespatialref = new spatialreference({"wkt":'geogcs["wgs 84",datum["wgs_1984",spheroid["wgs 84",6378137.0,298.257223563]],primem["greenwich",0.0],unit["degree",0.0174532925199433]]'}); var tiled = new arcgisdynamicmapservicelayer("https://localhost:6080/arcgis/rest/services/sishui/sishuifeature/mapserver"); map.addlayer(tiled); var gp = new geoprocessor("https://localhost:6080/arcgis/rest/services/test/dengzhimian/gpserver/dengzhimian"); //var gp = new geoprocessor("https://localhost:6080/arcgis/rest/services/test/dengzhimian2/gpserver/dengzhimian2"); var graphiclayer = new graphicslayer({id:"dian"}); var sssym = new simplemarkersymbol({ "color": [255,255,255,64], "size": 12, "angle": -30, "xoffset": 0, "yoffset": 0, "type": "esrisms", "style": "esrismscircle", "outline": { "color": [0,0,0,255], "width": 1, "type": "esrisls", "style": "esrislssolid" } }); var features = []; var graphic1 = new graphic(new point(117.320358,35.725506,basespatialref),sssym,{"zvalue":10}); var graphic2 = new graphic(new point(117.251434,35.699341,basespatialref),sssym,{"zvalue":30}); var graphic3 = new graphic(new point(117.522662,35.618930,basespatialref),sssym,{"zvalue":400}); var graphic4 = new graphic(new point(117.275685,35.564684,basespatialref),sssym,{"zvalue":28}); var graphic5 = new graphic(new point(117.447444,35.755972,basespatialref),sssym,{"zvalue":70}); var graphic6 = new graphic(new point(117.155146,35.627075,basespatialref),sssym,{"zvalue":100}); var graphic7 = new graphic(new point(117.404478,35.651812,basespatialref),sssym,{"zvalue":0}); var graphic8 = new graphic(new point(117.105020,35.770945,basespatialref),sssym,{"zvalue":180}); //显示数据源,用于展示等值面效果 graphiclayer.add(graphic1); graphiclayer.add(graphic2); graphiclayer.add(graphic3); graphiclayer.add(graphic4); graphiclayer.add(graphic5); graphiclayer.add(graphic6); graphiclayer.add(graphic7); graphiclayer.add(graphic8); map.addlayer(graphiclayer); //组装输入参数 features.push(graphic1); features.push(graphic2); features.push(graphic3); features.push(graphic4); features.push(graphic5); features.push(graphic6); features.push(graphic7); features.push(graphic8); var featureset = new featureset(); featureset.features = features; var para = { inputpoints:featureset, zvalue:"zvalue" // clipfeature:"xian1" } //生成矢量等值面 gp.submitjob(para,function(result){ var miangraphiclayer = new graphicslayer({id:"dengzhimian"}); var symbol = new esri.symbol.simplefillsymbol(); symbol.setcolor(new dojo.color([150,150,150,0.5])); var renderer = new esri.renderer.classbreaksrenderer(symbol, "gridcode");//根据输出矢量的gridcode字段分类渲染 renderer.addbreak(1,9,new esri.symbol.simplefillsymbol().setcolor(new dojo.color([56, 168, 0,0.5]))); renderer.addbreak(10,24,new esri.symbol.simplefillsymbol().setcolor(new dojo.color([139, 209, 0,0.5]))); renderer.addbreak(25,49,new esri.symbol.simplefillsymbol().setcolor(new dojo.color([255,255,0,0.5]))); renderer.addbreak(50,99,new esri.symbol.simplefillsymbol().setcolor(new dojo.color([255,128,0,0.5]))); renderer.addbreak(100,199,new esri.symbol.simplefillsymbol().setcolor(new dojo.color([255,128,0,0.5]))); renderer.addbreak(200,infinity,new esri.symbol.simplefillsymbol().setcolor(new dojo.color([255,0,0,0.5]))); miangraphiclayer.setrenderer(renderer); var jobid = result.jobid; var status = result.jobstatus; if(status == esri.tasks.jobinfo.status_succeeded) { //成功之后,将其中的结果取出来,当然这也是参数名字。 //在模型中,想要取出中间结果,需要设置为模型参数 gp.getresultdata(jobid, "output", function(jobinfo){ var features = jobinfo.value.features; dojo.foreach(features,function(graphic){ miangraphiclayer.add(graphic); }); map.addlayer(miangraphiclayer); }); } }); });
这个服务是之前发布的,当时idw的像元大小采用的默认值,并不是上面idw图片中的数值,因此代码结果和arcmap运行结果有点出入,正常发布的话是不会有问题的,当然,这也侧面说明了idw像元大小的设定很有必要,它决定了生成等值面的质量,下面看图:
下一篇: 了解豆腐皮热量,学会他正确的烹制方法