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操作的例子:
- Picking Demo
- 3D Tiles Feature Picking Demo
因为我们希望在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 entityif (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 entityif (Cesium.defined(previousPickedEntity)) {previousPickedEntity.billboard.scale = 1.0;previousPickedEntity.billboard.color = Cesium.Color.WHITE;}// Highlight the currently picked entityif (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
Cesium入门11 - Interactivity - 交互性相关推荐
- html2d动画,HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
交互性 SVG拥有良好的用户交互性,例如: 1. SVG能响应大部分的DOM2事件. 2. SVG能通过cursor良好的捕捉用户鼠标的移动. 3. 用户可以很方便的通过设置svg元素的zoomAnd ...
- cesium入门示例-测量工具
作为cesium入门示例级别的最后一篇,参考cesium-长度测量和面积测量实现测量工具封装,修改了其中的距离测量函数,计算贴地距离,并对事件内部处理做了调整.包括贴地距离测量.面积测量.结果清除. ...
- cesium 入门开发系列地图鹰眼功能(附源码下载)
前言 cesium 入门开发系列环境知识点了解: cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等 cesium 在线例子 内容概览 cesium 结合 leaflet ...
- 视频教程-Cesium入门-JavaScript
Cesium入门 硕士研究生,本硕均毕业于北京师范大学,专业为计算机科学与技术.专注于大数据,数据可视化,Web等领域.Cesium中文网站长:http://cesium.coinidea.com/. ...
- cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解: cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等 cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 ...
- Wayland入门11:shell unstable协议
上一篇介绍的是stable版的协议,本文介绍unstable版的协议. 窗口部分是一样的. 我们使用新协议的对象 struct zxdg_shell_v6 *xdg_shell; struct zxd ...
- vue集成cesium入门教程(1)环境搭建、初始化三维地球
1.概述 这篇内容是<vue集成cesium入门教程>的第一篇,我将记录在vue中集成cesium并实现页面的初始化(显示三维地图页面)等学习内容.效果如下: 2.实现步骤 首先是 ...
- Cesium入门7 - Adding Terrain - 添加地形
2019独角兽企业重金招聘Python工程师标准>>> Cesium入门7 - Adding Terrain - 添加地形 Cesium中文网:http://cesiumcn.org ...
- Cesium入门(五):加载WMTS瓦片地图服务
本章介绍Cesium JS库的WebMapTileServiceImageryProvider类,并以GeoServer为例演示了在CesiumViewer控件中添加瓦片图层的方法. 主要包括以下内容 ...
最新文章
- GNS3路由器直连端口Ping不通
- 使用KubeKey 离线环境部署 KubeSphere v3.0.0
- 工具资源系列之给mac装个虚拟机
- mysql绿色版安装
- 中国AI人才缺口500万,10本硬核技术书带你上车
- android 字符串替换_Android开发之旅:android架构
- 猜你喜欢代码替换_如何在 GitHub 上找到你要的代码?
- 主从复制面试之作用和原理
- RabbitMQ的消息确认、消息持久化
- C/C++ 解决sizeof求结构体大小(结构体内存对齐)
- vue全局引入字体并使用
- php 开源企业网站,TayCMS 免费开源企业网站建站系统 For PHP v1.8
- GBK UTF-8 ASCLL url编码集合
- 计算机打字测试,打字测试
- 建立数据挖掘的用户画像
- unity2d物体3d效果
- 深析Vue双向数据绑定(MVVM模型)
- 3-33在图 3-31中,以太网交换机有6个接口,分别接到5台主机和一个路由器。在下面表中的“动作”一栏中,表示先后发送了4个帧。假定在开始时,以太网交换 机的交换表是空的。试把该表中其他的栏目都填写
- java学习之屌丝逆袭
- ubuntu 14.04 成功迁移根分区到SSD