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("https://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");
                    }
                });
            };

結果的顯示我是通過一個p來顯示的,並且做瞭縮放和地圖移動的處理。

發佈留言