cesiumJS opening error

CesiumJS
1

Hi ,

Sometimes I get an error when opening the first page in the application I developed.

image
image1615×678 145 KB

Code,

import * as Cesium from "cesium";
import {UrlManager} from "../Url_hash_manager";
import {Cartesian3, HeadingPitchRange} from "cesium";
import {Math as CesiumMath} from "cesium";

export class CesiumContainer {
    constructor(long,lat,zoom, bearing = 0, pitch=0) {
        this.url_manager = new UrlManager();
        Cesium.Ion.defaultAccessToken = ''
        this.viewer = new Cesium.Viewer('cesium', {
            timeline: false,
            baseLayerPicker: false,
            animation: false,
            sceneModePicker: false,
            geocoder: false,
            infoBox: false,
            fullscreenButton: false,
            navigationHelpButton: false,
            shadow: false,
            selectionIndicator: false,
            homeButton: false,
        });
        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
        this.cesiumMath =  CesiumMath;
        this.lookTarget = Cartesian3.fromDegrees(long, lat);
        this.cameraPitch = this.cesiumMath.toRadians(pitch - 90 + 0.01);
        this.heading = this.cesiumMath.toRadians(bearing);
        this.cameraElevation = this.getElevationByZoom(zoom)
        this.range = this.cameraElevation / this.mathResult(pitch)
        let _self= this

        this.bearing = bearing;
        if(this.bearing <0){
            this.bearing = bearing + 360;
        }

        this.viewer.camera.lookAt(
            this.lookTarget,
            new HeadingPitchRange(this.heading, this.cameraPitch, this.range * this.mathResult(pitch))
        )


        this.viewer.camera.moveEnd.addEventListener(()=> {
            let elevation = this.viewer.camera.positionCartographic.height;
            let bearing = (this.viewer.camera.heading / Math.PI) * 180
            let pitch = (this.viewer.camera.pitch / Math.PI) * 180
            let windowsPosition = new Cesium.Cartesian2(this.viewer.container.clientWidth / 2, this.viewer.container.clientHeight / 2);
            let pickRay = this.viewer.scene.camera.getPickRay(windowsPosition);
            let pickPosition = this.viewer.scene.globe.pick(pickRay, this.viewer.scene)
            let pickPositionCartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(pickPosition)
            let lng = pickPositionCartographic.longitude * (180 / Math.PI)
            let lat = pickPositionCartographic.latitude * (180 / Math.PI)
            let zoom = this.getZoomByElevation( elevation)

        })

        this.handler.setInputAction(() => {
            this.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
    }

    getZoomByElevation(elevation){
        return Math.log2((2 * Math.PI * 6378137.0) / (2 * elevation * Math.tan(0.6435011087932844 / 2)));
    }


}
2

Hi there,

Probably unrelated, but I would recommend against using two import styles for "cesium":

-import * as Cesium from "cesium";
import {UrlManager} from "../Url_hash_manager";
-import {Cartesian3, HeadingPitchRange} from "cesium";
+import {Cartesian2, Cartesian3, HeadingPitchRange, Ion, ScreenSpaceEventHandler, Viewer} from "cesium";

Secondly, are you familiar with your browsers developer tools? Using this, you should be able to go further into the stack trace to see what the issue may be, or to put break points into your application code to see where the error may originate.

Lastly, the Cesium API documentation will describe which parameters are required for each Cesium class and function if you are unsure about any.