KML Loading return error but no information

CesiumJS
#1

Using angular-cesium and cesium. ( but this part concern cesium)

I am trying to load a KML model from the internet. I have a server that host the file, and using a request I get the file in draw it into Cesium.
I am doing the same procedure on GLTF and it works fine, but KML fail.

So I load the file and then pass the text result to this function :

loadKML(kml: any) {

console.log(kml)

const loader = Cesium.KmlDataSource.load(Cesium.KmlDataSource.load(kml));

const logId = this.mapLogService.add({log: 'MAP.LOADING.KML'});

Cesium.when(loader).then((lKML) => {

  this.ngZone.run(() => {

    console.log('LOADED')

    this.viewer.dataSources.add(lKML);

    this.mapLogService.remove(logId);

  });

}).otherwise((error) => {

  this.ngZone.run(() => {

    console.log('FAILED')

    console.log(error)

    this.mapLogService.remove(logId);

  });

});

}

The result in the logs is the following (attachkement) : https://prnt.sc/pu102o

But since the error are empty, I have no idea what is going wrong.

Any tips ?

Screenshot_19.png
Screenshot_19.png945×842 26.8 KB

#2

If you check the network tab, does the browser show that the KML text has been successfully retrieved?

Are you able to share a sample of this KML file that’s causing this issue? One easy way to test it is to drag and drop it into the Cesium viewer app:

https://cesium.com/downloads/cesiumjs/releases/1.63/Apps/CesiumViewer/index.html

Does that produce a similar error?

#3

Thanks for the reply, yes, it show the KML correctly in the browser response and I try to drag and drop it into the viewer and it does work.

The problem must be in my code then, I will investigate it thanks.

#4

I think the problem is the way I load my KML into cesium,

I already have loaded the KML from my external service, so I have access to the content of the file already in my code. (like if I console.log(myKml) I can see the kml content).
so I need a way to add this content directly to cesium, without asking cesium to reload it.

#5

If you’re passing in your KML content as a string, CesiumJS will interpret it as a URL and try to load it. I think you need to pass a parsed document, so it would look something like this:

var kmlContent = ‘…your kml as text…’;

var parser = new DOMParser();

var kmlDoc = parser.parseFromString(kmlContent, “text/xml”);

viewer.dataSources.add(Cesium.KmlDataSource.load(kmlDoc, options));

``

Here’s a Sandcastle I just put together showing this.

#6

Sorry, Sandcastle is too long to share because it embeds the whole KML. Here’s the code without the KML itself embedded:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var options = {

camera : viewer.scene.camera,

canvas : viewer.scene.canvas,

sourceUri: ‘https://sandcastle.cesium.com/SampleData/kml/facilities/’

};

var kmlContent = ‘’;

// Loading KML directly from already loaded content

var parser = new DOMParser();

var kmlDoc = parser.parseFromString(kmlContent, “text/xml”);

viewer.dataSources.add(Cesium.KmlDataSource.load(kmlDoc, options));

// Loading it in the usual way

//viewer.dataSources.add(Cesium.KmlDataSource.load(’…/…/SampleData/kml/facilities/facilities.kml’, options));

``

#7

Thanks you as always for your support.

I will try this tomorrow and keep this post updated.

#8

Thank you,

loadKML(kml: any) {

const parser = new DOMParser();

const kmlDoc = parser.parseFromString(kml, 'text/xml');

const loader = Cesium.KmlDataSource.load(kmlDoc);

Worked perfectly