ArcGIS1Server和ArcGISAPIforJavaScript实现点线面的buffer分析.doc

ArcGIS.Server.9.3和ArcGIS API for JavaScript实现点、线、面的buffer分析目的：1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现实现点、线、面的buffer分析，这里是通过GeometryServer实现。准备工作：1. 在ArcGis Server9.3中发布名为usa的MapServer。2. 在ArcGis Server9.3中发布名为Geometry的GeometryServer。完成后的效果图：开始0.关于GeometryServer的介绍，可以看本系列的第九篇。1.启动vs新建名为BufferSample的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建wabapp.js的文件，这里用来编写我们自己的js代码了，在Default.aspx页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、5个input的功能按钮、2个input的输入框、1个select选择列表： UntitledPage#Text1width:54px;     WKID:Buffer距离:英里码千米米海里美式海里度dd3、上面的html代码中主要可以看一下5个input按钮的onclick事件，分别实现了画点、画线、画面、漫游、清楚图形的代码很简单了，还有就是单位选择的select了已经添加了7个常用的单位。4、切换到wabapp.js编写js代码，本例子的js代码分为3部分功能，第一载入地图进行显示；第二进行画点、线、面操作；第三根据画的点、线、面图形进行buffer分析。具体的说明看代码注释：dojo.require(“esri.map“);dojo.require(“esri.tasks.geometry“);dojo.require(“esri.toolbars.draw“);dojo.require(“esri.tasks.query“); djConfig=isDebug:true;varmap,tb,geometryService,queryTask,query;functioninit()startExtent=newesri.geometry.Extent(-183.780014745329,16.2975638854873,-61.4068547410964,74.0304580085983,newesri.SpatialReference(wkid:4269);map=newesri.Map(“map“);/底图Tile图varimageryPrime=newesri.layers.ArcGISTiledMapServiceLayer(“/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer“);map.addLayer(imageryPrime);varusa=newesri.layers.ArcGISDynamicMapServiceLayer(“http:/jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer“);/设置要显示的图层/usa.setVisibleLayers(0);/设置图层透明度usa.setOpacity(0.8);map.addLayer(usa);/设置地图视图范围map.setExtent(startExtent);geometryService=newesri.tasks.GeometryService(“http:/jh-53a435fbc0e8/ArcGIS/rest/services/Geometry/GeometryServer“);tb=newesri.toolbars.Draw(map);dojo.connect(tb,“onDrawEnd“,doDraw);/画图functiondoDraw(geometry)/根据图形的类型定义显示样式switch(geometry.type)case“point“:varsymbol=newesri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,10,newesri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,newdojo.Color(255,0,0),1),newdojo.Color(0,255,0,0.25);break;case“polyline“:varsymbol=newesri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,newdojo.Color(255,0,0),1);break;case“polygon“:varsymbol=newesri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,newesri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,newdojo.Color(0,0,0),1),newdojo.Color(255,0,0,0.25);break;/把绘制的图形添加到map.graphics进行显示vargraphic=newesri.Graphic(geometry,symbol);map.graphics.add(graphic);/如果是面需要先进行simplify操作，否则直接进行bufferif(geometry.type=“polygon“)geometryService.simplify(graphic,doSimplify);elsedoBuffer(graphic);/simplify结束调用bufferfunctiondoSimplify(graphics)doBuffer(graphics);functiondoBuffer(graphics)/buffer参数varparams=newesri.tasks.BufferParameters();/buffer的范围值，从输入框中获取params.distances=dojo.byId(distance).value;/空间参考params.bufferSpatialReference=newesri.SpatialReference(wkid:dojo.byId(“wkid“).value);/输出结果的空间参考params.outSpatialReference=map.spatialReference;params.features=graphics;/buffer的单位，从列表框获取params.unit=eval(“esri.tasks.BufferParameters.“+dojo.byId(“unit“).value);/buffer操作geometryService.buffer(params,showBuffer);/显示buffer的结果functionshowBuffer(features)varsymbol=newesri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,newesri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,newdojo.Color(255,0,0,0.65),2),newdojo.Color(255,0,0,0.35);for(varj=0;jfeatures.length;j+)vargraphic=newesri.Graphic(featuresj.geometry,symbol);map.graphics.add(graphic);tb.deactivate();map.showZoomSlider();dojo.addOnLoad(init);5、这样就完成了buffer的例子。标签：arcgis api javasrcipt、arcgis server 9.3、buffer 149 Views|1条评论 ArcGIS.Server.9.3和ArcGIS API for JavaScript保存自定义图形（十） 2009年09月10日 10:01 上午|分类：JavaScript目的：1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现自定义图形，保存自定义的Graphic图形到服务端的xml文件中，同时也能在地图载入时读入xml中的图形数据显示到地图中。 这里的自定义面的Label是通过GeometryServer的labelPoints实现的。准备工作：1. 在ArcGis Server9.3中发布名为Geometry的GeometryServer。完成后的效果图：开始0.关于GeometryServer的labelPoints介绍，labelPoints允许在多边形中指定Label显示的位置点,是jsapi1.2才支持的新功能，需要需要ArcGIS Server 9.3 sp1支持。1.启动vs新建名为SaveGraphics的ASP.NET Web应用程序。2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建mapfunc.js的文件，这里用来编写我们自己的js代码了，在Default.aspx页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、2个input的功能按钮： UntitledPageimport”/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css”;  3、上面的html代码很简单主要是2个input的画图、漫游功能按钮。4、切换到mapfunc.js开始编写js代码，现在从执行顺序来说明代码。5、首先是初始化地图显示的init()方法：functioninit()map=newesri.Map(“map“,extent:newesri.geometry.Extent(-183.780014745329,16.2975638854873,-61.4068547410964,74.0304580085983,newesri.SpatialReference(wkid:4269);varusamap=newesri.layers.ArcGISTiledMapServiceLayer(“/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer“);map.addLayer(usamap);toolbar=newesri.toolbars.Draw(map);dojo.connect(toolbar,“onDrawEnd“,doDraw);/添加map载入后事件监听，用来从xml中读入自定义的图形在地图上显示dojo.connect(map,“onLoad“,showGraphic);/设置infoWindow的大小Window.resize(200,100);/设置infoWindow的标题头Window.setTitle(“输入名称“);/实例化GeometryServicegeometryService=newesri.tasks.GeometryService(“http:/mypc/ArcGIS/rest/services/Geometry/GeometryServer“); 6、上面的init()方法中执行了dojo.connect(map,”onLoad”,showGraphic);代码，所以接下来是showGraphic()方法代码：/map载入后事件监听，用来从xml中读入自定义的图形在地图上显示functionshowGraphic()/延迟1秒执行setTimeout(loadGraphic,1000);7、上面的showGraphic()方法调用了loadGraphic()方法，这样方法中用了dojo的ajax功能向服务端请求获取服务端的xmlData/xmlGraphic.xml数据，关于dojo.xhrGet方法可以参考dojo的帮助, 这里首先来看一下xmlGraphic.xml中保存的数据，如下：-“geometry”:“rings”:-107.3883566182127,25.740182822042797,-112.9254659932127,25.828073447042797,-115.7379659932127,31.189401572042797,-110.8160909932127,31.540964072042797,-105.5426534932127,28.904245322042797,-107.3883566182127,25.740182822042797,”spatialReference”:“wkid”:4269,”attributes”:“id”:”0,”title”:”广东”,”symbol”:“color”:216,67,48,128,”outline”:“color”:216,67,48,255,”width”:0.75,”style”:”esriSLSSolid”,”style”:”esriSFSSolid”-“geometry”:“x”:-110.640309743213,”y”:28.6224372863286,”spatialReference”:“wkid”:4269,”attributes”:“title”:”广东”,”symbol”:“color”:0,0,0,255,”style”:”esriTS”,”angle”:0,”xoffset”:0,”yoffset”:0,”text”:”广东”,”align”:”middle”,”decoration”:”none”,”rotated”:false,”kerning”:true,”font”:“size”:”20px”,”style”:”normal”,”variant”:”normal”,”weight”:”bolder”,”family”:undefined。上面的xml片段中保存了2条geometry记录，一个是多边形、一个是点，都是以json的格式保存，程序要做的就是读取这些geometry记录显示到地图上。下面的loadGraphic()方法用ajax的方式请求服务端的getG.aspx页面，getG.aspx页面的cs代码（具体C#代码贴在文章备注中）会读取xmlData/xmlGraphic.xml数据返回给客户端。/读取服务端的xml文件里保存的自定义图形数据functionloadGraphic()dojo.xhrGet(url:“getG.aspx“,handleAs:“json“,preventCache:true,load:dojo.hitch(this,“getEnd“);8、上面的loadGraphic()方法获取服务端xmlData/xmlGraphic.xml文件的数据，完成后执行getEnd(graphics)方法把获取来的图形数据显示在地图上：/读取ml文件里自定义图形完成后添加到map进行显示functiongetEnd(graphics)for(vari=0;igraphics.Graphic.length;i+)varg=graphics.Graphici;vargraphic=newesri.Graphic(g);map.graphics.add(graphic);9、上面是载入xml保存的图形的过程了，接下来讲保存的过程。10、添加首先是点击地图上的画图按钮然后执行onclick时间，在html代码中可以看到onclick=”toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();”就是把地图状态设置成画POLYGON状态。11、然后就是在地图上进行画POLYGON画图完成后执行doDraw(geometry)方法，把图形添加到map.graphics中进行显示同时显示infoWindow让用户输入名称进行确认保存，代码如下：/画图functiondoDraw(geometry)/随机颜色varnumR=Math.ceil(Math.random()*255);varnumG=Math.ceil(Math.random()*255);varnumB=Math.ceil(Math.random()*255);/定义样式varhighlightSymbol=newesri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,newesri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,newdojo.Color(numR,numG,numB),1),newdojo.Color(numR,numG,numB,0.5);/设置图形显示样式vargraphic=newesri.Graphic(geometry,highlightSymbol);/清除上一次的画图内容map.graphics.add(graphic);/获取图形的中心点varcenterPoint=map.toScreen(graphic.geometry.getExtent().getCenter();/在图形的中心点显示infoWWindow.show(centerPoint,map.getInfoWindowAnchor(centerPoint);varindex=map.graphics.graphics.length-1;/设置infoWindow的显示内容varcontent=“名称：    “;Window.setContent(content);12、上面的代码中infoWindow显示的内容如上面的效果图，一个输入框、一个保存按钮、一个取消按钮。输入名称然后点击保存按钮时保存当前所画的图形，保存代码：/infoWindow中保存按钮的事件functionfinash(index)/获取输入的名字vartitleStr=dojo.byId(nameText).value;/获取当前所画的图形varcgraphic=map.graphics.graphicsindex;/设置图形的属性，id、titlecgraphic.attributes=id:index,title:titleStr;tempGraphic=cgraphic;/对面图形进行geometryService的simplify操作geometryService.simplify(cgraphic,getLabelPoints);/获取当前所画图形的json字符串用来保存vargraphicStr=dojo.toJson(cgraphic.toJson();/设置ajax请求的参数varparams=graphic:graphicStr/用dojo的xhrGet的ajax方法把图形的json字符串提交到服务端保存dojo.xhrGet(url:“saveG.aspx“,handleAs:“text“,preventCache:true,content:params,load:dojo.hitch(this,“saveEnd“);/隐藏infoWWindow.hide();13、上面的finash(index)方法中把当前所画的图形的json字符通过ajax请求服务端的saveG.aspx页面，saveG.aspx页面的cs代码（具体C#代码贴在文章备注中）会把图形的json字符串保存到xmlData/xmlGraphic.xml中。finash方法还调用了geometryService的simplify操作目的是进行接下来的labelPoints操作为图形添加Label显示。14、labelPoints操作的代码：functiongetLabelPoints(graphics)geometryService.labelPoints(graphics,showLabel); /显示Label，同时保存Label点到服务端的xmlfunctionshowLabel(labelPoints)/定义字体varfont=newesri.symbol.Font(“20px“,esri.symbol.Font.STYLE_NORMAL,esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_BOLDER);for(vari=0;ilabelPoints.length;i+)/获取输入框输入的内容varlabelstr=dojo.byId(nameText).value;/定义样式vartextSymbol=newesri.symbol.TextSymbol(labelstr,font,newdojo.Color(0,0,0);/设置样式labelPointsi.setSymbol(textSymbol);/设置属性labelPointsi.attributes=title:labelstr;/添加到地图上显示map.graphics.add(labelPointsi);/获取Label点的json字符串内容vargraphicStr=dojo.toJson(labelPointsi.toJson();/提交到服务端进行保存varparams=graphic:graphicStrdojo.xhrGet(url:“saveG.aspx“,handleAs:“text“,preventCache:true,content:params);15、保存结束的提示方法，上面的代码中有用到。/保存结束进行提示functionsaveEnd(text)alert(text);16、通过上面的代码我们把画的图形和Label的点的json内容保存到的xml中。17、取消按钮代码：/infoWindow中取消按钮的事件functioncancel(index)for(vari=0;imap.graphics.graphics.length;i+)varcgraphic=map.graphics.graphicsindex;map.graphics.remove(cgraphic);Window.hide();18、取消按钮的代码就是不保存当前所画的图形，同时删除在map上的显示。19、初始化调用。dojo.addOnLoad(init);20、这样就完成了自定义图层的保存和读取显示。备注：getG.aspx页面的html代码为空，cs代码如下：usingSystem;usingSystem.Collections;usingSystem.Configuration;usingSystem.Data;usingSystem.Linq;usingSystem.Web;usingSystem.Web.Security;usingSystem.Web.UI;usingSystem.Web.UI.HtmlControls;usingSystem.Web.UI.WebControls;usingSystem.Web.UI.WebControls.WebParts;usingSystem.Xml.Linq;usingSystem.Xml;usingSystem.IO;usingSystem.Xml.XPath;usingSystem.Text; namespaceLabelingSamplepublicpartialclassgetG:System.Web.UI.PageprotectedvoidPage_Load(objectsender,EventArgse)stringfilepath=“xmlData/xmlGraphic.xml“;FileInfoTheFile=newFileInfo(Server.MapPath(filepath);if(TheFile.Exists)/XmlDocumentxmldoc=newXmlDocument();/xmldoc.Load(Server.MapPath(filepath);stringjson=toJson(Server.MapPath(filepath);Response.Write(json);elseResponse.Write(“nodata“);privatestringtoJson(stringpath)StringBuilderjson=newStringBuilder();json.Append(“Graphic“:);XPathDocumentxpdoc=newXPathDocument(path);XPathNavigatornavigator=xpdoc.CreateNavigator();XPathNodeIteratormyXPathNodeIterator=navigator.Select(Graphics/Graphic/Content);while(myXPathNodeIterator.MoveNext()stringtempStr=myXPathNodeIterator.Current.Value;/stringtempStr=1;if(myXPathNodeIterator.CurrentPosition=1)json.AppendFormat(0,tempStr);elsejson.AppendFormat(0,(,+tempStr);json.Append(“);returnjson.ToString();saveG.aspx页面的html代码为空，cs代码如下：usingSystem;usingSystem.Collections;usingSystem.Configuration;usingSystem.Data;usingSystem.Linq;usingSystem.Web;usingSystem.Web.Security;usingSystem.Web.UI;usingSystem.Web.UI.HtmlControls;usingSystem.Web.UI.WebControls;usingSystem.Web.UI.WebControls.WebParts;usingSystem.Xml.Linq;usingSystem.Xml;usingSystem.IO; namespaceLabelingSamplepublicpartialclasssaveG:System.Web.UI.PageprotectedvoidPage_Load(objectsender,EventArgse)stringgraphic=Request.Paramsgraphic.ToString();buildXML(graphic);Response.Write(“保存成功！“);privatevoidbuildXML(stringgraphic)stringfilepath=“xmlData/xmlGrap