目的:
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选择列表:
4、切换到 wabapp.js编写js代码,本例子的js代码分为3部分功能,第一载入地图进行显示;第二进行画点、线、面操作;第三根据画的点、线、面图形进行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();" />
< 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 >
< 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个常用的单位。
<! 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();" />
< 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 >
< 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 >
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的例子。
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);