Cesium入门11 - Interactivity - 交互性

Cesium入门11 - Interactivity - 交互性

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/

最后,让我们添加一些鼠标交互。为了提高我们的geocache标记的可见性,当用户在标记上hovers时,我们可以改变它们的样式来突出显示。

为了实现这一点,我们将使用拾取pick,一种Cesium的特征,从3D场景中返回数据,在观看者画布上给出像素位置。

这里有以下几种不同的picking:

  • Scene.pick : 返回包含给定窗口位置的基元的对象。
  • Scene.drillPick : 返回包含给定窗口位置的所有原语的对象列表。
  • Globe.pick : 返回给定光线与地形的交点。

一下是一些picking操作的例子:

因为我们希望在hover触发我们的高亮效果,首先我们需要创建一个鼠标动作处理器。为此,我们将使用ScreenSpaceEventHandler在用户输入操作中触发指定函数的一组处理程序。ScreenSpaceEventHandler.setInputAction()监听用户行为类型ScreenSpaceEventType,并运行一个特定的函数,将用户操作传递为参数。这里,我们将传递一个以movement为输入的函数:

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

接下来让我们来写我们的高亮功能。处理程序将在鼠标movement中传递,从中我们可以提取一个窗口位置与pick()一起使用。如果拾取返回billboard对象,我们知道我们在一个标记上hovering。然后,使用我们了解的Entity样式,我们可以应用突出显示样式。

// If the mouse is over a point of interest, change the entity billboard scale and color
handler.setInputAction(function(movement) {
    var pickedPrimitive = viewer.scene.pick(movement.endPosition);
    var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
    // Highlight the currently picked entity
    if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
        pickedEntity.billboard.scale = 2.0;
        pickedEntity.billboard.color = Cesium.Color.ORANGERED;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

这成功地触发了标记的高亮样式更改。但是,您会注意到,当我们移动光标时,标记保持突出。我们可以通过跟踪最后一个标记来修复,并恢复原来的样式。

这里是完整的功能,标记高亮显示和取消高亮工作:

// If the mouse is over a point of interest, change the entity billboard scale and color
var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
    var pickedPrimitive = viewer.scene.pick(movement.endPosition);
    var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
    // Unhighlight the previously picked entity
    if (Cesium.defined(previousPickedEntity)) {
        previousPickedEntity.billboard.scale = 1.0;
        previousPickedEntity.billboard.color = Cesium.Color.WHITE;
    }
    // Highlight the currently picked entity
    if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
        pickedEntity.billboard.scale = 2.0;
        pickedEntity.billboard.color = Cesium.Color.ORANGERED;
        previousPickedEntity = pickedEntity;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

就是这样!现在我们成功地添加了鼠标movement handler和标记实体的hover行为。

Cesium中文网交流QQ群:807482793

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/

原文地址:https://www.cnblogs.com/cesiumjs/p/9988275.html

时间: 2024-10-30 01:46:18

Cesium入门11 - Interactivity - 交互性的相关文章

ActiveReport开发入门-图表的交互性

继续上一篇ActiveReport开发入门-列表的交互性文章,这次我们说一下图表的交互性,那么我们就开始吧 首先:说一下,如果单单的使用按钮栏和图表是满足不了的,因为图表在Active中是有些特别的,原因稍后 补充,接着我们就开始吧 1:新建一个活动报表,两行一列,拖入一个按钮栏和一个数据卡片组,然后在数据卡片组中拖入一个图表 2:给图表.数据卡片组拖入对应数据项 3:在按钮栏上创建按钮栏和数据卡片组之间的连接 4:点击图表右键,创建数据卡片组和图表之间的主要/详细关系 5:保存运行,数据 6:

MySQL入门-11:数据的增、删、改

1.数据插入 2.数据更新 3.数据删除 4.更新和删除的指导原则 1.数据插入-INSERT 插入数据可以使用以下几种方式: 插入完整的行 插入行的一部分 插入多行 插入某些查询的结果 Syntax: INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE]     [INTO] tbl_name [(col_name,...)]     {VALUES | VALUE} ({expr | DEFAULT},...),(...),...

ASP.NET MVC 入门11、使用AJAX

asp.net mvc 支持微软自身Ajax 和 JQuery框架 asp.net mvc View视图可以理解为 一个包含"<%%>"变量引和的模板. Script与HTML优雅分离参见: http://www.cnblogs.com/QLeelulu/archive/2008/10/22/1317214.html ASP.NET MVC 入门11.使用AJAX

Cesium入门12 - Camera Modes - 相机模式

Cesium入门12 - Camera Modes - 相机模式 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 为了展现我们的无人机飞行,让我们用相机模式进行实验.我们将保持简单的两个基本的相机模式,用户可以切换之间. Free Mode : 默认相机控制. Drone Mode : 让相机跟随无人机通过飞行在一个固定的距离. 自由模式不需要代码,因为它使用默认控件.至于无人机跟随模式,我们可以使用摄像机的

cesium 入门开发系列地图鹰眼功能(附源码下载)

前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现鹰眼图 cesium 自身 api 实现鹰眼图 源代码 demo 下载 cesium 结合 leaflet 实现鹰眼图方式效果图如下 初始化 cesium function initialGlobeView() { Cesium.Ion.defaultAccessToken = 'eyJhbGciO

ActiveReport开发入门-列表的交互性

Cognos10以来推出了Active Report,和很多人一样,怀着一颗好奇的心,准备接纳和了解一下这个新生儿,于是乎便有了下面的故事. 1:新建一个活动报表,两行一列拖入一个按钮栏和一个列表 2:创建按钮栏和列表之间的交互性,行为选择为过滤器 3:进入报表初始化显示所有数据 4:选择上面的年份显示相对于年份的数据 : 5:以上操作和普通的RS报表来比省去了设置过滤器的麻烦操作,避免了再次刷新网页,体现了良好的交互性

Python零基础入门(11)-------dict 字典表

dict 字典表属于映射的数据类型 特性:通过键(key),而不是通过下标访问数据 包含任意对象的无序集合 可变长度,可任意嵌套 属于"可变映射" 分类 对象引用表(Hash Table) 声明:   d = { } 是一个空的字典表.字典表是一个 {key: value} 的形式.key 只能是不可变的元素(可变类型List就不可以). 从下面图片你也可以看出 dict 字典表 是一个无序的集合.是通过内部Hash算法排序的 key 只能是不可变类型的数据.可变类型就会抛出错误信息

java编程入门11 数字处理类

1.数字格式化 1.DecimalFormat类(用于格式化十进制数字) 1)DecimalFormat类是NumberFormat的子类,它可以将一些数字格式化为整数.浮点数.百分数等.通过使用该类可以为要输出的数字加上单位或控制数字的精度.一般情况下可以在实例化DecimalFormat对象时传递数字格式,也可以通过DecimalFormat类中的applyPattern()方法来实现数字的格式化 2)在格式化数字时,DecimalFormat类中使用一些特殊字符构成一个格式化模板,使数字按

MachineLearning入门-11(算法评估)

评估就是估计算法在预测新数据时候能达到什么程度,但这不是对算法准确度的保证. 当评估完算法模型之后,可以用整个数据集(训练数据集和评估数据集的合集)重新训练算法,生成最终的算法模型. 接下来将学习4种不同的分离数据集的方法,用来分离训练数据集和评估数据集,并用其评估算法模型: 分离训练数据集和评估数据集 K折交叉验证分离 弃一交叉验证分离 重复随机评估.训练数据集分离 分离训练数据集和评估数据集 最简单的方法就是将评估数据集和训练数据集完全分开,采用评估数据集来评估算法模型.通常将67%的数据集