首页 > 代码库 > (转)Arcgis for Js之GeometryService实现测量距离和面积

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

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

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

技术分享                                技术分享

距离                                                                                         面积

首先,进行配置:

 

[javascript] view plain copy
 
 print?
  1. //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.  
  2. //If this null or not available the project and lengths operation will not work.  Otherwise it will do a http post to the proxy.  
  3. esriConfig.defaults.io.proxyUrl = "/proxy";  
  4. esriConfig.defaults.io.alwaysUseProxy = false;  

 

接着,定义GeometryService和绘图工具:

 

[javascript] view plain copy
 
 print?
  1. var gsvc = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");  
[javascript] view plain copy
 
 print?
  1. var measureToolbar = new esri.toolbars.Draw(map);  

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

 

 

[javascript] view plain copy
 
 print?
  1. measureToolbar.on("draw-end",showMeasureResults);  
  2. /** 
  3.  * 显示测量结果 
  4.  * @param evt 
  5.  */  
  6. var showPt=null;  
  7. function showMeasureResults(evt){  
  8.     measureToolbar.deactivate();  
  9.     map.setMapCursor("default");  
  10.     var geometry = evt.geometry;  
  11.     switch (geometry.type) {  
  12.         case "polyline":{  
  13.             var length = geometry.paths[0].length;  
  14.             showPt = new Point(geometry.paths[0][length-1],map.spatialReference);  
  15.             var lengthParams = new LengthsParameters();  
  16.             lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER;  
  17.             lengthParams.polylines = [geometry];  
  18.             gsvc.lengths(lengthParams);  
  19.             break;  
  20.         }  
  21.         case "polygon":{  
  22.             showPt = new Point(geometry.rings[0][0],map.spatialReference);  
  23.             var areasAndLengthParams = new AreasAndLengthsParameters();  
  24.             areasAndLengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER;  
  25.             areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_SQUARE_KILOMETERS;  
  26.             gsvc.simplify([geometry], function(simplifiedGeometries) {  
  27.                 areasAndLengthParams.polygons = simplifiedGeometries;  
  28.                 gsvc.areasAndLengths(areasAndLengthParams);  
  29.             });  
  30.             break;  
  31.         }  
  32.     }  
  33.     var graphic = new Graphic(geometry, getGeometrySymbol(geometry.type));  
  34.     map.graphics.add(graphic);  
  35. }  

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

 

 

[javascript] view plain copy
 
 print?
  1. gsvc.on("lengths-complete",outputLength);  
  2. function outputLength(evtObj){  
  3.     var result = evtObj.result;  
  4.     showmeasureInfo(showPt, result.lengths[0].toFixed(3), "千米");  
  5. };  
  6. gsvc.on("areas-and-lengths-complete",outputAreaAndLength);  
  7. function outputAreaAndLength(evtObj){  
  8.     var result = evtObj.result;  
  9.     showmeasureInfo(showPt, result.areas[0].toFixed(3), "平方千米");  
  10. };  

最后,将返回的结果显示在地图上:

 

 

[javascript] view plain copy
 
 print?
  1. /** 
  2.  * 显示测量结果 
  3.  * @param showPnt 
  4.  * @param data 
  5.  * @param unit 
  6.  */  
  7. function measureInfo(showPnt,data,unit){  
  8.     var measureDiv=$("#measure");  
  9.     var isShow = false;  
  10.     var screenPnt=map.toScreen(showPnt);  
  11.     measureDiv.css("left",screenPnt.x+"px");  
  12.     measureDiv.css("top",screenPnt.y+"px");  
  13.     measureDiv.css("position","absolute");  
  14.     measureDiv.css("height","20px");  
  15.     measureDiv.css("display","block");  
  16.     isShow = true;  
  17.     measureDiv.css("z-index","999");  
  18.     if(unit==="千米"){  
  19.         measureDiv.css("width","90px");  
  20.     }  
  21.     else{  
  22.         measureDiv.css("width","130px");  
  23.     }  
  24.     $("#result").html(data+unit);  
  25.     $("#infoclose").click(function(){  
  26.         map.graphics.clear();  
  27.         measureDiv.css("display","none");  
  28.         isShow = false;  
  29.     });  
  30.   
  31.     map.on("pan-start", function(){  
  32.         measureDiv.css("display","none");  
  33.     });  
  34.   
  35.     map.on("pan-end", function(panend){  
  36.         if(isShow == true){  
  37.             screenPnt=map.toScreen(showPnt);  
  38.             measureDiv.css("left",screenPnt.x+"px");  
  39.             measureDiv.css("top",screenPnt.y+"px");  
  40.             measureDiv.css("position","absolute");  
  41.             measureDiv.css("height","20px");  
  42.             measureDiv.css("display","block");  
  43.         }  
  44.     });  
  45.     map.on("zoom-start", function(){  
  46.         measureDiv.css("display","none");  
  47.     });  
  48.     map.on("zoom-end", function(){  
  49.         if(isShow == true){  
  50.             screenPnt=map.toScreen(showPnt);  
  51.             measureDiv.css("left",screenPnt.x+"px");  
  52.             measureDiv.css("top",screenPnt.y+"px");  
  53.             measureDiv.css("position","absolute");  
  54.             measureDiv.css("height","20px");  
  55.             measureDiv.css("display","block");  
  56.         }  
  57.     });  
  58. };  


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

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