arcgis api 4.x for js 基础工具篇之测距测面
前言
在搭建好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 基础工具篇之测距测面的更多相关文章
- arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 4.x for js 图层拓展篇之mapvLayer(附源码下载)
因为在项目开发过程中,使用的arcgis js api版本是4.7,并不能支持客户端渲染热力图,想到arcgis js api 4.x的渲染是基于canvas,故琢磨着是否能借助类似于mapV.ech ...
- arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列五地图态势标绘(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 4.x for js 结合 Echarts4 实现统计图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
随机推荐
- 微信小程序APP生命周期
小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...
- Jenkins之自动部署、代码安全扫描、自动化接口测试
搭建Jenkins wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.reporpm --i ...
- c博客06-2019-结构体&文件
1.本章学习总结 1.1 学习内容总结 结构体如何定义.成员如何赋值: 1.常见的定义: struct student { int num; char name[20]; }stu; //2.采用ty ...
- 【转载】记一次因 Redis 使用不当导致应用卡死 bug 的排查及解决!
说明:此篇文章 作者分析问题的思路很好,值得学习记录,原文转载自公众号. 首先说下问题现象:内网sandbox环境API持续1周出现应用卡死,所有api无响应现象 刚开始当测试抱怨环境响应慢的时候 , ...
- 算法设计与分析——n后问题(回溯法+位运算)
一.问题描述 在n×n格的国际象棋上摆放n个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同一列或同一斜线上,问有多少种摆法. 二.算法设计 解n后问题的回溯算法描述如下: #include ...
- Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构
Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构 概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留 ...
- sleuth和zipkin微服务里的链路跟踪
分布式链路跟踪介绍 对于一个微服务系统,大多数来自外部的请求都会经过数个服务的互相调用,得到返回的结果,一旦结果回复较慢或者返回了不可用,我们就需要确定是哪个微服务出了问题.于是就有了分布式系统调用跟 ...
- 字符串模式匹配——KMP算法
KMP算法匹配字符串 朴素匹配算法 字符串的模式匹配的方法刚开始是朴素匹配算法,也就是经常说的暴力匹配,说白了就是用子串去和父串一个一个匹配,从父串的第一个字符开始匹配,如果匹配到某一个失配了,就 ...
- Docker Compose部署Nexus3时的docker-compose,yml代码
场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
- 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 ...