Search code examples
xmlcesiumjs

Render gx:Track KML data with Cesium


I'm trying to render a KML file with gx:Track data that was recorded by a GPS device. I know that Cesium expects this type of data to be animated, but I'm trying to figure out how to just display the entire dataset. So far I have this:

viewer.dataSources.add(Cesium.KmlDataSource.load('../track.kml',
  {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
    clampToGround:true
  })
);

which properly loads the data, but only shows the start and finish entities, because I assume it's expecting me to animate the data, at which time it'll start drawing a line. How would I just instruct Cesium to show all data immediately?

Here is an example of what the data looks like:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">
<Document>
  <open>1</open>
  <visibility>1</visibility>
  <Style id="trackStyle">
    <LineStyle>
      <color>ffDB9034</color>
      <width>4</width>
    </LineStyle>
    <PolyStyle>
      <color>80DB9034</color>
    </PolyStyle>
  </Style>
  <Style id="pathStyle">
    <LineStyle>
      <color>f8000080</color>
      <width>8</width>
    </LineStyle>
  </Style>
  <Placemark>
    <name>KIWI-KHPN</name>
    <styleUrl>#trackStyle</styleUrl>
    <gx:Track>
      <altitudeMode>absolute</altitudeMode>
      <extrude>1</extrude>
      <gx:interpolate>1</gx:interpolate>
      <when>2018-07-01T22:43:58.790Z</when>
      <gx:coord>-69.71002757555777 43.96408896897357 34.341796874999964</gx:coord>
      <when>2018-07-01T22:43:59.744Z</when>
      <gx:coord>-69.71001986420686 43.96409190263968 10.939052581787099</gx:coord>
      <when>2018-07-01T22:44:00.745Z</when>
      <gx:coord>-69.70998742624158 43.96408662204068 11.535732269287097</gx:coord>
      <when>2018-07-01T22:44:02.748Z</when>

Solution

  • I'm not sure this is the best solution, but from posting in the Cesium forum, I got the suggestion to just set the clock forward. Instead of trying to figure out how far to set the clock forward for each file uploaded, I've just set it to a very high number, and so far there have been no issues.

    Here is the code:

    viewer.dataSources.add(Cesium.KmlDataSource.load('../flight.kml', options)).then(function(dataSource){
      viewer.clock.shouldAnimate = false;
      viewer.clock.currentTime.secondsOfDay = 9999999999999999999999;
    });
    

    I'm more than happy to give the points to someone who can give a better solution!