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 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/