ArcGIS API for JavaScript实现地图常用工具条 距离测量，面积测量

距离测量，面积测量等工具条是常用的工具。也是GIS系统的基础功能

效果图

工具条样式：

距离测量：

面积测量：

代码：

require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/navigation", "esri/toolbars/draw", "esri/tasks/GeometryService", "esri/symbols/Font", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/TextSymbol", "esri/Color", "dojo/number", "esri/graphic", "esri/tasks/LengthsParameters", "esri/geometry/Point", "esri/geometry/Polyline", "esri/tasks/AreasAndLengthsParameters", "dojo/dom-attr", "dojo/domReady!" ],function(Map,ArcGISDynamicMapServiceLayer,Navigation,Draw,GeometryService,Font,SimpleMarkerSymbol,SimpleLineSymbol,TextSymbol,Color,number,Graphic,LengthsParameters, Point,Polyline,AreasAndLengthsParameters,domAttr){ var chinaCollagelayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/2017shixi/collegeMap/MapServer"); var map = new Map("map"); map.addLayer(chinaCollagelayer); //创建地图操作对象 var navToolbar = new Navigation(map); //toolbar工具条 var toolbar = new Draw(map); //调用esri自带的服务（在arcgis server Manger中，记得开启服务） var geometryService =new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); var totleDistance = 0.0;//总距离 var totalGraphic = null;//存储点集合 var disFun =false;//距离测量 var areaFun = false;//面积测量 var inputPoints = [];//存储生成点的集合 var startFont = new Font('12px').setWeight(Font.WEIGHT_BOLD);//定义文字样式 var makerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,8, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([204,102,51]),1), new Color([158.184,71,0.65]));//定义标记点样式 //给按钮添加绑定事件 query(".functionWrap").on("click",function(event){ //获得按钮的文本信息 var value=domAttr.get(this,"title"); 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 distanceMeasure() { map.enableScrollWheelZoom(); disFun=true; areaFun=false; toolbar.activate(Draw.POLYLINE); } //面积量算 function areaMeasure() { map.enableScrollWheelZoom(); disFun=false; areaFun=true; toolbar.activate(Draw.POLYGON); } // 量算功能触发 map.on("click",function (evt) { mapClick(evt); }); //触发完成的事件 toolbar.on("draw-end",function (evt) { addToMap(evt); }); //生成两点之间的连线 toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2)); //量算函数 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)); }); } } } // 添加图形函数 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));//在地图上显示测量的面积 }); }); } } } //清空函数 function clearAction() { toolbar.deactivate();//撤销地图绘制功能 disFun = false; areaFun = false; map.enableScrollWheelZoom(); map.graphics.clear(); var graphicLayerIds = map.graphicsLayerIds; var len = graphicLayerIds.length; for(var i=0; i<len;i++){ var gLayer = map.getLayer(graphicLayerIds[i]); gLayer.clear(); } } });