3D圆柱体-源代码示例 运行 重置

                                                        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
    <script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>

<body>
    <div id="container"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
</body>
<script>

    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container');
    viewer.clock.shouldAnimate = true;
    var saturnPosition = bmgl.Cartesian3.fromDegrees(
        -95.0,
        45.0,
        300000.0
    );
    viewer.entities.add({
        name: "Saturn",
        position: saturnPosition,
        ellipsoid: {
            radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
            material: new bmgl.Color(0.95, 0.82, 0.49),
        },
    });

    viewer.entities.add({
        name: "Saturn's inner ring",
        position: saturnPosition,
        orientation: bmgl.Transforms.headingPitchRollQuaternion(
            saturnPosition,
            new bmgl.HeadingPitchRoll(
                bmgl.Math.toRadians(30.0),
                bmgl.Math.toRadians(30.0),
                0.0
            )
        ),
        ellipsoid: {
            radii: new bmgl.Cartesian3(400000.0, 400000.0, 400000.0),
            innerRadii: new bmgl.Cartesian3(300000.0, 300000.0, 300000.0),
            minimumCone: bmgl.Math.toRadians(89.8),
            maximumCone: bmgl.Math.toRadians(90.2),
            material: new bmgl.Color(0.95, 0.82, 0.49, 0.5),
        },
    });

    viewer.entities.add({
        name: "Saturn's outer ring",
        position: saturnPosition,
        orientation: bmgl.Transforms.headingPitchRollQuaternion(
            saturnPosition,
            new bmgl.HeadingPitchRoll(
                bmgl.Math.toRadians(30.0),
                bmgl.Math.toRadians(30.0),
                0.0
            )
        ),
        ellipsoid: {
            radii: new bmgl.Cartesian3(460000.0, 460000.0, 460000.0),
            innerRadii: new bmgl.Cartesian3(415000.0, 415000.0, 415000.0),
            minimumCone: bmgl.Math.toRadians(89.8),
            maximumCone: bmgl.Math.toRadians(90.2),
            material: new bmgl.Color(0.95, 0.82, 0.49, 0.5),
        },
    });

    viewer.entities.add({
        name: "Dome",
        position: bmgl.Cartesian3.fromDegrees(-120.0, 40.0),
        ellipsoid: {
            radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
            maximumCone: bmgl.Math.PI_OVER_TWO,
            material: bmgl.Color.BLUE.withAlpha(0.3),
            outline: true,
        },
    });

    viewer.entities.add({
        name: "Dome with inner radius",
        position: bmgl.Cartesian3.fromDegrees(-114.0, 40.0),
        ellipsoid: {
            radii: new bmgl.Cartesian3(250000.0, 200000.0, 150000.0),
            innerRadii: new bmgl.Cartesian3(100000.0, 80000.0, 60000.0),
            maximumCone: bmgl.Math.PI_OVER_TWO,
            material: bmgl.Color.RED.withAlpha(0.3),
            outline: true,
        },
    });

    viewer.entities.add({
        name: "Dome with top cut out",
        position: bmgl.Cartesian3.fromDegrees(-108.0, 40.0),
        ellipsoid: {
            radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
            innerRadii: new bmgl.Cartesian3(100000.0, 100000.0, 100000.0),
            minimumCone: bmgl.Math.toRadians(20.0),
            maximumCone: bmgl.Math.PI_OVER_TWO,
            material: bmgl.Color.YELLOW.withAlpha(0.3),
            outline: true,
        },
    });

    viewer.entities.add({
        name: "Top and bottom cut out",
        position: bmgl.Cartesian3.fromDegrees(-102.0, 40.0, 140000.0),
        ellipsoid: {
            radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
            innerRadii: new bmgl.Cartesian3(100000.0, 100000.0, 100000.0),
            minimumCone: bmgl.Math.toRadians(60.0),
            maximumCone: bmgl.Math.toRadians(140.0),
            material: bmgl.Color.DARKCYAN.withAlpha(0.3),
            outline: true,
        },
    });

    viewer.entities.add({
        name: "Bowl",
        position: bmgl.Cartesian3.fromDegrees(-96.0, 39.5, 200000.0),
        ellipsoid: {
            radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
            innerRadii: new bmgl.Cartesian3(180000.0, 180000.0, 180000.0),
            minimumCone: bmgl.Math.toRadians(110.0),
            material: bmgl.Color.GREEN.withAlpha(0.3),
            outline: true,
        },
    });

    viewer.entities.add({
        name: "Clock cutout",
        position: bmgl.Cartesian3.fromDegrees(-90.0, 39.0),
        ellipsoid: {
            radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
            innerRadii: new bmgl.Cartesian3(150000.0, 150000.0, 150000.0),
            minimumClock: bmgl.Math.toRadians(-90.0),
            maximumClock: bmgl.Math.toRadians(180.0),
            minimumCone: bmgl.Math.toRadians(20.0),
            maximumCone: bmgl.Math.toRadians(70.0),
            material: bmgl.Color.BLUE.withAlpha(0.3),
            outline: true,
        },
    });

    viewer.entities.add({
        name: "Partial dome",
        position: bmgl.Cartesian3.fromDegrees(-84.0, 38.5),
        ellipsoid: {
            radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
            minimumClock: bmgl.Math.toRadians(-90.0),
            maximumClock: bmgl.Math.toRadians(180.0),
            maximumCone: bmgl.Math.toRadians(90.0),
            material: bmgl.Color.RED.withAlpha(0.3),
            outline: true,
        },
    });

    viewer.entities.add({
        name: "Wedge",
        position: bmgl.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
        orientation: bmgl.Transforms.headingPitchRollQuaternion(
            bmgl.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
            new bmgl.HeadingPitchRoll(bmgl.Math.PI / 1.5, 0, 0.0)
        ),
        ellipsoid: {
            radii: new bmgl.Cartesian3(500000.0, 500000.0, 500000.0),
            innerRadii: new bmgl.Cartesian3(10000.0, 10000.0, 10000.0),
            minimumClock: bmgl.Math.toRadians(-15.0),
            maximumClock: bmgl.Math.toRadians(15.0),
            minimumCone: bmgl.Math.toRadians(75.0),
            maximumCone: bmgl.Math.toRadians(105.0),
            material: bmgl.Color.DARKCYAN.withAlpha(0.3),
            outline: true,
        },
    });
    viewer.entities.add({
        name: "Partial ellipsoid",
        position: bmgl.Cartesian3.fromDegrees(-95.0, 34.0),
        ellipsoid: {
            radii: new bmgl.Cartesian3(300000.0, 300000.0, 300000.0),
            innerRadii: new bmgl.Cartesian3(70000.0, 70000.0, 70000.0),
            minimumClock: bmgl.Math.toRadians(180.0),
            maximumClock: bmgl.Math.toRadians(400.0),
            maximumCone: bmgl.Math.toRadians(90.0),
            material: bmgl.Color.DARKCYAN.withAlpha(0.3),
            outline: true,
        },
    });

    viewer.zoomTo(viewer.entities);
</script>

</html>                                                        
源码