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/

Cesium入門11 - Interactivity - 交互性