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/

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

  1. Cesium入门10 - 3D Tiles

    Cesium入门10 - 3D Tiles Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 我们团队有时把Ces ...

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

    继续上一篇ActiveReport开发入门-列表的交互性文章,这次我们说一下图表的交互性,那么我们就开始吧 首先:说一下,如果单单的使用按钮栏和图表是满足不了的,因为图表在Active中是有些特别的, ...

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

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现 ...

  4. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  5. cesium入门示例-测量工具

    作为cesium入门示例级别的最后一篇,参考cesium-长度测量和面积测量实现测量工具封装,修改了其中的距离测量函数,计算贴地距离,并对事件内部处理做了调整.包括贴地距离测量.面积测量.结果清除. ...

  6. cesium入门示例-矢量化单体分类

    实现楼层的分层选择和属性信息展示,该功能基于大雁塔倾斜数据实现单体化分类显示. 数据准备: 1.大雁塔倾斜数据,已转换为3dTiles,参考cesium入门示例-3dTiles加载的第2节osgb数据 ...

  7. Cesium入门13 - Extras - 附加内容

    Cesium入门13 - Extras - 附加内容 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 剩下的代码 ...

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

    Cesium入门12 - Camera Modes - 相机模式 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ ...

  9. Cesium入门9 - Loading and Styling Entities - 加载和样式化实体

    Cesium入门9 - Loading and Styling Entities - 加载和样式化实体 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://c ...

随机推荐

  1. pycharm字体放大的设置

    一.pycharm字体放大的设置 File -> setting -> Keymap ->在搜寻框中输入:increase -> Increase Font Size(双击) ...

  2. JAVA遍历某个文件夹下所有文件listFiles() 实现按照名称升序排序

    File[] files = file.listFiles(); List fileList = Arrays.asList(files); Collections.sort(fileList, ne ...

  3. SpringBoot打包实现静态文件、配置文件、jar包分离

    在pom文件里面添加 <plugins> <!--定义项目的编译环境--> <plugin> <groupId>org.apache.maven.plu ...

  4. JAVA下划线、驼峰相互转换

    /** * 下划线转驼峰 * @param str * @return */ public static String lineToHump(String str) { str = str.toLow ...

  5. jquery gantt 的使用

    1.引入css与js文件 <link rel="stylesheet" href="css/style.css" /> <script src ...

  6. 【LeetCode】750. Number Of Corner Rectangles 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcode ...

  7. 第三十个知识点:大致简述密钥协商中的BR安全定义。

    第三十个知识点:大致简述密钥协商中的BR安全定义. 在两方之间建密钥共享是一件密码学中古老的问题.就算只考虑定义也比标准加密困难的多.尽管古典的Diffie-Hellman协议在1976年思路解决了这 ...

  8. Java程序设计基础笔记 • 【第6章 循环结构进阶】

    全部章节   >>>> 本章目录 6.1 for循环 6.1.1 for循环的简介 6.1.2 for循环的使用 6.1.3 for循环的表达式 6.1.4 实践练习 6.2 ...

  9. AES对称加密算法实现:Java,C#,Golang,Python

    高级加密标准(Advanced Encryption Standard,简写AES),是一种用来替代DES的对称加密算法,相比DES,AES安全性更高,加密速度更快,因此被广泛使用. 理论上看,AES ...

  10. iNeuOS工业互联网操作系统,增加设备驱动的自定义参数模板,适配行业个性化设备的应用场景

    目       录 1.      概述... 2 2.      平台演示... 2 3.      应用过程... 2 1.   概述 增加设备驱动的自定义参数模板,适配行业个性化设备的应用场景. ...