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选择列表：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " BufferSample._Default "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > Untitled Page </ title >
     < link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css" >
     < script  src ="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"  type ="text/javascript" ></ script >
     < script  src ="javascript/webapp.js" ></ script >
     < style  type ="text/css" >
        #Text1
         {
            width :  54px ;
         }
     </ style >
</ head >
< body  class ="tundra" >
     < form  id ="form1"  runat ="server" >
     < table >
     < tr >< td >< div >
         < input  id ="Button1"  type ="button"  value =" 点 "  onclick ="tb.activate(esri.toolbars.Draw.POINT);map.hideZoomSlider();"   /> &nbsp;
         < input  id ="Button2"  type ="button"  value =" 线 "  onclick ="tb.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();"   /> &nbsp;
         < input  id ="Button3"  type ="button"  value =" 面 "  onclick ="tb.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();"   /> &nbsp;
         < input  id ="Button4"  type ="button"  value ="漫 游"  onclick ="tb.deactivate();map.showZoomSlider();"      /> &nbsp;  
         &nbsp; WKID: < input  id ="wkid"  style ="width:40px"  type ="text"  value ="102113"   /> Buffer距离: < input  id ="distance"  style ="width:40px"  type ="text"  value ="25"   />
         < select  id ="unit"  name ="unit" >
         < option  value ="UNIT_STATUTE_MILE" > 英里 </ option >
     < option  value ="UNIT_FOOT" > 码 </ option >
     < option  value ="UNIT_KILOMETER" > 千米 </ option >
     < option  value ="UNIT_METER" > 米 </ option >
     < option  value ="UNIT_NAUTICAL_MILE" > 海里 </ option >
     < option  value ="UNIT_US_NAUTICAL_MILE" > 美式海里 </ option >
     < option  value ="UNIT_DEGREE" > 度 </ option >
</ select >
         < input  id ="Button5"  type ="button"  value ="清 除"  onclick ="map.graphics.clear();"   />
         </ div ></ td >< td ></ td ></ tr >
     < tr >< td >< div  id ="map"  style ="width:550px; height:400px; border:1px solid #000;" ></ div ></ td >< td  valign ="top"  align ="left" > dd </ td ></ tr >
     </ table >
    
    
     </ form >
</ body >
</ html >

3、上面的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  };

var  map,tb,geometryService,queryTask,query;
function  init()
{
   startExtent  =   new  esri.geometry.Extent( - 183.780014745329 , 16.2975638854873 , - 61.4068547410964 , 74.0304580085983 ,  new  esri.SpatialReference({wkid: 4269 }));
   map  =   new  esri.Map( " map " );
    // 底图Tile图
    var  imageryPrime  =   new  esri.layers.ArcGISTiledMapServiceLayer( " http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer " );
   map.addLayer(imageryPrime);
   
    var  usa  =   new  esri.layers.ArcGISDynamicMapServiceLayer( " http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer " );
    // 设置要显示的图层
    // usa.setVisibleLayers([0]);
    // 设置图层透明度
   usa.setOpacity( 0.8 );
   map.addLayer(usa);
    // 设置地图视图范围
   map.setExtent(startExtent);
   geometryService  =   new  esri.tasks.GeometryService( " http://jh-53a435fbc0e8/ArcGIS/rest/services/Geometry/GeometryServer " );
   tb  =   new  esri.toolbars.Draw(map);
   dojo.connect(tb,  " onDrawEnd " , doDraw);
}

// 画图
function  doDraw(geometry)
{
    // 根据图形的类型定义显示样式
    switch  (geometry.type)
   {
       case   " point " :
           var  symbol  =   new  esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,  10 ,  new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  new  dojo.Color([ 255 , 0 , 0 ]),  1 ),  new  dojo.Color([ 0 , 255 , 0 , 0.25 ]));
           break ;
       case   " polyline " :
            var  symbol  =   new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,  new  dojo.Color([ 255 , 0 , 0 ]),  1 );
            break ;
       case   " polygon " :
            var  symbol  =   new  esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  new  dojo.Color([ 0 , 0 , 0 ]),  1 ),  new  dojo.Color([ 255 , 0 , 0 , 0.25 ]));
            break ;
   }
    // 把绘制的图形添加到map.graphics进行显示
    var  graphic  =   new  esri.Graphic(geometry, symbol);
   map.graphics.add(graphic);
   
    // 如果是面需要先进行simplify操作，否则直接进行buffer
    if (geometry.type  ===   " polygon " )
   {
      geometryService.simplify([graphic],doSimplify);
   }
    else
   {
      doBuffer([graphic]);
   }
}

// simplify结束调用buffer
function  doSimplify(graphics)
{
   doBuffer(graphics);
}

function  doBuffer(graphics)
{
    // buffer参数
    var  params  =   new  esri.tasks.BufferParameters();
    // buffer的范围值，从输入框中获取
   params.distances  =  [ dojo.byId( " distance " ).value ];
    // 空间参考
   params.bufferSpatialReference  = new  esri.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的结果
function  showBuffer(features)
{
    var  symbol  =   new  esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new  dojo.Color([ 255 , 0 , 0 , 0.65 ]),  2 ), new  dojo.Color([ 255 , 0 , 0 , 0.35 ]));
    for  ( var  j = 0 ;j < features.length;j ++ )
   {
       var  graphic  =   new  esri.Graphic(features[j].geometry,symbol);
      map.graphics.add(graphic);
   }
   tb.deactivate();
   map.showZoomSlider();
   
}

dojo.addOnLoad(init);

5、这样就完成了buffer的例子。