Search code examples
javascripthtmljsondictionarycesiumjs

Cesium live update of a point?

I am currently working on a live tracking application for Cesium, but am having some issues when I display the point in the browser.

So far my Cesium viewer receives the data from the server (in JSON format) and displays the point properly on the map, but the only way to have it update the location on the map is to refresh the page. Note that the location.json file it is reading the location from is being updated with a new location every second or so from the server.

Now I figured it would do this, as the client side code has no "update" function to dynamically change the point location on the map.

So what is the easiest way to have Cesium constantly update the point on the map, without the user constantly refreshing the page? Based on my research I have found some examples that involve streaming of CZML files or making my JSON into a data source, but these seem a bit complex for what seems to be a simple task. Is there not a simple "update" function that will change the point dynamically?

Here is my client side code:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>

  <script>
      var viewer = new Cesium.Viewer('cesiumContainer');

      Cesium.loadJson('/location.json').then(function(data) {
          console.log(data);
          viewer.entities.add({
              name : data.name,
              position : Cesium.Cartesian3.fromDegrees(data.lon, data.lat),
              point : {
                  pixelSize : 5,
                  color : Cesium.Color.RED,
                  outlineColor : Cesium.Color.WHITE,
                  outlineWidth : 2
              },
              label : {
                  text : data.name,
                  font : '14pt monospace',
                  style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                  outlineWidth : 2,
                  verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                  pixelOffset : new Cesium.Cartesian2(0, -9)
              }
          });

          viewer.zoomTo(viewer.entities);
      });
</script>
</body>
</html>

If you need any more information from me, I will be happy to provide it.

Thanks!

Solution

  • You will need to keep a reference to each of this points and then simply update that elements position according to some unique id. If a name is unique then you can use that, otherwise you need to implement some way to identify each point after update. You can check if the point is a new one or existing one in a loadJSON callback function by calling var currentPoint = viewer.entities.getById(data.id). Then you can choose which one of these function will you call. First one for new points (when currentpoint == undefined):

    function addNewPoint(
var point = new Cesium.Entity(
{
              id : data.id,
              name : data.name,
              position : Cesium.Cartesian3.fromDegrees(data.lon, data.lat),
              point : {
                  pixelSize : 5,
                  color : Cesium.Color.RED,
                  outlineColor : Cesium.Color.WHITE,
                  outlineWidth : 2
              },
              label : {
                  text : data.name,
                  font : '14pt monospace',
                  style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                  outlineWidth : 2,
                  verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                  pixelOffset : new Cesium.Cartesian2(0, -9)
              }
          }
          );

          viewer.entities.add(point);
);

    Otherwise you call updatePoint function that will just update position

    function updatePosition(currentPoint, data)
{
  var newPos = new Cesium.Cartesian3.fromDegrees(data.lon, data.lat);
  currentPoint.position = newPos;
}