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