Arcgis for Js之GeometryService实现测量距离和面积
2014-10-28 15:30
330 查看
距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryService实现测量面积和距离。先看看实现后的效果:
![](http://img.blog.csdn.net/20141028151727776?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20141028151740911?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
距离 面积
首先,进行配置:
接着,定义GeometryService和绘图工具:
结果的显示我是通过一个div来显示的,并且做了缩放和地图移动的处理。
距离 面积
首先,进行配置:
//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来显示的,并且做了缩放和地图移动的处理。
相关文章推荐
- (转)Arcgis for Js之GeometryService实现测量距离和面积
- Arcgis for Js之GeometryService实现测量距离和面积
- ArcGIS API for JavaScript实现地图常用工具条 距离测量,面积测量
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现距离量算和面积量算(九)
- arcgis api for silverlight开发系列之六:缓冲区分析实现及Geometry service服务发布
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现距离量算和面积量算(九)
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现距离量算和面积量算(九)
- arcgis for js实现计算面积和周长
- ArcGIS API for JavaScript实现地图常用工具条 距离测量,面积测量
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS For JS 距离与面积量算的三种方法
- Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)
- arcgis api for flex 开发入门(七)Geometry service 的使用<转>
- Arcgis for JS之Cluster聚类分析的实现
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
- (十七)WebGIS中距离及面积测量的原理和实现以及坐标转换的简单介绍
- Arcgis for JS之Cluster聚类分析的实现
- arcgis api for javascript 距离与面积量算