I am currently working on the development of a tool to take outputs from Orekit (https://www.orekit.org) to translate them into a CZML File then display the file with Cesium.
So I followed this great tutorial that helped me display in a first time an html page like this :
I want to draw your attention on the following file : index.js :
import {
Ion,
Viewer,
Terrain,
createOsmBuildingsAsync,
Cartesian3,
Math,
Cesium3DTilesInspector,
CzmlDataSource,
DataSource,
} from "cesium";
import "cesium/Widgets/widgets.css";
import "../src/css/main.css";
// Your access token can be found at: https://cesium.com/ion/tokens.
Ion.defaultAccessToken = "My token";
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer("cesiumContainer");
const ISSModel = await Cesium.IonResource.fromAssetId(2612223);
const czmlDataSource = Cesium.CzmlDataSource.load("C:/Users/jleblond/Documents/git/Webpack/CesiumTest/Output.czml");
viewer.dataSources.add(czmlDataSource);
My problems are :
It seems that even if I load the czml file it did not display on my page at the end
I tried to load in the same time a 3D model of the ISS that I got from this page and uploaded it on my assets on Cesium Ion but it did not display likethe rest is supposed to
It seems that even if I load the czml file it did not display on my page at the end
I think this is an error with the path you’re providing to load from and possibly not setting up Webpack to serve static files. By default webpack hosts files from a public directory at the project root. Create this directory and put your czml file in there then reference the path relative to that public directory. I think it should look something like this:
Yes the tutorial really helped a lot to understand all the basics, it was really good to start fresh.
So I added the CZML file in a directory named “public” at the project root and I added the line to load with the relative path and it seems like it didn’t change anything .
and possibly not setting up Webpack to serve static files.
Starting from the cesium-webpack-example I was able to load a czml file by creating a webpack-5/public directory and including the file in there. Then in the webpack-5/src/index.js loading it with the CzmlDataSource
You can read more about how webpack handles public assets here or static assets in the bundle here
import { Viewer, Terrain, CzmlDataSource } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "./css/main.css";
// CesiumJS has a default access token built in but it's not meant for active use.
// please set your own access token can be found at: https://cesium.com/ion/tokens.
// Ion.defaultAccessToken = "YOUR TOKEN HERE";
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer("cesiumContainer", {
terrain: Terrain.fromWorldTerrain(),
});
const czmlDataSource = CzmlDataSource.load("./simple.czml");
viewer.dataSources.add(czmlDataSource);