How do I import kml data into my cesium project?

[red0514]

When I followed this demo which import KML file.
But, it was not working on my Cesium page.

Here is the demo.kml file.
demo.kml (336.5 KB)

There are my initially setting.

      window['Cesium'] = Cesium
      Cesium.Ion.defaultAccessToken = 'my token';
      let terrainModels = Cesium.createWorldTerrain();
      const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: terrainModels,
      })

      viewer.infoBox.frame.removeAttribute("sandbox")
      viewer.infoBox.frame.src = "about:blank"
      viewer.scene.globe.depthTestAgainstTerrain = true

      // this.hideTimer(viewer)
      this.cameraFlyTo(viewer.scene, this.originalPosition)
      
      viewer.dataSources.add(Cesium.KmlDataSource.load('./demo.kml'),
        {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas
        }
      )

I expect to show this.

But, there are no showing and any error message in my console.

Does anyone can solve my problem? Thank you!

[chan]

I’m not sure about the settings for the height.

I import kml file with this code.

const options = {
    clampToGround: true,
};

viewer.dataSources.add(
    Cesium.KmlDataSource.load('./demo.kml',options);
  viewer._cesiumWidget._creditContainer.style.display = "none";
  viewer.scene.globe.show = true;
  viewer.scene.debugShowFramesPerSecond = true;

[red0514]

Hi, @chan . Thanks for your reply. I try your solution, but it’s not working. It only shown MS and FPS on my scene.

[chan]

I’m not sure why it works.

Give it a try.

var viewer = new Cesium.Viewer("cesiumContainer", {
  //imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
  //    url: ''
  //})
  terrainProvider: Cesium.createWorldTerrain(),
  shouldAnimate: true,
  selectionIndicator: true,
  baseLayerPicker: true,
  sceneModePicker: true,
  navigationHelpButton: true,
});
var options = {
  clampToGround:true
};
viewer.scene.globe.depthTestAgainstTerrain = false;
viewer.scene.faxx = true;
viewer.scene.postProcessStages.fxaa.enabled = true;

[red0514]

It still not working.
I think the problem is that I used Vue framework in my project.
That’s not support KmlDataSource to load KML files.

Here is my error message…

[chan]

Is the demo.kml file in the same location as the one you wrote? My guess is that it can’t find the kml file in that location.

[red0514]

Thanks bro, I solved this problem.