arcgis api for js实现距离测量和面积测量（完整版本）

一、距离测量和面积测量是GIS必备的功能效果图如下：

二、量算函数（核心）

                //量算函数function mapClick(evt) {if(disFun){inputPoints.push(evt.mapPoint);var  textSymbol;if(inputPoints.length ===1){textSymbol = new TextSymbol("起点",startFont,new Color([204,102,51]));textSymbol.setOffset(0,-20);map.graphics.add(new Graphic(evt.mapPoint,textSymbol));}map.graphics.add(new Graphic(evt.mapPoint,makerSymbol));if(inputPoints.length >=2){//    设置距离测量的参数var  lengthParams = new LengthsParameters();lengthParams.distanceUnit = GeometryService.UNIT_METER;lengthParams.calculationType = "preserveShape";var p1 = inputPoints[inputPoints.length-2];var p2 = inputPoints[inputPoints.length-1];if(p1.x ===p2.x &&p1.y===p2.y){return;}//    z在两点之间划线将两点链接起来var polyline = new Polyline(map.spatialReference);polyline.addPath([p1,p2]);lengthParams.polylines=[polyline];// 根据参数，动态的计算长度geometryService.lengths(lengthParams,function(distance){var _distance = number.format(distance.lengths[0]/1000);totleDistance+=parseFloat(_distance);//计算总长度var beetwentDistances = _distance+"千米";var tdistance = new TextSymbol(beetwentDistances,startFont,new Color([204,102,51]));tdistance.setOffset(40,-3);map.graphics.add(new Graphic(p2,tdistance));if(totalGraphic){map.graphics.remove(totalGraphic);}var total=number.format(totleDistance,{pattern:"#.000"});//    设置总长度的显示样式，并添加到地图上var totalSymbol=new TextSymbol("总长度："+total+"千米",startFont,new Color([204,102,51]));totalSymbol.setOffset(40,-15);totalGraphic= map.graphics.add(new Graphic(p2,totalSymbol));});}}}

三、注册事件

  //给按钮添加绑定事件$(".functionWrap").click(function () {var value=$(this).attr("name")switch (value) {case "平移":navToolbar.activate(Navigation.PAN);break;case "拉框缩小":navToolbar.activate(Navigation.ZOOM_OUT);break;case "拉框放大":navToolbar.activate(Navigation.ZOOM_IN);break;case "全图":map.centerAndZoom(([110, 38.5]), 5);break;case "距离测量":distanceMeasure();break;case "面积测量":areaMeasure();break;case "清除标记":clearAction();break;}});

四、添加图形函数

 // 添加图形函数function addToMap(evt) {if(disFun||areaFun){var geometry = evt.geometry;//绘制图形的geometry//将绘制的图形添加到地图上去var symbol = null;switch (geometry.type){case "point":symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1),new Color([0,255,0,0.25]));break;case "polyline":symbol  = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0,0.8]),2);break;case "polygon":symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),new Color([255,255,0,0.25]));break;case "extent":symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),new Color([255,255,0,0.25]));break;}map.graphics.add(new Graphic(geometry,symbol));if(disFun){inputPoints.splice(0,inputPoints.length);//删除数组中的所有元素totleDistance =0.0;totalGraphic = null;}else if(areaFun){//设置面积和长度的参数var areasAndLengthsParameters =new AreasAndLengthsParameters();areasAndLengthsParameters.lengthUnit = GeometryService.UNIT_METER;//设置距离单位areasAndLengthsParameters.areaUnit = GeometryService.UNIT_SQUARE_KILOMETERS;//设置面积单位geometryService.simplify([geometry],function (simplifiedGeometries) {areasAndLengthsParameters.polygons = simplifiedGeometries;geometryService.areasAndLengths(areasAndLengthsParameters,function (result) {var font =new Font("16px",Font.STYLE_NORMAL,Font.VARIANT_NORMAL,Font.WEIGHT_BOLDER);var areaResult = new TextSymbol(number.format(result.areas[0],{pattern:'#.000'})+"平方公里",font,new Color([204,102,51]));var spoint = new Point(geometry.getExtent().getCenter().x,geometry.getExtent().getCenter().y,map.spatialReference);map.graphics.add(new Graphic(spoint,areaResult));//在地图上显示测量的面积});});}}}

五、点击下载完整代码

arcgis api for js实现距离测量和面积测量（完整版本）相关推荐

arcgis api for js共享干货系列之一自写算法实现地图量算工具
众所周知,使用arcgis api for js实现地图的量算工具功能,无非是调用arcgisserver的Geometry服务(http://localhost:6080/arcgis/rest/s ...
arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
arcgis api for js之echarts开源js库实现地图统计图分析
前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...
Arcgis API For js 的离线部署
之前,因为所做的项目不大,一直用的都是在线的Arcgis API For js,后来意识到了搞开发,离线部署是必须要掌握的,在线资源属于不可控范畴,能够避免的尽量避免.所以有了这次记录,以防以后忘记. ...
【完整的WebGIS教程】7.1 ArcGIS API for JS行政区划导航（上）
前一节回顾在[完整的WebGIS教程]6.1 使用ArcGIS Server发布要素服务中,我们发布了三个要素服务,分别是省.市.区县的行政区划边界,其属性表中包含了Code(地区编码)和Name( ...
GIS开发之二维地下管线综合管理系统（Arcgis）第四节使用arcgis api for js 加载天地图
GIS开发之二维地下管线综合管理系统(Arcgis)第四节使用arcgis api for js 加载天地图核心js文件调用方式调用结果核心js文件 #通过定义加载天地图js文件,引用并组织 ...
ArcGIS API for JS 4.x + Vue 【1】—— 显示地图和添加点线面
系列文章目录 [1] ArcGIS API for JS 4.x + Vue 之显示地图和添加点线面文章目录系列文章目录前言一.显示地图安装依赖 1. 添加模块 2. 引入CSS样式 3. ...
arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
使用HTML5定位的经纬度来实现ArcGIS API for js 中的定位
文章目录前言一.arcgis api定位二.HTML5+Arcgis JS实现定位 2.1 利用HTML5获取当前位置的经纬度 2.2 点击按钮执行定位 2.3 全部代码总结前言定位功能的 ...

arcgis api for js实现距离测量和面积测量（完整版本）

arcgis api for js实现距离测量和面积测量（完整版本）相关推荐

最新文章

热门文章