TitleText from cesium-infobox

CesiumJS
1

I add a marker to the 3D Cesium view:

addMarker = function(lon, lat, alt, color, zIndex) {
var markerAddress = “…/Pictures/Marker.png”;
var marker = new Image();
marker.src = markerAddress;
var entity = myMap.entities.add({
id: ‘marker_’+(markerId++),
position: Cesium.Cartesian3.fromDegrees(lon, lat, alt),
billboard: {
image: marker,
clampToGround: true, // may help to clamp if altitude not correct?
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
},
description: ‘myMarker’
});
markers.push(entity);
};

If I click on the marker then the cesium info box appears at the right top of the view. It contains the marker id: ‘marker_0’ and description: ‘myMarker’.

I tried to pick up the marker id from the mouse click on the marker as follows:
var box = new Cesium.InfoBoxViewModel();
var id = box.id;
var txt = box.titleText;
var descr = box.description;

However, box.id, box.titleText and box.description are empty strings.
Is there a way to rxtract these data from the InfoBoxViewModel()?

3

Hey @Rob_Udo, thanks for the question.

You shouldn’t have to create an InfoBox, that’s just the viewer widget to display the info for the selected entity.

To get that information yourself you’ll have to set up a click handler and pick from the scene. You can see an example in this sandcastle. This is a subset of the full picking example sandcastle which you can look at for more examples of using this feature.

handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
  const pickedObject = scene.pick(movement.position);
  if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
    const pickedEntity = pickedObject.id;
    console.log(pickedEntity.id, pickedEntity.description, pickedObject);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
4

Thank you, it was rather hidden for a simple user :O)

5

Yet another question about the 3D scene: is there a possibility to get an event when the mouse hoovers over an object? And if so, can you then extract the object id and/or description?

From your 1st answer:
the object id was extracted by:
pickedObject.id._id
and its description by:
pickedObject.id._description._value

Thank you in advance

6

Glad I could help!

I recommend taking a look at the full picking sandcastle here it shows examples of interacting with entities when hovering them. Once you have it you can do anything you want with the entity. You can set up the same screenspacehandler functions to react to Cesium.ScreenSpaceEventType.MOUSE_MOVE instead. Check out the full documentation for that here. Just note the object passed to the handler is slightly different for motion events (like hover) than position events (like click)

7

Hi,

I followed the SandCastle examples and now it’s working.

Thanks for your tips!

Greetings, Rob Udo

Verzonden door Blue
Op 20 mei 2024, om 19:32, Josh via Cesium Community <notifications@cesium.discoursemail.com> schreef: