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 entityif (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 entityif (Cesium.defined(previousPickedEntity)) {previousPickedEntity.billboard.scale = 1.0;previousPickedEntity.billboard.color = Cesium.Color.WHITE;}// Highlight the currently picked entityif (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/

轉載于:https://www.cnblogs.com/cesiumjs/p/9988275.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Cesium入门11 - Interactivity - 交互性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。