arcgis api 4.x for js 基础工具篇之测距测面
2023-09-11 14:19:51 时间
前言
在搭建好WebGIS应用框架的时候,相信大家首先开发的都会是基础功能,此篇文章我们主要讲述的是“测距”、"测面"功能。
注* 在测量单位中常规都是基于"平面坐标系"而言,所以如果你的坐标系是"地理坐标系",则需要找到对应的坐标转换参数来进行转换。
效果图
正文
此功能的流程为“图形绘制”-> "距离计算"-> "要素标注"。
测距核心代码如下
export default function measureDist(view) { //开启绘制工具 let draw = new Draw({ view: view }); view.graphics.removeAll(); enableCreatePolyline(draw, view); } /*** * 绘制测距线 */ function updateVertices(event) { var vertices = event.vertices; view.graphics.removeAll(); var graphic = createPolylineByVertices(vertices,view.spatialReference); view.graphics.add(graphic); let show_point; if (vertices.length >= 2) { let _totalDist = 0; for (let i = 1; i < vertices.length; i++) { let label; show_point = new Point({ x: vertices[i][0], y: vertices[i][1], spatialReference: view.spatialReference }); let everyGraphic = createPolylineByVertices([vertices[i],vertices[i-1]],view.spatialReference); ……
测面核心代码如下
export default function measureArea(view) { //开启绘制 let draw = new Draw({ view: view }); view.graphics.removeAll(); enableCreatePolygon(draw, view); } function enableCreatePolygon(draw, view) { let viewClickHandler; const _deg = 180 / Math.PI; const _rad = Math.PI / 180; let action = draw.create("polygon"); view.focus(); action.on("vertex-add", drawPolygon); action.on("cursor-update", drawPolygon); action.on("vertex-remove", drawPolygon); action.on("draw-complete", drawPolygon); /*** * 绘制测面图形 * @param event */ function drawPolygon(event) { let vertices = event.vertices; view.graphics.removeAll(); let graphic = createPolygonByVertices(vertices,view.spatialReference); view.graphics.add(graphic); let areaValue; let label ……
更多的详情见:GIS之家小专栏
对本专栏感兴趣的话,可以关注一波
相关文章
- vue.js--基础 v-bind绑定属性使用
- js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域
- 第七节:语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等) 图片放大镜 JavaScript-基础 用javascript写原生ajax(笔记) 初遇 Asp.net MVC 数据库依赖缓存那些事儿 前端JS 与 后台C# 之间JSON序列化与反序列化(笔记)
- 【Js】前端使用xlsx.full.min.js读取和导出excel表格数据
- JS基础 []、{}、()
- JS基础 数组类型
- PEG.js 介绍与基础使用
- JS 这一次彻底理解选择排序
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- 【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来
- base.js,通用js方法,Js方法封装
- JS教程之使用 P5.js 构建一个贪吃蛇游戏(教程含源码)
- JS运动---运动基础(匀速运动)
- JS在HTML文档引入位置
- 【测试基础】之04 JS入门基础
- 【零基础学JS -1】Javascript简介
- 【Laya + TS + JS】SheetJS(js-xlsx)前端生成Excel表格
- JS魔法堂:从void 0 === undefined说起
- Three.js Example 注解 —— canvas_sandbox.html