前言

cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材。
不少订阅者向我反馈之前的那篇(https://xiaozhuanlan.com/topic/8210364597 ) 量算工具的cesiumAPI版本太低,不能适用新版本。所以,推出新版本的量算工具效果,对应版本是cesium1.63.1API的。

内容概览

1.cesium1.63.1API版本贴地量算工具效果
2.源代码demo下载

效果图如下:

实现思路:测距以及测面都是利用到cesium鼠标操作监听事件:鼠标左键Cesium.ScreenSpaceEventType.LEFT_CLICK、鼠标移动Cesium.ScreenSpaceEventType.MOUSE_MOVE、鼠标右键Cesium.ScreenSpaceEventType.RIGHT_CLICK。鼠标左键事件,获取点击地图的每个坐标点;鼠标移动事件,动态扑捉鼠标移动状态,下一个坐标点位置;鼠标右键意味着地图量算结束状态。另外,量算面积的计算,结合turf.js来计算。

  • 距离量算的监听事件函数,里面涉及到细节函数,自行看对应的源码demo:
this.handler.setInputAction(function (evt) { //单机开始绘制
var cartesian = that.getCatesian3FromPX(evt.position, that.viewer, [that.polyline, that.floatLable]);
if (!cartesian) return;
if (that.positions.length == 0) {
var label = that.createLabel(cartesian, "起点");
that.labels.push(label);
that.floatLable = that.createLabel(cartesian, "");
that.floatLable.show = false;
that.positions.push(cartesian);
that.positions.push(cartesian.clone());
that.lastCartesian = cartesian;
} else {
that.floatLable.show = false;
that.positions.push(cartesian);
if (!that.lastCartesian) return;
var distance = that.getLength(cartesian, that.lastCartesian);
that.allDistance += distance;
var text = that.formatLength(distance);
var label = that.createLabel(cartesian, text);
that.labels.push(label);
}
that.lastCartesian = cartesian;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.setInputAction(function (evt) {
if (that.positions.length < 1) return;
that.floatLable.show = true;
var cartesian = that.getCatesian3FromPX(evt.endPosition, that.viewer, [that.polyline, that.floatLable]);
if (!cartesian) return;
if (that.positions.length == 2) {
if (!Cesium.defined(that.polyline)) {
that.polyline = that.createLine();
}
}
if (that.polyline) {
that.positions.pop();
that.positions.push(cartesian);
if (!that.lastCartesian) return;
var distance = that.getLength(cartesian, that.lastCartesian);
that.floatLable.show = true;
that.floatLable.label.text = that.formatLength(distance);
that.floatLable.position.setValue(cartesian);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.setInputAction(function (evt) {
if (!that.polyline) return;
that.floatLable.show = false;
that.viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
that.viewer.trackedEntity = undefined; var cartesian = that.getCatesian3FromPX(evt.position, that.viewer, [that.polyline, that.floatLable]);
var distanceLast = that.getLength(cartesian, that.lastCartesian);
that.allDistance += distanceLast;
var allDistance = that.formatLength(that.allDistance); var label = that.createLabel(cartesian, "");
if (!cartesian) return;
that.labels.push(label);
that.labels[that.labels.length - 1].label.text = "总长:" + allDistance;
if (that.handler) {
that.handler.destroy();
that.handler = null;
}
if (that.tsLabel) {
that.viewer.entities.remove(that.tsLabel);
}
if (that.ts_handler) {
that.ts_handler.destroy();
that.ts_handler = null;
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  • 面积量算的监听事件函数,里面涉及到细节函数,自行看对应的源码demo:

更多详情见下面链接文章

小专栏此文章

文章提供源码,对本专栏感兴趣的话,可以关注一波

cesium1.63.1api版本贴地贴模型量算工具效果(附源码下载)的更多相关文章

  1. cesium1.65api版本贴地贴模型标绘工具效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  2. Cesium专栏-裁剪效果(基于3dtiles模型,附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  3. 各个版本spring的jar包以及源码下载地址

    各个版本spring的jar包以及源码下载地址,目前最高版本到spring4.1.2,留存备用: http://maven.springframework.org/release/org/spring ...

  4. JS/Jquery版本的俄罗斯方块(附源码分析)

    转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...

  5. Python机器学习/LinearRegression(线性回归模型)(附源码)

    LinearRegression(线性回归) 2019-02-20  20:25:47 1.线性回归简介 线性回归定义: 百科中解释 我个人的理解就是:线性回归算法就是一个使用线性函数作为模型框架($ ...

  6. 最新版本的Struts2+Spring4+Hibernate4三大框架整合(截止2014-10-15,提供源码下载)

    一. 项目名称:S2316S411H436 项目原型:Struts2.3.16 + Spring4.1.1 + Hibernate4.3.6 + Quartz2.2.1 源代码下载地址: 基本版:ht ...

  7. Python实战:截图识别文字,过万使用量版本!(附源码!!)

    前人栽树后人乘凉,以不造轮子为由 使用百度的图片识字功能,实现了一个上万次使用量的脚本. 系统:win10 Python版本:python3.8.6 pycharm版本:pycharm 2021.1. ...

  8. 各个版本spring的jar包以及源码下载地址,目前最高版本到spring4.3.8,留存备用:

    http://maven.springframework.org/release/org/springframework/spring/

  9. 免费美女视频聊天,多人视频会议功能加强版本(Fms3和Flex开发(附源码))

    Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频聊天,会议开发实例系列文章的第4篇,该系列所有文章链接如下: http://www.cnblogs.com/aierong/a ...

随机推荐

  1. KD-tree 学习小记

    考 \(NOI\) 时不会,感觉很亏.于是学了一上午,写了一晚上. 感觉这东西就是个复杂度玄学的高级暴力 (大雾 KD-tree 基本信息 \(D\) 就是 \(Dimension\) ,维度的意思. ...

  2. 玩转Django2.0---Django笔记建站基础八(admin后台系统)

    第八章 admin后台系统 admin后台系统也成为网站后台管理系统,主要用于对网站前台的信息进行管理,如文字.图片.影音和其他日常使用文件的发布.更新.删除等操作,也包括功能信息的统计和管理,如用户 ...

  3. Python 练习实例100 | 菜鸟教程

    http://www.runoob.com/python/python-exercise-example100.html

  4. 使用Razor表达式 使用条件语句 来自 精通ASP-NET-MVC-5-弗瑞曼

  5. ios--->OC中Protocol理解及在代理模式中的使用

    OC中Protocol理解及在代理模式中的使用 Protocol基本概念 Protocol翻译过来, 叫做"协议",其作用就是用来声明一些方法: Protocol(协议)的作用 定 ...

  6. STM8 ADC 多个通道连续扫描缓冲区数据带中断模式的正确写法

    近日调试了STM8S的ADC采集多通道数据的程序,按照之前的立即,将ADC1设置为:扫描模式,连续采集,数据缓存模式,中断使能后应该可以在中断后读取到数值了,可是无论怎样都只能读取到第一个缓冲器的数据 ...

  7. Git详解之内部原理

    前言 不管你是从前面的章节直接跳到了本章,还是读完了其余各章一直到这,你都将在本章见识 Git 的内部工作原理和实现方式.我个人发现学习这些内容对于理解 Git 的用处和强大是非常重要的,不过也有人认 ...

  8. redis5.0 Cluster集群搭建

    安装redis sudo apt update sudo apt install build-essential tcl cd ~ mkdir document/ cd document/ curl ...

  9. 娱乐往事,年初捡到1G PAR,平淡的日子泛起波澜

    常听说这样的故事 垃圾佬捡到蓝牙键盘,于是配了一台上万的电脑 垃圾佬捡到机箱,于是配了一台带遥控的HTPC 垃圾佬捡到假NAS,于是组了20+T的RAID 而我,不是垃圾佬,更没有捡到过U盘,对突如其 ...

  10. 毕业论文系列之基于WiFi的智能农业大棚管控系统设计代码

    #include <dht11.h>//dht11库 #include <MsTimer2.h>               //定时器库的 头文件 #include < ...