前言

在搭建好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之家小专栏

对本专栏感兴趣的话,可以关注一波

arcgis api 4.x for js 基础工具篇之测距测面的更多相关文章

  1. arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  2. arcgis api 4.x for js 图层拓展篇之mapvLayer(附源码下载)

    因为在项目开发过程中,使用的arcgis js api版本是4.7,并不能支持客户端渲染热力图,想到arcgis js api 4.x的渲染是基于canvas,故琢磨着是否能借助类似于mapV.ech ...

  3. arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. arcgis api 3.x for js 入门开发系列五地图态势标绘(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. arcgis api 4.x for js 结合 Echarts4 实现统计图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  8. arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  9. arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

随机推荐

  1. 微信小程序APP生命周期

    小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...

  2. Jenkins之自动部署、代码安全扫描、自动化接口测试

    搭建Jenkins wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.reporpm --i ...

  3. c博客06-2019-结构体&文件

    1.本章学习总结 1.1 学习内容总结 结构体如何定义.成员如何赋值: 1.常见的定义: struct student { int num; char name[20]; }stu; //2.采用ty ...

  4. 【转载】记一次因 Redis 使用不当导致应用卡死 bug 的排查及解决!

    说明:此篇文章 作者分析问题的思路很好,值得学习记录,原文转载自公众号. 首先说下问题现象:内网sandbox环境API持续1周出现应用卡死,所有api无响应现象 刚开始当测试抱怨环境响应慢的时候 , ...

  5. 算法设计与分析——n后问题(回溯法+位运算)

    一.问题描述 在n×n格的国际象棋上摆放n个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同一列或同一斜线上,问有多少种摆法. 二.算法设计 解n后问题的回溯算法描述如下: #include ...

  6. Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构

    Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构 概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留 ...

  7. sleuth和zipkin微服务里的链路跟踪

    分布式链路跟踪介绍 对于一个微服务系统,大多数来自外部的请求都会经过数个服务的互相调用,得到返回的结果,一旦结果回复较慢或者返回了不可用,我们就需要确定是哪个微服务出了问题.于是就有了分布式系统调用跟 ...

  8. 字符串模式匹配——KMP算法

    KMP算法匹配字符串 朴素匹配算法   字符串的模式匹配的方法刚开始是朴素匹配算法,也就是经常说的暴力匹配,说白了就是用子串去和父串一个一个匹配,从父串的第一个字符开始匹配,如果匹配到某一个失配了,就 ...

  9. Docker Compose部署Nexus3时的docker-compose,yml代码

    场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  10. IS guide:Eric Steven Raymond in《How To Become A Hacker》

    Learn how to program.This, of course, is the fundamental hacking skill. If you don't know any comput ...