Does KmlDataSource support GroundOverlay?

CesiumJS
1

I have a sandcastle.

The javascript is:

const kmzB64Data = '<the base64 KMZ data can be found in the sandcastle>'
const kmzData = atob(kmzB64Data)
 
const osm = new Cesium.OpenStreetMapImageryProvider({
  url : 'https://a.tile.openstreetmap.org/'
});

const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(osm),
  baseLayerPicker: false,
  geocoder: false,
  animation: false,
  timeline: false,
  infoBox: false,
  homeButton: true,
  fullscreenButton: false,
  sceneModePicker: false,
  selectionIndicator: false,
  navigationHelpButton: false,
  terrainProvider: null,
  creditContainer: document.createElement('none'),
});     

const options = {
  camera: viewer.scene.camera,
  canvas: viewer.scene.canvas,
  screenOverlayContainer: viewer.container,
}
  

viewer.dataSources.add(Cesium.KmlDataSource.load(new Blob([kmzData]), options))

The kml is:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Folder>
    <GroundOverlay>
      <Icon>
        <href>doc.png</href>
      </Icon>
      <LatLonBox>
        <north>38.8981864607094678</north>
        <south>38.8930250093003167</south>
        <east>-77.0357316005030555</east>
        <west>-77.0184365840575111</west>
        <rotation>0</rotation>
      </LatLonBox>
    </GroundOverlay>
  </Folder>
</kml>

When I open the KMZ in the macOS version of Google Earth, I see:
(image shows area in Washington DC near White House)

image
image708×538 70.2 KB

The sandcastle results in the error:

Error: Central directory header not found
    at ZipReader.getEntriesGenerator (zip-reader.js:154:11)
    at async ZipReader.getEntries (zip-reader.js:211:11)

If KmlDataSource does support GroundOverlay, how does my code need to change?

If KmlDataSource does not support GroundOverlay, what is an alternative?

I had a similar problem with OpenLayers and solved it by extracting the png image from the KMZ and using OpenLayers ImageStatic to place the png in the location specified by LatLonBox in the kml. The codepen showing this OpenLayers solution is https://codepen.io/ericg_off/pen/jOJaLgx

2

I took a peek at the Cesium source code and do see:

// Ensure Specs/Data/KML/unsupported.kml is kept up to date with these supported types
const featureTypes = {
  Document: processDocument,
  Folder: processFolder,
  Placemark: processPlacemark,
  NetworkLink: processNetworkLink,
  GroundOverlay: processGroundOverlay,
  PhotoOverlay: processUnsupportedFeature,
  ScreenOverlay: processScreenOverlay,
  Tour: processTour,
};

So, it does appear that my GroundOverlay in my KMZ should be displayed.

Why isn’t it? Does KmlDataSource expect a KMZ to be constructed a certain way?

3

This may be an issue with the zip library cesium uses. I have reported the issue to them replicating the error message with a simple test case. This can be found at Why doesn't this zip data work? · Issue #482 · gildas-lormeau/zip.js · GitHub

4

The issue with the Central Directory Header was resolved. I was not decoding the zip data correctly. However, my kmz data is still not showing up as expected.

I have an updated sandcastle.

Some OpenLayers code I have will display this as:

image
image1307×585 51.8 KB

However, the sandcastle code shows nothing in the same area:

image
image1185×773 148 KB

5

Figured out what was happening. Analyzing the kml file, I noticed the west and east coordinates were swapped. Fixing that caused everything to work.