ArcGisJS实现地图常用工具条、距离测量和面积测量（非官方实例）

常用地图工具包括：平移、拉框缩小、拉框放大、全图、距离测量、面积测量、清除标记，距离测量、面积测量没有使用官方自带的组件代码。

1.距离测量

2.面积测量

3.源代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>测量工具 - 3.18</title><meta charset="utf-8" /><link rel="Stylesheet" type="text/css" href="http://127.0.0.1/api/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" /><script type="text/javascript">//下面这段代码必须放到下面几个脚本文件的上面，否则会错误var dojoConfig = {api_url: "127.0.0.1/api/arcgis_js_api/library/3.18/3.18",async : false,isDebug : true,parseOnLoad : true,mblHideAddressBar : false,packages : [{name: "lib",location: location.pathname.replace(/\/[^/]+$/, '') + '/lib'}]};</script><script type="text/javascript" src="http://127.0.0.1/api/arcgis_js_api/library/3.18/3.18/init.js"></script><style type="text/css">html, body {margin:0px;height:100%;}#map_canvas {width:100%;height:100%;margin:0px auto;}#map_tools {position: absolute;right: 10px;top:10px;}</style><script type="text/javascript">var map;require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","esri/toolbars/navigation","esri/toolbars/draw","esri/tasks/GeometryService","esri/symbols/Font","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","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, ArcGISTiledMapServiceLayer, Navigation, Draw, GeometryService, Font,SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, Color,number, Graphic, LengthsParameters, Point, Polyline, AreasAndLengthsParameters, domAttr) {//创建底图map = Map("map_canvas");var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");map.addLayer(basemap);//创建地图操作对象var navToolbar = new Navigation(map);//boolbar工具条var toolbar = new Draw(map);//调用esri自带的服务（在arcgis server Manger中，记得开启服务）var geometryService = new GeometryService("http://192.168.0.206:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");var totalDistance = 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])); //定义标记样式//给按钮添加绑定事件dojo.query(".functionWrap").forEach(function(node, index) {dojo.connect(node, "onclick", function(evt) {switch(node.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);}//触发完成的事件toolbar.on("draw-end", function(evt) {addToMap(evt);});//生成两点之间的连线toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2));//量算功能触发map.on("click", function(evt) {mapClick(evt);});//添加图形函数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); //删除数组中的所有元素totalDistance = 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 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);totalDistance += 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(totalDistance, {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 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();}}});</script>
</head>
<body><div id="map_canvas"></div><div id="map_tools"><input type="button" class="functionWrap" value="平移" /><input type="button" class="functionWrap" value="拉框缩小" /><input type="button" class="functionWrap" value="拉框放大" /><input type="button" class="functionWrap" value="全图" /><input type="button" class="functionWrap" value="距离测量" /><input type="button" class="functionWrap" value="面积测量" /><input type="button" class="functionWrap" value="清除标记" /></div>
</body>
</html>

注意：上面的代码使用的是本地的ArcGis API，如果本地没有，请改为官方在线API才可以显示出来。

如果需要源代码文件或者有疑问的，可以Q我，149012959，请注明原因！

ArcGisJS实现地图常用工具条、距离测量和面积测量（非官方实例）相关推荐

地图常用工具-一个好用的地图工具网址
网址:地图常用工具优点: 1.无需登陆,简单易用 2.功能全:不仅常用的功能有,还有路径规划.正/逆地理编码等高级的功能 3.专业:图幅计算及显示.坐标系转换界面: 主要功能: 图层显示:支持标准 ...
百度地图添加工具条、比例尺控件
百度地图添加工具条.比例尺控件 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-T ...
iOS代码动态消除iPhone X底部工具条(ToolBar)与键盘间的夹缝
在App界面底部增加工具条的情况并不少见,在工具条上增加输入框更所谓是"应知应会".下面本猫就向大家介绍如何适配iPhoneX中底部工具条与弹出键盘的相对位置. 你是怎样的工具条? ...
百度地图之鼠标绘制工具条库（开源库）
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
js百度地图鼠标绘制工具条库
本篇文章是介绍百度地图鼠标绘制工具条库基本使用百度地图的覆盖物的编辑类参考:[鼠标绘制工具条库](http://api.map.baidu.com/library/DrawingManager/1. ...
OpenLayers 3自定义地图工具条（一）
对于一个WEB地图应用来说,地图工具条可以说是不可或缺的一个部分,但由于一些样式.功能往往并不能满足实际项目需要,所以仍要对此部分进行定制,从这里将说明如何利用Oplenayers 3根据项目要求做一 ...
如何解决eps常用编码工具条缺失
在我们准备用eps软件进行地物绘制时,发现安装好的eps软件的常用编码工具条缺失,这给绘图造成了较大的不便,因此我们想找出这个工具条,但当我们右键自定义定制时,在工具栏标签下同样找不到这个工具条,最后 ...
基于 Openlayers 实现的地图常用功能工具集合
基于 Openlayers 实现的地图常用功能工具集合地图工具介绍使用示例在项目开发中,经常会需要使用一些坐标做测试,或者手动标绘点线面,或者坐标转换等. 使用代码当然是可以做到的,但是有时候懒 ...
Element常用组件—表格、表单、对话框和分页工具条
目录一.Element表格二.Element表单三.Element对话框四.Element分页工具条五. 结合之后的组件代码一.Element表格由输入框.选择器.单选框.多选框等控件组 ...

ArcGisJS实现地图常用工具条、距离测量和面积测量（非官方实例）

ArcGisJS实现地图常用工具条、距离测量和面积测量（非官方实例）相关推荐

最新文章

热门文章