Finally, let's add some mouse interaction. In order to improve the visibility of our geocache tags, when users hovers on tags, we can change their styles to highlight them.

To achieve this, we will use pick-up, a Cesium feature, to return data from 3D scenes and give pixel positions on the viewer's canvas.

Here are several different picking s:

• Scene.pick Returns an object containing primitives at a given window location.
• Scene.drillPick Returns a list of objects containing all primitives for a given window location.
• Globe.pick Returns the intersection of a given light and terrain.

Here are some examples of picking operations:

• Picking Demo
• 3D Tiles Feature Picking Demo

Because we want to trigger our highlights in hover, first we need to create a mouse action processor. To do this, we will use ScreenSpace EventHandler to trigger a set of handlers for the specified function in user input operations. ScreenSpace EventHandler. setInputAction () listens for the user behavior type ScreenSpace EventType and runs a specific function to pass the user action as a parameter. Here, we will pass a function with movement as input:

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

Next let's write about our highlights. The handler will be passed in the mouse motion, from which we can extract a window position and use it with pick(). If the pickup returns to the billboard object, we know that we hovering on a tag. Then, using the Entity style we know, we can apply the highlight style.

// 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 triggered the highlight style change of the tag. However, you will notice that when we move the cursor, the marker remains prominent. We can fix it by tracking the last tag and restore the original style.

Here is the complete function to mark highlighting and cancel highlighting:

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

This is it! Now we have successfully added the mouse movement handler and the marker entity's hover behavior.

Cesium Chinese Communication QQ Group: 807482793

This article is based on admin Creation, adoption Knowledge Sharing Signature 3.0 Mainland China Licensing Agreement License.
It can be reproduced and quoted freely, but the author should be signed and the source of the article should be indicated.