1. 程式人生 > >Cesium入門11 - Interactivity - 互動性

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操作的例子:

因為我們希望在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行為。
image

Cesium中文網交流QQ群:807482793

Cesium中文網:http://cesiumcn.org/ | 國內快速訪問:http://cesium.coinidea.com/