null - 程序员宅基地

在cesium中增加自定义气泡或弹窗提示信息可随三维场景移动（思路解析加源码）_cesium气泡框-程序员宅基地

在cesium项目中，我们通过鼠标点击场景中的实体，进而弹出提示框信息，是最基本的项目需求，如果想实现改提示框跟随场景的移动而移动还是有点难度的，而且用户体验更佳。

一、实现思路

实现整个过程我们需要分为俩步：获取当前坐标点并且弹出提示框，动态更新提示框的位置。

1、获取当前坐标：首先我们需要在场景中注册单击事件用去单击拾取实体，你可以在添加实体的时候通过设置其id或者name属性，用于标识你需要弹出提示框的实体，然后通过viewer.scene.cartesianToCanvasCoordinates方法取得屏幕坐标，该方法接收一个三维笛卡尔坐标，返回一个屏幕坐标。（注意：该屏幕坐标是相对于viewer容器的值）。

2，动态更新坐标：这里我们需要监听场景的每一帧，我们可以通过 viewer.scene.postRender.addEventListener进行监听（注意：对应场景每一帧进行监听开销比较大，所以代码尽量简洁，比如只有当提示框处于显示状态我们才进行监听）

二、源码实现

            var trackPop = undefined; //记录鼠标捕获实体的坐标
            //添加单击监听事件
            handler.setInputAction(function(movement) {
              var pick = viewer.scene.pick(movement.position);
              if (Cesium.defined(pick) && pick.id && pick.id.name == "落雷") {
                console.log(pick.id);
                var bubble = document.getElementById("popover_span");
                //设置弹出框位置
                var winpos = viewer.scene.cartesianToCanvasCoordinates(
                  pick.id.position._value
                );
                bubble.style.left = winpos.x + 20 + "px";
                bubble.style.top = winpos.y + 50 + "px";
                that.luolei_value = true;
                that.luolei_content = [];
                that.luolei_content.push({ label: "名称", value: "落雷点" });
                that.luolei_content.push({
                  label: "x坐标",
                  value: bubble.style.left
                });
                that.luolei_content.push({
                  label: "y坐标",
                  value: bubble.style.top
                });
                trackPop = pick.id.position._value;
              } else {
                that.luolei_value = false;
                trackPop = undefined;
              }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

            //每帧渲染结束监听
            viewer.scene.postRender.addEventListener(function(e) {
              if (that.luolei_value && trackPop) {
                var winpos = viewer.scene.cartesianToCanvasCoordinates(
                  trackPop
                );
                var bubble = document.getElementsByClassName("el-popover")[0];
                var poph = bubble.offsetHeight;
                bubble.style.left = winpos.x + 20 + "px";
                bubble.style.top = winpos.y + 50 - poph + "px";
              }
            });

三、实现效果图

四、更多

这里有个地方需要说明，我的弹框样式用到了elemeUI 中的Popover 弹出框组件，目的在于实现下面那个倒立的三角形，看图即可明白，对整体效果的实现没有影响。

如果你还有不了解的地方，

如果你还需要进行cesium交流，

那一起学习探讨吧。

你可以加入我们的基地，我们基地的地址是：450342630（QQ群号）

本文链接：https://blog.csdn.net/qq_27532167/article/details/103806226

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

linux amixer原理,amixer和alsamixer使用说明-程序员宅基地

文章浏览阅读658次。amixer和alsamixer使用说明amixer和alsamixer使用说明amixer和alsamixer说明本文主要解答：1. amixer与alsamixer的区别2. amixer与alsamixer的使用alsamixer与amixer的区别alsamixer是Linux音频框架ALSA工具之一，用于配置音频各个参数;alsamixer是基于文本图形界面的，可以在终端中显示.通过键盘..._amixer

web搭建，dns服务器搭建_dns和web服务器搭建-程序员宅基地

文章浏览阅读2.2k次，点赞3次，收藏15次。安装Web服务1、www(万维网服务)，主要应用于搭建web站点2、中间件，是用承载我们的Web站点，那么什么是中间件（如，iis、apache、nginx、tomcat、jboss等）,Web网站没有中间件是不能运行。3、如何安装windows IIS服务器管理器–角色–添加–web服务器–4、web站点的访问方式有三种（1）通过ip访问，一般是有多个公网地址，可以每一个站点分配一个ip（这种情况用的极少）原因：Ip很难记，公网地址需要收费（2）多端口访问，web站点默认是80端口，80_dns和web服务器搭建

Java时间处理工具类TimeUtils_java 时间工具类-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏5次。以上方法笔者觉得没有必要再封装进工具类了，直接调用就行而其他的处理可以参考笔者的时间处理工具类 TimeUtils 的以下方法时间格式转化：转化成时间戳：转化成 LocalDateTimeformat()：转化成格式化日期字符串时间获取：获取当前时间戳（精确到毫秒）：获取当前的年（仅数值）：获取当前的月（仅数值）：获取当前的日（仅数值）：获取当前的年（格式为 yyyy 的字符串）：获取当前的年月（格式为 yyyy-MM 的字符串）_java 时间工具类

WINDOWS2008R2 2012 2016 服务器系统更新补丁打补丁循环启动无法进系统恢复解决办法_win2008r2无法进入系统-程序员宅基地

文章浏览阅读3.5k次。可以用如下方法进行急救: 1.PE或者windows光盘启动服务器（记得启动过程中手动加载阵列卡，如果是虚拟化里机器则不用，虚拟化里的课把pe做成iso加载，来启动虚拟化里的机器，我这的是vsphere6.7环境，四台物理服务器做的集群，使用的VSAN）.数据库在使用过程中，如遇到突然断电的情况，数据库损坏的机率很大，建议客户实时备份数据。如果确认补丁有问题，在安装了补丁后，系统还未进行重启，可在线进行挂起补丁的移除，然后重启。1.请务必做好备份，备份了数据库，在操作，保证数据绝对安全。_win2008r2无法进入系统

Android：最全面&详细的性能优化攻略（含内存优化、内存泄漏、绘制优化、布局优化、图片优化、APK优化、多线程优化、列表优化等）_安卓项目优化方向-程序员宅基地

文章浏览阅读2.6k次，点赞9次，收藏40次。前言：佛教中有一句话：初学者的心态，拥有初学者心态是件了不起的事情。真正的大师永远怀有一颗学徒的心。一、概述在Android中，性能优化非常重要，因为这决定这一个APP的质量好坏，一个更快更稳更省的app能给用户更优秀的体验。更快：App流畅不卡顿，快速响应；更稳：App稳定运行，程序不崩溃（Crash）和无响应（ANR）；更省：节省资..._安卓项目优化方向

window.onresize的详细使用-程序员宅基地

文章浏览阅读6.9k次。window.onresize的详细使用_window.onresize

随便推点

Linux V4L2子系统分析（一）_v4l2_subdev_call-程序员宅基地

文章浏览阅读4.2k次，点赞12次，收藏72次。1.概述Linux系统上的Video设备多种多样，如通过Camera Host控制器接口连接的摄像头，通过USB总线连接的摄像头等。为了兼容更多的硬件，Linux内核抽象了V4L2（Video for Linux Two）子系统。V4L2子系统是Linux内核中关于Video（视频）设备的API接口，是V4L（Video for Linux）子系统的升级版本。V4L2子系统向上为虚拟文件系统提供了统一的接口，应用程序可通过虚拟文件系统访问Video设备。V4L2子系统向下给Video设备提供接口，同时管理_v4l2_subdev_call

服务器基础配置：浪潮服务器配置ILO地址、修改管理员密码、查看虚拟化是否打开：_浪潮服务器修改管理口密码-程序员宅基地

文章浏览阅读1w次。使用场景：因为在公司机房中的服务器我们在使用需要对他做一些类似于初始化的配置，分别是三个，——》第一个是配置服务器的ILO地址，这个是我们通过网络打开一个Web页面对服务器进行一些操作；——》第二个是对管理用户的密码进行修改，这个是因为不同的服务器初始的管理员的密码也许是不一样的，我们将其修改为统一的方便记忆也方便管理；——》第三个就是开启服务器的半虚拟化功能，这个是我们的公司的也许需要服..._浪潮服务器修改管理口密码

php如果字符串有1 3 5,PHP常用字符串函数小结-程序员宅基地

文章浏览阅读87次。PHP常用字符串函数小结来源：程序员人生发布时间：2015-01-22 09:02:32 阅读次数：1594次1、判断类型的函数is_bool() //判断是不是为布尔型is_float() //判断是不是为浮点型is_real() //同上is_int() //判断是不是为整型is_integer() //同上is_string() ..._php 字符串1-5位

matlab从flove,Matlab玩出新高度，变身表白女友神器_善良995的博客-程序员宅基地-程序员宅基地

文章浏览阅读431次。原文作者：善良995原文标题：Matlab玩出新高度，变身表白女友神器发布时间：2021-03-19 13:36:02Matlab还可以这样玩儿？每逢节日愁哭程序员，不知道该送什么给女朋友，在这里教你用Matlab玩儿出属于程序员的浪漫，送给她一整天的惊喜^^一、效果图先来看看效果图：怎么样，这礼物是不是很用心？是不是很特别？是不是很程序猿？(斜眼笑~)二、完整模板代码当然，我怎么忍心让好男孩们千..._clc clear [x,y,z] = meshgrid(linspace(-3,3,101)); f = -x.^2.*z.^3-(9/80)

字符数组和字符串指针在内存中存储_使用字符串指针定义的变量储存在内存中的-程序员宅基地

文章浏览阅读5.5k次，点赞2次，收藏4次。#include#includechar* strcpy1(){ char *p = "hello kitty"; printf("%s\n", p); return p;}int main(){ printf("%s", strcpy1()); return 0;}字符串在内存中存储在只读数据段，当定义一个字符串指针时，该指针指向这个只读区域，即使在函数中将这个指针返回_使用字符串指针定义的变量储存在内存中的

ubuntu18.04下mysql必须要sudo权限才能打开_在ubuntu中mysql登录时为什么要加sudo-程序员宅基地

文章浏览阅读4.1k次，点赞5次，收藏21次。问题：ubuntu18.04下mysql必须要sudo权限才能打开解决办法：通常是因为，用户的密码加密方式不正确导致的。1、sudo mysql -u root -p2、use mysql；3、update user set plugin = 'mysql_native_password';4、flush privileges;5、mysql -u root -p，输入密码登录成功..._在ubuntu中mysql登录时为什么要加sudo