Arcgis for Js之GeometryService实现测量距离和面积

距离和面积的测量时GIS常见的功能，在本节，讲述的是通过GeometryService实现测量面积和距离。先看看实现后的效果：





距离 面积

首先，进行配置：

//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
//If this null or not available the project and lengths operation will not work.  Otherwise it will do a http post to the proxy.
esriConfig.defaults.io.proxyUrl = "/proxy";
esriConfig.defaults.io.alwaysUseProxy = false;

接着，定义GeometryService和绘图工具：

var gsvc = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

var measureToolbar = new esri.toolbars.Draw(map);

接下来，绘图结束后将所绘制图形添加到地图上面，并返回测量结果，那么增加measureToolbar的draw-end事件：

measureToolbar.on("draw-end",showMeasureResults);
/**
* 显示测量结果
* @param evt
*/
var showPt=null;
function showMeasureResults(evt){
measureToolbar.deactivate();
map.setMapCursor("default");
var geometry = evt.geometry;
switch (geometry.type) {
case "polyline":{
var length = geometry.paths[0].length;
showPt = new Point(geometry.paths[0][length-1],map.spatialReference);
var lengthParams = new LengthsParameters();
lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER;
lengthParams.polylines = [geometry];
gsvc.lengths(lengthParams);
break;
}
case "polygon":{
showPt = new Point(geometry.rings[0][0],map.spatialReference);
var areasAndLengthParams = new AreasAndLengthsParameters();
areasAndLengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER;
areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_SQUARE_KILOMETERS;
gsvc.simplify([geometry], function(simplifiedGeometries) {
areasAndLengthParams.polygons = simplifiedGeometries;
gsvc.areasAndLengths(areasAndLengthParams);
});
break;
}
}
var graphic = new Graphic(geometry, getGeometrySymbol(geometry.type));
map.graphics.add(graphic);
}

根据geometry的类型，增加GeometryService的lengths-complete或者areas-and-lengths-complete事件：

gsvc.on("lengths-complete",outputLength);
function outputLength(evtObj){
var result = evtObj.result;
showmeasureInfo(showPt, result.lengths[0].toFixed(3), "千米");
};
gsvc.on("areas-and-lengths-complete",outputAreaAndLength);
function outputAreaAndLength(evtObj){
var result = evtObj.result;
showmeasureInfo(showPt, result.areas[0].toFixed(3), "平方千米");
};

最后，将返回的结果显示在地图上：

/**
* 显示测量结果
* @param showPnt
* @param data
* @param unit
*/
function measureInfo(showPnt,data,unit){
var measureDiv=$("#measure");
var isShow = false;
var screenPnt=map.toScreen(showPnt);
measureDiv.css("left",screenPnt.x+"px");
measureDiv.css("top",screenPnt.y+"px");
measureDiv.css("position","absolute");
measureDiv.css("height","20px");
measureDiv.css("display","block");
isShow = true;
measureDiv.css("z-index","999");
if(unit==="千米"){
measureDiv.css("width","90px");
}
else{
measureDiv.css("width","130px");
}
$("#result").html(data+unit);
$("#infoclose").click(function(){
map.graphics.clear();
measureDiv.css("display","none");
isShow = false;
});

map.on("pan-start", function(){
measureDiv.css("display","none");
});

map.on("pan-end", function(panend){
if(isShow == true){
screenPnt=map.toScreen(showPnt);
measureDiv.css("left",screenPnt.x+"px");
measureDiv.css("top",screenPnt.y+"px");
measureDiv.css("position","absolute");
measureDiv.css("height","20px");
measureDiv.css("display","block");
}
});
map.on("zoom-start", function(){
measureDiv.css("display","none");
});
map.on("zoom-end", function(){
if(isShow == true){
screenPnt=map.toScreen(showPnt);
measureDiv.css("left",screenPnt.x+"px");
measureDiv.css("top",screenPnt.y+"px");
measureDiv.css("position","absolute");
measureDiv.css("height","20px");
measureDiv.css("display","block");
}
});
};

结果的显示我是通过一个div来显示的，并且做了缩放和地图移动的处理。