前言

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:

更多详情见下面链接文章

小专栏此文章

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

最新文章

  1. Gate Of Babylon bzoj 1272
  2. tomcat 配置ssi
  3. AppleWatch___学习笔记(一)开发思路和框架
  4. mysql高级排序&amp;高级匹配查询示例
  5. webService调用
  6. CSDN&mdash;&mdash;【低调的草原狼】&mdash;&mdash;Ext4.2学习目录整理
  7. nodejs 5.2.0文档自翻译——Path模块
  8. python的一些总结5
  9. javascript-智能社-JS基础B笔记
  10. C#Linq的使用
  11. [HNOI2014]道路堵塞
  12. Appium(一)---环境搭建的一些问题
  13. Django models中的null和blank的区别
  14. PEM routines:PEM_read_bio:no start line
  15. ionic动态切换主题皮肤
  16. docker 定时清理none镜像
  17. unity WegGL 调用js
  18. [java工具类01]__构建格式化输出日期和时间的工具类
  19. npm WARN saveError ENOENT: no such file or directory
  20. GDI+ 和GDI

热门文章

  1. 用postman导出excel文件
  2. ubutun安装停留在界面
  3. robotframework,移动端(小程序)自动化,解决无法输入中文
  4. 【模板】普通平衡树(权值splay)
  5. 几种常见的排序方法总结(Python)
  6. pku-3321 Apple Tree(dfs序+树状数组)
  7. Spring注解开发系列Ⅵ --- AOP&amp;事务
  8. markdown常用语法使用笔记+使用技巧(持续更新......)
  9. gRPC in ASP.NET Core 3.x -- Protocol Buffer(2)Go语言的例子(下)
  10. pycharm中的快捷键