Access Cesium.viewer in Qt5 QML

1. A concise explanation of the problem you're experiencing.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you're using, your operating system and browser.

I'm trying to incorporate Cesium into a program I'm developing with Qt Creator. I can display the Cesium viewer in a Qt WebEngineView by simply pointing to the "Hello World" html file or the "Apps/CesiumViewer" (like so):

WebEngineView {
        id: webView
        anchors.fill: parent
        url: "http://localhost:8080/Apps/CesiumViewer"
        url: "http://localhost:8080/Apps/HelloWorld.html"

However, that doesn't provide me with the functionality I need. I have a dialog box that allows data (latitude, longitude, altitude) to be entered, and I want to display that on the Cesium viewer. So, I want to get access to the Cesium viewer object directly, but I haven't been able to figure out how to do that. Ideally, I'd like to be able to import Cesium viewer into main.qml, then simply pass the lat/lon/alt data to the viewer to map it -- something like, lon, alt). If I try to import the Viewer.js file directly, for example, I get errors, like this :

qrc:/Cesium-1.40/Source/Widgets/Viewer/Viewer.js:1: ReferenceError: define is not defined

which is referring to the first line of code in Viewer.js:


I've also tried importing other files directly, but have gotten other errors.
Does anyone have any suggestions? It seems like it should be pretty easy to do this, but I haven't had much luck finding examples of other people who have done the same thing. I have seen posts where people talk about integrating Cesium into Qt, but no code examples.



Hi Andrew,

I don’t have experience with Qt, so any input from other members of the community would be greatly appreciated!

You will probably have more luck using the pre-built Cesium files rather than the individual modules. In that case you would import the Cesium.js file and make sure the Asset, Widget, and Worker directories are co-located. You would then use each module as a member of the Cesium object, like Cesium.Viewer in this case.