Cesium Ion Viewer - development questions

[WayneTomlinson]

Hi

I need some addtional features in the Cesium Ion Viewer when I am creating stories.

The following are my requirements;

I need to add a point of interest/marker in the model, give it a number or ID using a picker.
I will need to add measurements next to the point of interest.
I will also need to save these measurements and points of interest on the model view.
I will also need to share the stories with the measurements and markers visible on the model.

What is the best way to achieve this ?

Can I add additional funtionality to the viewer provided in the story maker ?
Will I have to develop a custom app ?
If this the case could you please elaborate or provide examples of how to do the following;

Save measurements to the model
Access existing stories via the custom app so they can be annotated.

I need work on these solving these requirements before I can more to a commercial plan. I am happy to use the commercial SDK if I can get some examples of code and pricing.

Look forward to your response.

[dzung]

Hi Wayne,

Currently Stories does not support saving measurements to model. The easiest way to add points of interest is to add a separate data file with the points, like how we added pedestrian sensors with czml here.

Once you are finished with the story, you can share it as a link with the share button on the top right corner of the window.

The easiest way to “save” the measurements is to make the measurements, take a screenshot of the viewer, and add a new slide with the screenshot as the background image:

Thank you for the feedback and I will bring your suggestions to the team.

Best,
Dzung N

[sarah]

I was trying to do the same thing in a story earlier this week: I wanted to highlight specific points & measurements in a story to share with other users.

Thanks for the answer Dzung!

[WayneTomlinson]

Thanks Dzung

Can you also help me with this question?

When I click on a point in my 3d model in Cesium I see the coordinates of the yellow however the coordinates.

If these coordinates were precise enough I could use them in a Geojson file and load then in as a permanent billboard.

I did try but using them but coordinates offered on the screen were not detailed enough.

Is there anyway possible to get the coordinates to a greater degree of precision ? - Perhaps there is a script I could use in the sandcastle to pop up a message box with the precise coordinates. That would work well for all the problems I am facing.

Look forward to your reply.

Wayne

[dzung]

This example in Sandcastle uses a mouse movement action to get the latitude and longitude at the location of your mouse in the viewer.

Here is another example of retrieving the same data on mouse click.

[WayneTomlinson]

Hi Dzung

Thanks for your suggestion.

I have made some progress but not enough to be useful

I am now getting coordinates writing to the console log and using them to put into a Geojson file to create a billboard/marker.

The position of the marker is still not exactly where I click on the 3d model.

I think the exact coordinates are being given for the underlying terrain and not according to what I select my model.

I have attached the following so you can help diagnose what the problem is.

1. My Script I am using in the sandcastle. (Hello world - attached below)
2. My Geojson file I am loading into Cesium to produce the marker.(TestCoordinates1.geojson)

These are my issues;

1. The marker is not located exactly where I click to get the coordinates. I know by looking at the story slide that the height is incorrect. Can you help with that as I don’t know how to correct the height. Once the height is corrected I will be able to assess if the long and lat are exactly correct.

You can see from my screenshot that the maker is below the surface.

Thanks in advance.

(Attachment Hello World.html is missing)

TestCoordinates1.geojson (587 Bytes)

[WayneTomlinson]

Hi Dzung ( Resent with code below)

Thanks for your suggestion.

I have made some progress but not enough to be useful

I am now getting coordinates writing to the console log and using them to put into a Geojson file to create a billboard/marker.

The position of the marker is still not exactly where I click on the 3d model.

I think the exact coordinates are being given for the underlying terrain and not according to what I select my model.

I have attached the following so you can help diagnose what the problem is.

1. My Script I am using in the sandcastle. (Hello world - attached below)
2. My Geojson file I am loading into Cesium to produce the marker.(TestCoordinates1.geojson)

These are my issues;

1. The marker is not located exactly where I click to get the coordinates. I know by looking at the story slide that the height is incorrect. Can you help with that as I don’t know how to correct the height. Once the height is corrected I will be able to assess if the long and lat are exactly correct.

You can see from my screenshot that the maker is below the surface.

// Grant CesiumJS access to your ion assets
Cesium.Ion.defaultAccessToken = ";

var viewer = new Cesium.Viewer(“cesiumContainer”);

var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(158422),
})
);

tileset.readyPromise
.then(function () {
viewer.zoomTo(tileset);

// Apply the default style if it exists
var extras = tileset.asset.extras;
if (
Cesium.defined(extras) &&
Cesium.defined(extras.ion) &&
Cesium.defined(extras.ion.defaultStyle)
) {
tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
}
})
.otherwise(function (error) {
console.log(error);
});

viewer.canvas.addEventListener(‘click’, function(e){
var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);

var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(15);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(15);
var heightString = Cesium.Math.toDegrees(cartographic.height).toFixed(15);

console.log(longitudeString + ‘, ’ + latitudeString +’,’ + heightString);
} else {
console.log(‘Globe was not picked’);
}

}, false);

//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== ‘undefined’) {
window.startupCalled = true;
startup(Cesium);
}

Geojson

{
“type”: “FeatureCollection”,
“features”: [
{
“type”: “Feature”,
“id”: “f45a1e55-441b-eeb0-686f-a285c8a7f320”,
“properties”: {
“name”: “Marker 1”,
“description”: “”,
“created”: “2020-09-29T10:53:26.789Z”,
“modified”: “2020-09-29T10:53:26.789Z”,
“tags”: ,
“color”: [
1,
0.9019607843137255,
0,
1
]
},
“geometry”: {
“type”: “Point”,
“coordinates”: [

6.680826504143448, 46.551491763372738,0.000000053360853
]
}
} ]
}

Thanks and I look forward to your reply.

[dzung]

You can clamp the billboard to the terrain. Please refer to this post for more details.