1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现距离量算和面积量算,这里主要是通过GeometryServer实现。
准备工作:
1. 在ArcGis Server9.3中发布名为usa的MapServer。
2. 在ArcGis Server9.3中发布名为Geometry的GeometryServer。
完成后的效果图:
开始
0.关于GeometryServer的介绍,Geometry Service,Geometry Service是给程序提供几何计算如 buffering, simplifying, calculating areas 、lengths, projecting等功能,Geometry Service可以用来代替ArcObjects 或geoprocessing service等做的这些几何计算,它是ArcGIS Server 9.3提供的新功能,本例子中就用到了simplifying、calculating areas 、lengths、projecting四个功能。
1.启动vs新建名为MeasureSample的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了,纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了,毕竟可以调试js脚本了。
2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建wabapp.js的文件,这里用来编写我们自己的js代码了,在Default.aspx页面里添加对这个js文件的引用,同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、3个input的功能按钮、一个信息显示的span:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MeasureSample._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 type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
<script type="text/javascript" src="javascript/webapp.js"></script>
</head>
<body class="tundra">
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="距离测量" onclick="toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();" /> <input id="Button2"
type="button" value="面积测量" onclick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();" /> <input id="Button3" type="button"
value="漫 游" onclick="toolbar.deactivate();map.showZoomSlider();" /><span id="distance"></span></div>
<div id="map" class="tundra" style="512px; height:400px; border:1px solid #000;"></div>
</form>
</body>
</html>
3.上面的html代码非常的简单了,主要可以看一下3个功能按钮的onclick事件方法。<!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 type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
<script type="text/javascript" src="javascript/webapp.js"></script>
</head>
<body class="tundra">
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="距离测量" onclick="toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();" /> <input id="Button2"
type="button" value="面积测量" onclick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();" /> <input id="Button3" type="button"
value="漫 游" onclick="toolbar.deactivate();map.showZoomSlider();" /><span id="distance"></span></div>
<div id="map" class="tundra" style="512px; height:400px; border:1px solid #000;"></div>
</form>
</body>
</html>
4.切换到wabapp.js文件编写js功能代码,功能主要是分为3部分,第一载入地图进行显示;第二在地图上进行画线画面的功能;第三根据画的线或者面进行距离或者面积的量算。
5.这样讲一下关于距离和面积的量算,本例子的地图数据usa是采用是地理坐标系wkid为4269,要进行距离或者面积时就必须转换到大地坐标系下,就是地图投影了。本例子中用GeometryServer的project方法把usa投影到大地坐标系下wkid为32618。所以这里无论是距离测量还是面积测量首先必须进行project,对于距离测量完成投影后就可以直接用GeometryServer的lengths方法进行测量,对于面积测量还需要先进行simplify操作后在用GeometryServer的areasAndLengths方法进行测量。
6.具体的代码和说明如下:
dojo.require("esri.map");
dojo.require("esri.toolbars.draw");
dojo.require("esri.tasks.geometry");
var map, toolbar, symbol, geometryService;
function init()
{
map = new esri.Map("map");
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://mypc/ArcGIS/rest/services/USA/MapServer");
map.addLayer(dynamicMapServiceLayer);
toolbar = new esri.toolbars.Draw(map);
//添加toolbar画图完成后天事件监听调用doMeasure
dojo.connect(toolbar, "onDrawEnd", doMeasure);
//实例化GeometryService,地址为ags发布的GeometryServer
geometryService = new esri.tasks.GeometryService("http://mypc/ArcGIS/rest/services/Geometry/GeometryServer");
//添加onProjectComplete完成后事件监听
dojo.connect(geometryService, "onProjectComplete", projectComplete);
}
//量算
function doMeasure(geometry)
{
//更加类型设置显示样式
switch (geometry.type)
{
case "polyline":
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 2);
break;
case "polygon":
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
break;
}
//设置样式
var graphic = new esri.Graphic(geometry, symbol);
//清除上一次的画图内容
map.graphics.clear();
//
map.graphics.add(graphic);
//进行投影转换,完成后调用projectComplete
geometryService.project([graphic],new esri.SpatialReference({"wkid":32618}));
}
//投影转换完成后调用方法
function projectComplete(graphics)
{
//如果为线类型就进行lengths距离测算
if(graphics[0].geometry.type=="polyline")
{
dojo.connect(geometryService, "onLengthsComplete", outputDistance);
geometryService.lengths([graphics[0]]);
}
//如果为面类型需要先进行simplify操作在进行面积测算
else if(graphics[0].geometry.type=="polygon")
{
dojo.connect(geometryService, "onSimplifyComplete", simplifyComplete);
geometryService.simplify([graphics[0]]);
}
}
//显示测量距离
function outputDistance(result)
{
dojo.byId("distance").innerHTML = "距离:"+dojo.number.format(result.lengths[0] / 1000) + "千米";
}
//显示测量面积
function outputAreaAndLength(result)
{
dojo.byId("distance").innerHTML ="面积:"+ dojo.number.format(result.areas[0] / 1000000) + "平方公里"+" 长度:"+dojo.number.format(result.lengths[0]/1000) + "千米";
}
//对面对象simplify完成后调用方法
function simplifyComplete(graphics)
{
dojo.connect(geometryService, "onAreasAndLengthsComplete", outputAreaAndLength);
//进行面积测量
geometryService.areasAndLengths(graphics);
}
dojo.addOnLoad(init);
7.完成编码运行查看效果。
dojo.require("esri.toolbars.draw");
dojo.require("esri.tasks.geometry");
var map, toolbar, symbol, geometryService;
function init()
{
map = new esri.Map("map");
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://mypc/ArcGIS/rest/services/USA/MapServer");
map.addLayer(dynamicMapServiceLayer);
toolbar = new esri.toolbars.Draw(map);
//添加toolbar画图完成后天事件监听调用doMeasure
dojo.connect(toolbar, "onDrawEnd", doMeasure);
//实例化GeometryService,地址为ags发布的GeometryServer
geometryService = new esri.tasks.GeometryService("http://mypc/ArcGIS/rest/services/Geometry/GeometryServer");
//添加onProjectComplete完成后事件监听
dojo.connect(geometryService, "onProjectComplete", projectComplete);
}
//量算
function doMeasure(geometry)
{
//更加类型设置显示样式
switch (geometry.type)
{
case "polyline":
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 2);
break;
case "polygon":
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
break;
}
//设置样式
var graphic = new esri.Graphic(geometry, symbol);
//清除上一次的画图内容
map.graphics.clear();
//
map.graphics.add(graphic);
//进行投影转换,完成后调用projectComplete
geometryService.project([graphic],new esri.SpatialReference({"wkid":32618}));
}
//投影转换完成后调用方法
function projectComplete(graphics)
{
//如果为线类型就进行lengths距离测算
if(graphics[0].geometry.type=="polyline")
{
dojo.connect(geometryService, "onLengthsComplete", outputDistance);
geometryService.lengths([graphics[0]]);
}
//如果为面类型需要先进行simplify操作在进行面积测算
else if(graphics[0].geometry.type=="polygon")
{
dojo.connect(geometryService, "onSimplifyComplete", simplifyComplete);
geometryService.simplify([graphics[0]]);
}
}
//显示测量距离
function outputDistance(result)
{
dojo.byId("distance").innerHTML = "距离:"+dojo.number.format(result.lengths[0] / 1000) + "千米";
}
//显示测量面积
function outputAreaAndLength(result)
{
dojo.byId("distance").innerHTML ="面积:"+ dojo.number.format(result.areas[0] / 1000000) + "平方公里"+" 长度:"+dojo.number.format(result.lengths[0]/1000) + "千米";
}
//对面对象simplify完成后调用方法
function simplifyComplete(graphics)
{
dojo.connect(geometryService, "onAreasAndLengthsComplete", outputAreaAndLength);
//进行面积测量
geometryService.areasAndLengths(graphics);
}
dojo.addOnLoad(init);