Finally, let’s add some mouse interaction. To improve the visibility of our geocache markers, we can change their style to highlight them when the user hovers over a marker.

To achieve this, we’ll use picking, a Cesium feature that returns data from the 3D scene given a pixel position on the viewer canvas.

There are several types of picking:

• Scene.pick : Returns an object containing the primitive at the given window position.
• Scene.drillPick : Returns a list of objects containing all primitives at the given window position.
• Globe.pick : Returns the intersection point of a given ray with the terrain.

Here are some examples of picking operations:

• Picking Demo
• 3D Tiles Feature Picking Demo

Since we want to trigger our highlight effect on hover, we first need to create a mouse action handler. For this, we’ll use ScreenSpaceEventHandler, a set of handlers that trigger specified functions on user input actions. ScreenSpaceEventHandler.setInputAction() listens for a user action type ScreenSpaceEventType and runs a specific function, passing the user action as a parameter. Here, we’ll pass a function that takes movement as input:

1
2

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Next, let’s write our highlight function. The handler will pass in mouse movement, from which we can extract a window position to use with pick(). If the pick returns a billboard object, we know we’re hovering over a marker. Then, using what we know about Entity styling, we can apply a highlight style.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

This successfully triggers the highlight style change on the markers. However, you’ll notice that when we move the cursor away, the markers remain highlighted. We can fix this by tracking the last marker and restoring its original style.

Here is the complete function with marker highlighting and unhighlighting working:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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

That’s it! We’ve now successfully added a mouse movement handler and hover behavior for marker entities.

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/164.html | China fast access: http://cesium.coinidea.com/topic/164.html