tz-onest-data/data-ui/public/SuperMap3D/examples/webgl/js/initGlobe.js

function initGlobe(container) {
    const {Scene, Globe, Cartesian3, Ellipsoid,SingleTileImageryProvider} = SuperMap3D;

    container = document.getElementById(container);
    var element = document.createElement('div');
    element.className = 'widget';
    container.appendChild(element);
    var canvas = document.createElement('canvas');
    canvas.oncontextmenu = function () {
        return false;
    };
    canvas.onselectstart = function () {
        return false;
    };
    element.appendChild(canvas);

    scene = new Scene({
        canvas: canvas
    });

    scene.pixelRatio = 1;
    scene.camera.constrainedAxis = Cartesian3.UNIT_Z;
    configureCameraFrustum();

    scene.globe = new Globe(Ellipsoid.WGS84);
    scene.sun = new SuperMap3D.Sun();
    scene.skyAtmosphere = new SuperMap3D.SkyAtmosphere();

    var curCanvasClientWidth = 0;
    var curCanvasClientHeight = 0;
    var lastDevicePixelRatio = 0;


    function configurePixelRatio() {
        var pixelRatio = window.devicePixelRatio;
        scene.pixelRatio = pixelRatio;
        return pixelRatio;
    }

    function computeWidthHeight(width, height, maxWidth, maxHeight) {
        var realCanvasWidth = width;
        var realCanvasHeight = height;
        if (realCanvasWidth > maxWidth || realCanvasHeight > maxHeight) {
            var scaleWidth = realCanvasWidth / maxWidth;
            var scaleHeight = realCanvasHeight / maxHeight;

            if (scaleWidth > scaleHeight) {
                realCanvasWidth = maxWidth;
                realCanvasHeight = (height / width) * maxWidth;
            } else {
                realCanvasWidth = (width / height) * maxHeight;
                realCanvasHeight = maxHeight;
            }
        }

        return {
            width: realCanvasWidth,
            height: realCanvasHeight
        };
    }

    function configureCanvasSize() {
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;
        var pixelRatio = configurePixelRatio();
        curCanvasClientWidth = width;
        curCanvasClientHeight = height;
        width *= pixelRatio;
        height *= pixelRatio;
        var maxDrawingBufferWidth = 3840;
        var maxDrawingBufferHeight = 1080;
        var newWidthHeight = computeWidthHeight(width, height, maxDrawingBufferWidth, maxDrawingBufferHeight);
        canvas.width = newWidthHeight.width;
        canvas.height = newWidthHeight.height;
        lastDevicePixelRatio = window.devicePixelRatio;
    }

    function configureCameraFrustum() {
        var width = canvas.width;
        var height = canvas.height;
        if (width !== 0 && height !== 0) {
            var frustum = scene.camera.frustum;
            if (frustum.aspectRatio) {
                frustum.aspectRatio = width / height;
            } else {
                frustum.top = frustum.right * (height / width);
                frustum.bottom = -frustum.top;
            }
        }
    }

    function resize() {
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;
        if (curCanvasClientWidth === width && curCanvasClientHeight === height && lastDevicePixelRatio === window.devicePixelRatio) {
            return;
        }

        configureCanvasSize();
        configureCameraFrustum();
    }

    function render() {
        resize();
        scene.initializeFrame();
        scene.render();
        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);

    // scene.imageryLayers.addImageryProvider(new SingleTileImageryProvider({
    //     url: '.././images/GlobalBkLayer.jpg'
    // }));
}