Registration of a mixin

CesiumJS
1

Is it possible to register a mixin when not importing Cesium, but as part of a webpack project the import is done in this way:

import {
  Viewer,
  createWorldTerrain,
  Ion,
  JulianDate,
  viewerCesium3DTilesInspectorMixin
} from 'cesium';

The Viewer must be extended (e.g. viewer.extend(viewerCesiumNavigationMixin, {});) with this function, but how does that work if Cesium cannot be imported directly and the mixin isn’t registered with Cesium. before?

2

Hi @mholthausen, it should be possible. Mixins are fundamentally functions which take the Viewer as a parameter and modify it or its memebers. I don’t think there are any inherent references to the Cesium global variable. Are you running into any specific issues?

3

Hi @Gabby_Getz thanks for getting back to this issue.
Yes, I am trying to integrate this mixin (viewerCesiumNavigationMixin) into my environment. Generally it works fine with the latest Cesium version, but due to the way the Cesium components are imported in my project, the registration of the mixin listed there in line 6 isn’t possible and the import specified in the example index.html does not work in this way then.

4

Interesting, can you give us anymore information about your webpack setup and any errors you may be seeing?

I just updated our recommended webpack configuration, and with that I was able to import and use viewerCesiumNavigationMixin with the following snippet:

import { Ion, Viewer, createWorldTerrain, createOsmBuildings, Cartesian3, Math, viewerCesium3DTilesInspectorMixin } from "cesium";

...

const viewer = new Viewer('cesiumContainer', {
  terrainProvider: createWorldTerrain()
});

viewer.extend(viewerCesium3DTilesInspectorMixin);

image
image1920×1256 256 KB

5

Thanks @Gabby_Getz for getting back to this. The viewerCesium3DTilesInspectorMixin seems to be a default integrated Cesium mixin. This works for me as well. But I wanted to register an external mixin (CesiumJsSamples/viewerCesiumNavigationMixin.min.js at master · 3DGISKing/CesiumJsSamples · GitHub) in my app. The webpack configuration seems to be similiar and I import Cesium components as you described above. But how would you extend the viewer for this external mixin?

1 Like
6

Hey @mholthausen Did you manage to import the navigationMixin? If you did, do you mind sharing how you solved the problem?
I have used the this mixin without webpack in my application and it works great, but I’m currently swichting over to build the application with webpack(which im new to) and I get the following error:

export 'viewerCesiumNavigationMixin' (imported as 'Cesium') was not found in 'cesium' (possible exports: AlphaMode, ...