arcgis api 4.11之距离和面积测量实现

使用arcgisApi版本 4.11

效果图：

思路：

<1>. 距离和面积测量用到的算法，是由arcgis api提供的类库 "esri/geometry/geometryEngine" 中的geodesicLength()和geodesicArea()

<2>. 调用arcgis api 提供的Draw绘图工具，绘制线和面，在绘制的时候，有一个监听事件一直在监听鼠标操作

<3>.添加graphics到view上

具体方法的代码如下：

需要引入模块的有：

       require(['esri/Map','esri/Basemap','esri/config','esri/views/MapView','esri/layers/WebTileLayer','esri/layers/support/TileInfo','dojo/on','dojo/dom','esri/views/draw/Draw','esri/Graphic','esri/geometry/geometryEngine','esri/geometry/Point','esri/geometry/Polyline','esri/geometry/Polygon','esri/symbols/TextSymbol','esri/layers/GraphicsLayer','dojo/domReady!'],function(Map,BaseMap,esriConfig,MapView,WebTileLayer,TileInfo,on,dom,Draw,Graphic,GeometryEngine,Point,Polyline,Polygon,TextSymbol,GraphicsLayer){})

1. 添加画线button 和画面button 的点击事件，点击按钮后，首先创建Draw对象，然后创建线Action，再绘制的过程中监听绘制的那几个操作，并时刻调用一个方法，也就是下面的createPolyline方法，然后我们就可以在再这个方法中写接下来的实现量测的所有代码了。当然，还可以为每个操作（节点添加、删除、undo、redo等分别添加调用方法，然后写你想实现效果的代码就可以了），这个具体的解释大家可以看官网api

                on(dom.byId("btnDrawLine"),"click",function(){const draw = new Draw({view: view});view.graphics.removeAll();const action = draw.create("polyline");view.focus();action.on(["vertex-add","vertex-remove","cursor-update","redo","undo","draw-complete"],createPolyline);});on(dom.byId("btnDrawPolygon"),"click",function(){const draw = new Draw({view: view});// view.graphics.removeAll();const action = draw.create("polygon");view.focus();action.on(["vertex-add","vertex-remove","cursor-update","redo","undo""draw-complete"],createPolygon);});

2. 实现线量测

             function createPolyline(event) {var vertices = event.vertices;var symbol={type:"simple-marker",color:[255,255,255],size:6,outline: {color: [ 255, 0, 0 ],width: 1.5  // points}};view.graphics.removeAll();var graphics=new Graphic({geometry:new Polyline({paths: vertices,spatialReference: view.spatialReference}),symbol: {type: "simple-line", // autocasts as new SimpleFillSymbolcolor: [255,116,3],width: 2,cap: "round",join: "round"}});view.graphics.add(graphics);var firsttextSymbol = {type: "text",color: "white",haloColor: "black",haloSize: "10px",text: "起点",xoffset: '10px',yoffset: '10px',font: {size: 12,family: "sans-serif",weight: "bold"}};var firstpoint={type:"point",longitude:vertices[0][0],latitude:vertices[0][1]};var firstTextGraphics=new Graphic({geometry:firstpoint,symbol: firsttextSymbol});var firstGraphics=new Graphic({geometry:firstpoint,symbol: symbol});view.graphics.add(firstTextGraphics);view.graphics.add(firstGraphics);//var path=[];var arr1=[];arr1.push(vertices[0][0]);arr1.push(vertices[0][1]);path.push(arr1);for (let i = 1; i <vertices.length ; i++) {var point={type:"point",longitude:vertices[i][0],latitude:vertices[i][1]};var arr=[];arr.push(vertices[i][0]);arr.push(vertices[i][1]);path.push(arr);var line = new Polyline({hasZ: false,hasM: true,paths: path,spatialReference: view.spatialReference});var dislen;var unit;if(view.scale>5000) {dislen = GeometryEngine.geodesicLength(line, 'kilometers');unit="千米";}else {dislen = GeometryEngine.geodesicLength(line, 'meters');unit="米";}var textSymbol = {type: "text",color: "white",haloColor: "black",haloSize: "5px",text: Math.abs(Math.round(dislen*100)/100)+unit,xoffset: '20px',yoffset: '20px',font: {size: 12,family: "sans-serif",weight: "bold"}};var textGraphics=new Graphic({geometry:point,symbol: textSymbol});var Graphics=new Graphic({geometry:point,symbol: symbol});view.graphics.add(textGraphics);view.graphics.add(Graphics);}}

3.实现面量测

                function createPolygon(event) {var vertices = event.vertices;var symbol={type:"simple-marker",color:[255,255,255],size:6,outline: {color: [ 255, 0, 0 ],width: 1.5  // points}};var fillSymbol = {type: "simple-fill", // autocasts as new SimpleFillSymbol()color: [3, 255, 240, 0.1],outline: {// autocasts as new SimpleLineSymbol()color: [255,116,3],width: 2}};var polygon=new Polygon({rings: vertices});view.graphics.removeAll();var graphics=new Graphic({geometry:polygon,symbol: fillSymbol});view.graphics.add(graphics);var center = polygon.centroid;var area=0;var unit;if(view.scale>5000) {area = GeometryEngine.geodesicArea(graphics.geometry,'square-kilometers');unit="平方千米";}else {area = GeometryEngine.geodesicArea(graphics.geometry,'square-meters');unit="平方米";}for (let i = 0; i <vertices.length ; i++) {var point={type:"point",longitude:vertices[i][0],latitude:vertices[i][1]};var pointGraphics=new Graphic({geometry:point,symbol: symbol});view.graphics.add(pointGraphics);}var pointcenter={type:"point",longitude:center.longitude,latitude:center.latitude};var textSymbol = {type: "text",color: "white",haloColor: "black",haloSize: "5px",text:Math.abs(Math.round(area*100)/100)+unit,font: {size: 12,family: "sans-serif",weight: "bold"}};var textGraphics=new Graphic({geometry:pointcenter,symbol: textSymbol});view.graphics.add(textGraphics);}

arcgis api 4.11之距离和面积测量实现相关推荐

arcgis api for js实现距离测量和面积测量（完整版本）
一.距离测量和面积测量是GIS必备的功能效果图如下: 二.量算函数(核心) //量算函数function mapClick(evt) {if(disFun){inputPoints.push(evt. ...
基于ArcGIS JS API实现的两种距离和面积测量方式
文章目录前言开发思路主要代码效果测试效果图测试页面开发总结参考链接前言在一些地图地图应用中,距离.面积测量属于基础功能.ArcGIS API for JavaScript有单独提供 ...
基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
文章目录需求背景需求分析开发过程效果图注意事项参考链接在线示例需求背景有一个二维数组,里面包含几万个表示高度的值,现在要把这些高度值在地图上展示出来.可以通过小立方体的方式展现,长宽 ...
ArcGIS.Server.9.3和ArcGIS API for Flex的GeometryService和buffer分析（十）
目的: 1.ArcGIS API for Flex用GeometryService实现点.线.面的buffer分析.准备工作: 1.在ArcGIS.Server.9.3发布一个叫USA的Map Ser ...
缓冲区分析—ArcGIS API for JavaScript
缓冲区分析是地理信息系统中的空间分析基本功能之一,是众多空间分析方法的基础.缓冲区分析是指为了识别某地理实体或空间物体对其周围的邻近性或影响度而在其周围建立的一定宽度的带状区. 缓冲区介绍缓冲区分析 ...
ArcGIS API for Silverlight开发入门
ArcGIS API for Silverlight开发入门你用上3G手机了吗?你可能会说,我就是喜欢用nokia1100,ABCDEFG跟我都没关系.但你不能否认3G是一种趋势,最终我们每个人都 ...
arcgis api for4.x 绘制圆，及坐标转换问题
绘制多个圆,类似雷达的功能. <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
地理信息系统（GIS）系列——ArcGIS API for JavaScript 3.9（1）
Visual Studio 智能提示配置:将以下 JavaScript 文件引入项目中 arcgis_js_v39_sdk\arcgis_js_api\sdk\jshelp\jsapi_vsdoc12 ...
[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能（七）
目的: 1.ArcGIS API for Flex实现Query查询定位中心功能,进行属性查图的功能,选择图层然后输入查询语句进行查询把查到的地理元素高亮显示同时在右边的Grid中显示查到的数据,然后 ...

arcgis api 4.11之距离和面积测量实现

使用arcgisApi版本 4.11

arcgis api 4.11之距离和面积测量实现相关推荐

最新文章

热门文章