How to use Cesium to call kml using my own website

CesiumJS
1

I am new developer, I would like to use Cesium to call kml using my own html

2

Have you already seen our getting started tutorial here? https://cesium.com/docs/tutorials/getting-started/

This will walk you through how to set up a CesiumJS app on your own web-page. This example shows you how to load KML from a URL: https://sandcastle.cesium.com/index.html?src=KML.html

That URL can be coming from Cesium ion or from your own server.

3

I did look at tutorial and I modified to call my kml, but they show the earth, but did not show

4

Can you check your browser console to see if there are any console errors? And can you share the code you’re using to load your KML?

6

i try to cut and paste on reply but I dont know how do not show

7

You can paste code in here by using three backtics:

your code here

Which should look like this:

image
image2491×416 38.2 KB

How are you hosting your KML file? You must be able to download the KML file by visiting that URL in your browser. If that is successful, you can pass that URL to your CesiumJS app.

8 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
   <script src="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 1400px; height:1000px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxM2Y5N2Y4MC04ZDNiLTRjZDYtOWU1YS0xOGJmZGJiNmM0MjUiLCJpZCI6Mjc2NjksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODk4OTcyOTJ9.nvQKut6c52mGAzQPKPq_Jm8vI2tQmcchkR8P6WxJchA';

var viewer = new Cesium.Viewer("cesiumContainer");
var options = {
  camera: viewer.scene.camera,
  canvas: viewer.scene.canvas,
};

Sandcastle.addToolbarMenu(
  [
    {
      text: "KML - Global Science Facilities",
      onselect: function () {
        viewer.camera.flyHome(0);
        viewer.dataSources.add(
          Cesium.KmlDataSource.load(
            "kml/Hanoi_Box.kmz",
            options
          )
        );
      },
    },
  ],
  "toolbar"
);

Sandcastle.reset = function () {
  viewer.dataSources.removeAll();
  viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
  viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
};


  </script>
</body>
</html>
9

Does typing https://www.<YourWebsite>.com/kml/Hanoi_Box.kmz download the KMZ file correctly?

10

Here the error I got
Content Security Policy: The page’s settings blocked the loading of a resource at https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Cesium.js (“default-src”).

Content Security Policy: The page’s settings blocked the loading of a resource at https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css (“default-src”).

​

11

Looks like your website does not allow loading scripts from external sources, according to https://stackoverflow.com/questions/37298608/content-security-policy-the-pages-settings-blocked-the-loading-of-a-resource. You’ll either need to remove this restriction or host the CesiumJS library files on your own website as well.

12

I just point to Cesium-1.69 and I still got errors as below
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“default-src”). 2 Cesium.js:1:582553

Content Security Policy: The page’s settings blocked the loading of a resource at eval (“default-src”). Cesium.js:1:3079667

13

This error may not be specific to CesiumJS. Are you able to load any other JavaScript libraries on this page?