vuejsmouseenter

❶ cesium上如何绑定地球图片添加点击事件

拾取和选择

ThingJS 系统内置了很多事件，比点击鼠标、键盘输入、层级变化等。用户可以监听这些事件，在事件回调中进行相应的业务逻辑处理网页链接‍

拾取

通过属性和接口获取鼠标拾取（Pick）的物体

当鼠标在一个物体上悬停时，我们经常希望做一些操作，比如变色等。

我们使用Picker类来获取鼠标拾取（Pick）的物体，通过app.picker得到Picker类来实现这个功能，见下例：

//判断拾取的物体是否改变if(app.picker.isChanged()) {
//通过app.picker.objects 得到当前拾取的物体
console.log(app.picker.objects);
//通过app.picker.previousObjects 得到之前拾取的物体
console.log(app.picker.previousObjects);}

通过事件获取鼠标拾取的物体

可以通过MouseEnter和MouseLeave来实现 。

// 鼠标拾取物体显示边框app.on(THING.EventType.MouseEnter, '.Thing' ,function(ev) {
ev.object.style.outlineColor = '#FF0000';});// 鼠标离开物体边框取消app.on(THING.EventType.MouseLeave,'.Thing', function(ev) {
ev.object.style.outlineColor = null;});

查看示例

示例效果如下图所示：

选择

选择物体

鼠标悬停到物体上，但不代表我选择它了，比如是我们点击后才表明我们选择了它。选择物体，我们通过Selection模块实现，可通过 app.selection 的接口实现该功能，见下例：

//将物体加入到选择集中app.selection.select(obj);// 判断对象是否在选择集中app.selection.has(obj);//将物体从选择集中删除app.selection.deselect(obj);//清空选择集app.selection.clear();

通过属性和方法，侦测选择集变化

Selection通过提供isChanged方法获取选择集变化，通过 objects 和 previousObjects 获取当前选择集和变化之前的选择集，见下例：

if(app.selection.isChanged()) {

//获取当前哪些物体被选择

console.log(app.selection.objects);

//当isChanged时，之前都有哪些物体被选择

console.log(app.selection.previousObjects);}

通过事件侦测选择集变化

可以通过Select和Deselect事件精确控制物体针对选择的响应，如下例：

app.on(THING.EventType.Select, '.Thing', function (ev) {
// 选择集中的物体颜色进行改变
ev.object.style.color = "#ff0000";});app.on(THING.EventType.Deselect, '.Thing', function (ev) {
// 物体从选择集中删除时，清除颜色
ev.object.style.color = null;});

我们也可以通过SelectionChange事件。

app.on(THING.EventType.SelectionChange, function (ev) {
console.log(ev.previousObjects+" "+ev.objects);});