master

分支 (1)

管理

管理

master

cesium-study
/
47.各种Entity加载大杂烩.html

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

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Hello World!</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        @import url(Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>

        //创建一个基本地球
        let viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: 'http://t0.tianditu.gov.cn/img\_w/wmts?tk=0702d09e30dca11ed07ba4cec6d6bdac',
                layer: 'img',
                style: 'default',
                tileMatrixSetID: 'w',
                format: 'tiles',
                maximumLevel: 18
            }),
            animation: false, //动画控制，默认true （图中1）
            //baseLayerPicker: false,//地图切换控件(底图以及地形图)是否显示,默认显示true  （图中6）
            fullscreenButton: true,//全屏按钮,默认显示true  （图中4）
            geocoder: false,//地名查找,默认true  （图中9）
            // timeline: false,//时间线,默认true  （图中3）
            vrButton: false,//双屏模式,默认不显示false
            homeButton: true,//主页按钮，默认true  （图中8）
            infoBox: false,//点击要素之后显示的信息,默认true
            selectionIndicator: true,//选中元素显示,默认true
            shadows: true,
        });
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印

        viewer.scene.debugShowFramesPerSecond = true;//开启帧数
        //viewer.scene.globe.enableLighting = true;


        var shadowMap = viewer.shadowMap;
        shadowMap.softShadows = true;
        shadowMap.maximumDistance = 300.0;


        //添加数据

        //添加文字
        viewer.entities.add({
            name: '文字',
            position: Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571),
            label: {
                text: '看这里',
                font: '19px Helvetica',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                fillColor: Cesium.Color.AZURE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 3,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
            }
        });

        //box
        viewer.entities.add({
            name: 'Blue box',
            position: Cesium.Cartesian3.fromDegrees(121.0, 40.0, 0),
            box: {
                dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                material: Cesium.Color.BLUE
            }
        });
        //Circle
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(111.0, 40.0, 150000.0),
            name: 'Green circle at height',
            ellipse: {
                semiMinorAxis: 300000.0,
                semiMajorAxis: 300000.0,
                height: 200000.0,
                material: Cesium.Color.GREEN
            }
        });
        //Ellipse
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
            name: 'Red ellipse on surface with outline',
            ellipse: {
                semiMinorAxis: 250000.0,
                semiMajorAxis: 400000.0,
                material: Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.RED
            }
        });
        //Corridor
        viewer.entities.add({
            name: 'Red corridor on surface with rounded corners and outline',
            corridor: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    100.0, 40.0,
                    105.0, 40.0,
                    105.0, 35.0
                ]),
                width: 200000.0,
                material: Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.RED
            }
        });
        //Cylinder
        viewer.entities.add({
            name: 'Green cylinder with black outline',
            position: Cesium.Cartesian3.fromDegrees(100.0, 40.0, 200000.0),
            cylinder: {
                length: 400000.0,
                topRadius: 200000.0,
                bottomRadius: 200000.0,
                material: Cesium.Color.GREEN.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.DARK_GREEN
            }
        });
        //Cone
        viewer.entities.add({
            name: 'Red cone',
            position: Cesium.Cartesian3.fromDegrees(105.0, 40.0, 200000.0),
            cylinder: {
                length: 400000.0,
                topRadius: 0.0,
                bottomRadius: 200000.0,
                material: Cesium.Color.RED
            }
        });
        //Polygon
        viewer.entities.add({
            name: 'Red polygon on surface',
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray([115.0, 37.0,
                    115.0, 32.0,
                    107.0, 33.0,
                    102.0, 31.0,
                    102.0, 35.0]),
                material: Cesium.Color.RED
            }
        });
        //polyline
        viewer.entities.add({
            name: 'Red line on the surface',
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([75, 35,
                    125, 35]),
                width: 5,
                material: Cesium.Color.RED
            }
        });
        //polylineVolume
        function computeCircle(radius) {
            var positions = [];
            for (var i = 0; i < 360; i++) {
                var radians = Cesium.Math.toRadians(i);
                positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
            }
            return positions;
        }
        viewer.entities.add({
            name: 'Red tube with rounded corners',
            polylineVolume: {
                positions: Cesium.Cartesian3.fromDegreesArray([85.0, 32.0,
                    85.0, 36.0,
                    89.0, 36.0]),
                shape: computeCircle(60000.0),
                material: Cesium.Color.RED
            }
        });
        //rectangle
        viewer.entities.add({
            name: 'Red translucent rectangle with outline',
            rectangle: {
                coordinates: Cesium.Rectangle.fromDegrees(80.0, 20.0, 110.0, 25.0),
                material: Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.RED
            }
        });
        //Sphere
        viewer.entities.add({
            name: 'Red sphere with black outline',
            position: Cesium.Cartesian3.fromDegrees(107.0, 40.0, 300000.0),
            ellipsoid: {
                radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
                material: Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.BLACK
            }
        });
        //ellipsoid
        viewer.entities.add({
            name: 'Blue ellipsoid',
            position: Cesium.Cartesian3.fromDegrees(114.0, 40.0, 300000.0),
            ellipsoid: {
                radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
                material: Cesium.Color.BLUE
            }
        });
        //wall
        viewer.entities.add({
            name: 'Green wall from surface with outline',
            wall: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([107.0, 43.0, 100000.0,
                    97.0, 43.0, 100000.0,
                    97.0, 40.0, 100000.0,
                    107.0, 40.0, 100000.0,
                    107.0, 43.0, 100000.0]),
                material: Cesium.Color.GREEN
            }
        });


        alert("为啥无法加载glTF");
        //加载实体glTF
        var entity = viewer.entities.add({
            name: 'hg',
            position: Cesium.Cartesian3.fromDegrees(116.080591, 39.919141, 100),
            model: {
                url: '测试辅助文件/glTF/化工装置超大/all.gltf',
                scale: 200.0,
            }
        });

        viewer.zoomTo([116.080591, 39.919141, 100]);
    </script>
</body>

</html>