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 measureToolbar = new esri.toolbars.Draw(map);
接下来，画图结束后将所绘制图形加入到地图上面。并返回測量结果，那么添加measureToolbar的draw-end事件：


依据geometry的类型。添加GeometryService的lengths-complete或者areas-and-lengths-complete事件：


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


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