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

http://blog.csdn.net/gisshixisheng/article/details/40540601

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





距离 面积

首先，进行配置：

[javascript] view plain copy

print?

//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和绘图工具：

[javascript] view plain copy

print?

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

[javascript] view plain copy

print?

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

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

[javascript] view plain copy

print?

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事件：

[javascript] view plain copy

print?

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), "平方千米");

};

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

[javascript] view plain copy

print?

/**

* 显示测量结果

* @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来显示的，并且做了缩放和地图移动的处理。