Refresh Entity with Real-Time Data on Cesium

I have been attempting to showcase an entity moving within Cesium through the use of live/dynamic data. After trying various techniques and consulting past forums, particularly those from 2015-2016, I am still struggling to make it work.

Despite my efforts, nothing seems to be loading properly on the screen whenever I implement the methods suggested on stackoverflow and Cesium forums. It consistently displays a blank screen each time.

Cesium.Ion.defaultAccessToken = 'xxxx';

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});
    
const osmBuildings = viewer.scene.primitives.add(Cesium.createOsmBuildings());

const data = JSON.parse('C:/Users/moose/Documents/Cesium/telemetryGet.json');

var telemetry = Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.altitude);
var dronePositions = new Cesium.SampledPositionProperty();
dronePositions.addSample( Cesium.JulianDate.fromDate(new Date()), telemetry);
// Load the glTF model from Cesium ion.
const airplaneUri = await Cesium.IonResource.fromAssetId(1634734);
const DroneEntity = viewer.entities.add({
  position: dronePositions,
  // Attach the 3D model instead of the green point.
  model: { uri: airplaneUri },
  // Automatically compute the orientation from the position.
  orientation: new Cesium.VelocityOrientationProperty(telemetry),    
});

viewer.selectedEntity = DroneEntity;

  // setTimeout(loadModel, 1000);

viewer.zoomTo(viewer.entities);

var clock = viewer.clock;
var lastUpdated = clock.currentTime;
clock.onTick.addEventListener(function() {
    var dt = Cesium.JulianDate.secondsDifference(clock.currentTime, lastUpdated);
    if (dt >= 1.0) {
        // Add a new sample position
        lastUpdated = clock.currentTime;
    }
});

Answer №1

It appears that the issue lies within dronePositions.addSample method.
The first parameter of addSample, time, should fall within the time range set by your viewer's clock.

Below is the corrected code snippet.

Sandcastle

const {
    BoundingSphere,
    Cartesian3,
    ClockRange,
    JulianDate,
    SampledPositionProperty,
    VelocityOrientationProperty,
    Viewer
} = window.Cesium;

const viewer = new Viewer("cesiumContainer", {
    shouldAnimate: true
});

const startTime = JulianDate.fromDate(new Date(2019, 5, 10, 13));
const stopTime = JulianDate.addSeconds(startTime, 10, new JulianDate());

viewer.clock.startTime = startTime.clone();
viewer.clock.stopTime = stopTime.clone();
viewer.clock.shouldAnimate = true;
viewer.clock.clockRange = ClockRange.LOOP_STOP;

viewer.timeline.zoomTo(startTime, stopTime);

const latitude = 38;
const longitude = 127;
const altitude = 10;

const dronePositions = new SampledPositionProperty();

const startPoint = Cartesian3.fromDegrees(longitude, latitude, altitude);

dronePositions.addSample(startTime, startPoint);

const endPoint = Cartesian3.fromDegrees(longitude + 0.001, latitude, altitude);

dronePositions.addSample(stopTime, endPoint);

const airplaneUri = "../SampleData/models/CesiumDrone/CesiumDrone.glb";

const DroneEntity = viewer.entities.add({
    position: dronePositions,

    // Attach the 3D model instead of the green point.
    model: { uri: airplaneUri },
    // Automatically compute the orientation from the position.
    orientation: new VelocityOrientationProperty(dronePositions)
});

viewer.camera.flyToBoundingSphere(BoundingSphere.fromPoints([startPoint, endPoint]));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically fill in options for up to 3 dropdown menus depending on the choices made in the previous dropdown menu

I've looked through similar questions but haven't found the solution I need. Here's a sample fiddle with some example data for years, months, and days. Instead of manually adding select option divs for each year, I want the div id to dynami ...

Easiest method to incorporate dynamic content into a statically generated page using Node.js with Express

Running a static webpage from Node.JS using the Express webserver: app.use('/', express.static('public')); What is the most efficient way to add dynamic content, like a list of items retrieved from a database, to this page? One option ...

The scrolling event on the div is not triggering

I'm struggling with this piece of code: const listElm = document.querySelector('#infinite-list'); listElm.addEventListener('scroll', e => { if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) { th ...

No image upload possible until 'submit' button is clicked

I'm attempting to send an mp3 file to the server using AJAX without the need for a submit button, but I'm facing an issue where the file isn't getting uploaded. Can anyone help me pinpoint the mistake in my code? <script> $(document). ...

Transforming Jquery into vanilla JavaScript and sending a POST request

Hey everyone, I'm in the process of converting Jquery code to pure javascript and encountering some difficulties with the following snippet: $.post('ajax_data',{action:'service_price',service:service,quantity:quantity,dripfeed:drip ...

Interactive JavaScript Slider for Customizing Selection

Recently, I came across a range slider and I am trying to make it more dynamic. The current JavaScript code has hardcoded references to specific HTML elements, and I want to have multiple sliders on my HTML page, each functioning independently. The code sn ...

Is it possible to iterate through HTML elements without relying on forEach()?

Currently working on my web-based system using Node.js and HTML. Are there any alternative ways to iterate through HTML elements without using forEach? I'm considering something like this (for example): <% for(var ctr=0; ctr<arrayname.length ...

Attempting to create a slider utilizing jQuery

I'm currently working on creating a slider using jquery. I have downloaded the cycle plugin for the slider and included it in my file. The slider consists of 7 pictures. Below is the code I am using, can someone please help me identify any issues? &l ...

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

I currently have 3 input fields. The first input field contains the start time, the second input field contains the end time, and the third input field contains the duration between the start and end times in HH:mm format. My goal is to sum up all the dur ...

When utilizing array.push() with ng-repeat, it appears that separate scopes are not generated for each item

I'm currently working on an Angular View that includes the following code snippet: <div ng-repeat="item in items track by $index"> <input ng-model="item.name"/> </div> Within the controller, I utilize a service to retrieve a Js ...

What is the best way to bring up the keyboard on an iPhone when focusing an HTML text field?

Currently working on developing a web app for iPhone, and looking to implement a feature where a text field is automatically focused upon page load, prompting the keyboard to appear. Despite attempting the standard Javascript method: input.focus(); I see ...

There seems to be an issue with the functionality of chrome.storage.local.set()

Struggling with Chrome storage handling, I have reviewed the newest documentation for Chrome storage and implemented the following code snippet (found within an AJAX call success function, where info.userName is a value fetched from my backend program): ch ...

Exploring the intersection of JavaScript and PostgreSQL: Leveraging timezones and timestamps

I'm a bit confused about how to properly use timestamps. For example, when a user creates an article, they can choose a PublishDate, and the system also automatically stores a CreateDate. a. Should I make both PublishDate and CreateDate timestamps wi ...

Is there a way to access and parse a CSV file from a URL within a Next.js project?

Currently working on a Next.js application available here. The task at hand requires reading a CSV file from a specific URL within the same repository in multiple instances. Unfortunately, I am encountering difficulties retrieving this data. You can locate ...

Methods for applying responsive design to react modals in React.js

I am looking to make my modal responsive across different media types. In my React JS project, I have implemented custom styles using the following code: import Modal from 'react-modal'; const customStyles = { content : { top ...

I'm seeking guidance on how to delete a specific ul li element by its id after making an ajax request to delete a corresponding row in MySQL database. I'm unsure about the correct placement for the jQuery

I have created an app that displays a list of income items. Each item is contained within an li element with a unique id, along with the item description and a small trash icon. Currently, I have implemented code that triggers an AJAX call when the user cl ...

Is there a way to add another item to a repeated DOM element without having to modify the ng-repeat scope?

I am working with a list of items using ng-repeat <div layout="column" class="md-whiteframe-1dp" ng-repeat="item in child.items track by item._id" id={{item._id}}child> </div> I am looking to add an additional DOM ele ...

Preventing Repeated Clicks in AngularJS

Looking for a better approach to handle double clicks in AngularJS other than using ng-disabled. I have a solution to disable double/multi-click functionality on button click and re-enable it after completing an ajax process. Any suggestions? When our cod ...

What steps should I take to develop an Outlook add-in that displays read receipts for action items in sent emails?

Currently, I am in the process of developing an add-in that will enable me to track email activity using a tool called lead-boxer (). With this add-in, I am able to retrieve detailed information about users who have opened my emails by sending them with an ...

Is it conceivable to exploit JSON responses with appropriate JavaScript string escaping to launch an XSS attack?

Exploiting JSON responses can occur when Array constructors are overridden or when hostile values are not properly JavaScript string-escaped. To combat this, Google has implemented a technique where all JSON responses are prefixed with a specific code sni ...