前言

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

内容概览

1.cesium1.65api版本贴地贴模型标绘工具效果
2.源代码demo下载

效果图如下:

实现思路:

  • 鼠标左键Cesium.ScreenSpaceEventType.LEFT_CLICK
  • 鼠标移动Cesium.ScreenSpaceEventType.MOUSE_MOVE
  • 鼠标右键Cesium.ScreenSpaceEventType.RIGHT_CLICK
    鼠标左键事件,获取点击地图的每个坐标点;鼠标移动事件,动态扑捉鼠标移动状态,下一个坐标点位置;鼠标右键意味着标绘结束状态。
  • 定义封装DrawTool标绘工具:
  1. var DrawTool = function (obj) {
  2. if (!obj.viewer || !obj) {
  3. console.warn("缺少必要参数!--viewer");
  4. return;
  5. }
  6. this.viewer = obj.viewer;
  7. this.hasEdit = obj.hasEdit;
  8. this.toolArr = [];
  9. this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
  10. this.show = obj.drawEndShow;
  11. }
  12. DrawTool.prototype = {
  13. startDraw: function (opt) {
  14. var that = this;
  15. // if (this.hasEdit) {
  16. // this.bindEdit();
  17. // }
  18. if (opt.type == "polyline") {
  19. var polyline = new CreatePolyline(this.viewer, opt.style);
  20. polyline.start(function (evt) {
  21. if (that.hasEdit) {
  22. that.unbindEdit();
  23. polyline.startModify(opt.modifySuccess);
  24. that.lastSelectEntity = polyline;
  25. }
  26. if (opt.success) opt.success(evt);
  27. if (that.show == false) polyline.setVisible(false);
  28. });
  29. this.toolArr.push(polyline);
  30. }
  31. if (opt.type == "polygon") {
  32. var polygon = new CreatePolygon(this.viewer, opt.style);
  33. polygon.start(function () {
  34. if (that.hasEdit) {
  35. that.unbindEdit();
  36. polygon.startModify();
  37. that.lastSelectEntity = polygon;
  38. }
  39. if (opt.success) opt.success(polygon);
  40. if (that.show == false) polygon.setVisible(false);
  41. });
  42. this.toolArr.push(polygon);
  43. }
  44. if (opt.type == "billboard") {
  45. var billboard = new CreateBillboard(this.viewer, opt.style);
  46. billboard.start(function () {
  47. if (that.hasEdit) {
  48. that.unbindEdit();
  49. billboard.startModify();
  50. that.lastSelectEntity = billboard;
  51. }
  52. if (opt.success) opt.success(billboard);
  53. if (that.show == false) billboard.setVisible(false);
  54. });
  55. this.toolArr.push(billboard);
  56. }
  57. if (opt.type == "circle") {
  58. var circle = new CreateCircle(this.viewer, opt.style);
  59. circle.start(function () {
  60. if (that.hasEdit) {
  61. that.unbindEdit();
  62. circle.startModify();
  63. that.lastSelectEntity = circle;
  64. }
  65. if (opt.success) opt.success(circle);
  66. if (that.show == false) circle.setVisible(false);
  67. });
  68. this.toolArr.push(circle);
  69. }
  70. if (opt.type == "rectangle") {
  71. var rectangle = new CreateRectangle(this.viewer, opt.style);
  72. rectangle.start(function () {
  73. if (that.hasEdit) {
  74. that.unbindEdit();
  75. rectangle.startModify();
  76. that.lastSelectEntity = rectangle;
  77. }
  78. if (opt.success) opt.success(rectangle);
  79. if (that.show == false) rectangle.setVisible(false);
  80. });
  81. this.toolArr.push(rectangle);
  82. }
  83. //重写材质
  84. if (opt.type == "flowPolyline") {
  85. var polyline = new CreatePolyline(this.viewer, opt.style);
  86. polyline.start(function () {
  87. if (that.hasEdit) {
  88. that.unbindEdit();
  89. polyline.startModify();
  90. }
  91. if (opt.success) opt.success(polyline);
  92. });
  93. this.toolArr.push(polyline);
  94. }
  95.  
  96. },
  97. createByPositions: function (opt) {
  98. if (this.hasEdit) {
  99. this.bindEdit();
  100. }
  101. if (!opt) opt = {};
  102. if (opt.type == "polyline") {
  103. var polyline = new CreatePolyline(this.viewer, opt.style);
  104. polyline.createByPositions(opt.positions, opt.success);
  105. this.toolArr.push(polyline);
  106. }
  107. if (opt.type == "polygon") {
  108. var polygon = new CreatePolygon(this.viewer, opt.style);
  109. polygon.createByPositions(opt.positions, opt.success);
  110. this.toolArr.push(polygon);
  111. }
  112. if (opt.type == "billboard") {
  113. var billboard = new CreateBillboard(this.viewer, opt.style);
  114. billboard.createByPositions(opt.positions, function(){
  115. if(opt.success) opt.success(billboard)
  116. });
  117. this.toolArr.push(billboard);
  118. }
  119. },
  120. destroy: function () {
  121. for (var i = 0; i < this.toolArr.length; i++) {
  122. var obj = this.toolArr[i];
  123. obj.destroy();
  124. }
  125. },
  126. lastSelectEntity: null,
  127. bindEdit: function () {
  128. var that = this;
  129. this.handler.setInputAction(function (evt) { //单机开始绘制
  130. var pick = that.viewer.scene.pick(evt.position);
  131. if (Cesium.defined(pick) && pick.id) {
  132. for (var i = 0; i < that.toolArr.length; i++) {
  133. if (pick.id.objId == that.toolArr[i].objId && (that.toolArr[i].state == 1||that.toolArr[i].state == 2)) {
  134. if (that.lastSelectEntity) {
  135. that.lastSelectEntity.endModify();
  136. }
  137. that.toolArr[i].startModify();
  138. that.lastSelectEntity = that.toolArr[i];
  139. break;
  140. }
  141. }
  142. }
  143. }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  144. },
  145. unbindEdit: function () {
  146. for (var i = 0; i < this.toolArr.length; i++) {
  147. this.toolArr[i].endModify();
  148. }
  149. }
  150. }
  • 封装定义标绘点、线、面、矩形js类,里面涉及到细节函数,自行看对应的源码demo:

  • DrawTool标绘工具初始化以及调用:

  • 更多详情见下面链接文章

    小专栏此文章

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

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

  1. cesium1.63.1api版本贴地贴模型量算工具效果(附源码下载)

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

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

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

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

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

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

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

  5. Roslyn 入门:使用 .NET Core 版本的 Roslyn 编译并执行跨平台的静态的源码

    Roslyn 是微软为 C# 设计的一套分析器,它具有很强的扩展性.以至于我们只需要编写很少量的代码便能够编译并执行我们的代码. 作为 Roslyn 入门篇文章之一,你将可以通过本文学习如何开始编写一 ...

  6. Deeplab v3+中的骨干模型resnet(加入atrous)的源码解析,以及普通resnet整个结构的构建过程

    加入带洞卷积的resnet结构的构建,以及普通resnet如何通过模块的组合来堆砌深层卷积网络. 第一段代码为deeplab v3+(pytorch版本)中的基本模型改进版resnet的构建过程, 第 ...

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

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

  8. 《天龙八部》及Ogre3D模型的3ds max导入插件(源码公布)

    測试UE4项目.苦于没有像样的模型和动画资源,所以想到把<天龙八部>等网游的资源导出来用. 于是做了个max导入插件. 效果还是不错的. 效果图: 上图是<斗破苍穹>的游戏资源 ...

  9. 从原子类和Unsafe来理解Java内存模型,AtomicInteger的incrementAndGet方法源码介绍,valueOffset偏移量的理解

    众所周知,i++分为三步: 1. 读取i的值 2. 计算i+1 3. 将计算出i+1赋给i 可以使用锁来保持操作的原子性和变量可见性,用volatile保持值的可见性和操作顺序性: 从一个小例子引发的 ...

随机推荐

  1. Liunx创建到部署ASP.NET Core项目从零开始-----使用Centos7

    一.搭建环境 1..注册Microsoft密钥和源 执行命令:sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages ...

  2. QDialog

    QDialog设置setWindowFlags(Qt::FramelessWindowHint);后,dialog弹不出来,界面不显示: 在继承一个QDialog类并设置窗口为无边框时,如果调用set ...

  3. [集训]FWT基础练习题

    题意 给出n个长度为20的二进制数和数字k,每次询问给出一个二进制数,问从n个数中挑k个数(不能重复)的按位或能包含询问的组合有多少个.数字均小于等于5E5,1s. 思考 强行算出2^20个答案,再O ...

  4. HanLP《自然语言处理入门》笔记--2.词典分词

    2. 词典分词 中文分词:指的是将一段文本拆分为一系列单词的过程,这些单词顺序拼接后等于原文本. 中文分词算法大致分为基于词典规则与基于机器学习这两大派. 2.1 什么是词 在基于词典的中文分词中,词 ...

  5. <状压DP>solution-HDU5691_Sitting in Line

    Sitting in Line Problem Description 度度熊是他同时代中最伟大的数学家,一切数字都要听命于他.现在,又到了度度熊和他的数字仆人们玩排排坐游戏的时候了.游戏的规则十分简 ...

  6. k8s基本命令

    kubernetes 常用命令 通过yaml文件创建: kubectl create -f xxx.yaml (不建议使用,无法更新,必须先delete) kubectl apply -f xxx.y ...

  7. [实用分享]Kindle电子书格式AZW3转换为MOBI

    [实用分享]Kindle电子书格式AZW3转换为MOBI 思路:先拆解成源文件再转换成 MOBI 推荐首选这种方法.此方法的思路是,首先用 KindleUnpack 把 azw3 文件拆解成源文件,然 ...

  8. RocketChat:开源聊天软件部署

    1. 简介 RocketChat是一款优秀的开源聊天软件.支持各种平台,IOS.Android.Web.Mac.Windows以及Linux,安装部署简单,功能简单易用,目前部分功能还在完善当中,特别 ...

  9. 基于 Google-S2 的地理相册服务实现及应用

    马蜂窝技术原创内容,更多干货请关注公众号:mfwtech 随着智能手机存储容量的增大,以及相册备份技术的普及,我们可以随时随地用手机影像记录生活,在手机中存储几千张甚至上万张照片已经是很常见的事情.但 ...

  10. HTTP&HTTPS协议详解之HTTP篇

    一.HTTP简介 01.什么是HTTP HTTP(HyperText Transfer Protocol ,超文本传输协议),是一个基于请求与响应的,无状态的,应用层的协议,常基于TCP/IP协议传输 ...