2008年12月10 日 ArcGIS.Server.9.3 和ArcGIS API for JavaScript实现点、线、面的

xuqiang · 发表于 2010-6-21 13:08

      2008年12月10日
                              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选择列表：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

-->

<%

@&#160

age 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>

        <input id="Button1" type="button" value=" 点 " onclick="tb.activate(esri.toolbars.Draw.POINT);map.hideZoomSlider();" />

        <input id="Button2" type="button" value=" 线 " onclick="tb.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();" />

        <input id="Button3" type="button" value=" 面 " onclick="tb.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();" />

        <input id="Button4" type="button" value="漫 游" onclick="tb.deactivate();map.showZoomSlider();" />  

         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>

    </table>

    </form>

</body>

</html>

3、上面的html代码中主要可以看一下5个input按钮的onclick事件，分别实现了画点、画线、画面、漫游、清楚图形的代码很简单了，还有就是单位选择的select了已经添加了7个常用的单位。

4、切换到wabapp.js编写js代码，本例子的js代码分为3部分功能，第一载入地图进行显示；第二进行画点、线、面操作；第三根据画的点、线、面图形进行buffer分析。具体的说明看代码注释：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

-->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);