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);});