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

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

距离和面积的测量时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来显示的，并且做了缩放和地图移动的处理。