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操做的例子：

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