cesium-1.52 billboards.html

最新推荐文章于 2022-08-11 16:24:07 发布
学无止境慢慢来
最新推荐文章于 2022-08-11 16:24:07 发布
阅读量731
点赞数
分类专栏： cesium_demo
cesium_demo 专栏收录该内容
41 篇文章 5 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Add billboard images and markers to the scene.">
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
    <title>Billboards</title>

    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
    require.config({
        baseUrl : '../../../Source',
        waitSeconds : 60
    });
    </script>
</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
    function startup(Cesium) {
        'use strict';
        //Sandcastle_Begin
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg';
        let viewer = new Cesium.Viewer('cesiumContainer');

        function addBillboard() {
            Sandcastle.declare(addBillboard);

            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                billboard :{
                    image : '../images/Cesium_Logo_overlay.png'
                }
            });
        }

        function setBillboardProperties() {
            Sandcastle.declare(setBillboardProperties);

            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                billboard : {
                    image : '../images/Cesium_Logo_overlay.png', // default: undefined
                    show : true, // default
                    // 像素偏移，屏幕空间原点在画布的左上角，x正方向，从左到右；y正方向从上到下，default: (0, 0)
                    pixelOffset : new Cesium.Cartesian2(0, -50),
                    // 眼睛偏移，的x指向右，y指向上，z指向屏幕里。此处并未更改。
                    eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0),
                    // 广告牌的水平原点，在广告牌的中间（默认）。
                    horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                    // 广告牌的垂直原点，在广告牌的底部（默认CENTER）。
                    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                    scale : 2.0, // 缩放，default: 1.0
                    color : Cesium.Color.LIME, // 颜色，default: WHITE
                    rotation : -Cesium.Math.PI_OVER_FOUR, // 旋转，单位弧度(此处是逆时针)，default: 0.0
                    // 对齐轴(未深入研究)。
                    alignedAxis : Cesium.Cartesian3.ZERO, // default：ZERO， UNIT_Z
                    // 广告牌的尺寸。
                    width : 100, // default: undefined
                    height : 25 // default: undefined
                }
            });
        }

        function changeBillboardProperties() {
            Sandcastle.declare(changeBillboardProperties);

            var entity = viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 300000.0),
                billboard : {
                    image : '../images/Cesium_Logo_overlay.png'
                }
            });

            var billboard = entity.billboard;
            billboard.scale = 3.0;  // 放大到原来的3倍。
            billboard.color = Cesium.Color.WHITE.withAlpha(0.25);
        }

        function sizeBillboardInMeters() {
            Sandcastle.declare(sizeBillboardInMeters);

            var entity = viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                billboard : {
                    image : '../images/Cesium_Logo_overlay.png',
                    // Gets or sets if the billboard size is in meters or pixels.
                    // true to size the billboard in meters;
                    // otherwise, the size is in pixels.
                    // Default Value:  false
                    sizeInMeters : true
                }
            });

            viewer.zoomTo(entity);
        }

        function addMultipleBillboards() {
            Sandcastle.declare(addMultipleBillboards);

            var logoUrl = '../images/Cesium_Logo_overlay.png';
            var facilityUrl = '../images/facility.gif';

            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                billboard : {
                    image : logoUrl
                }
            });
            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-80.50, 35.14),
                billboard : {
                    image : facilityUrl
                }
            });
            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
                billboard : {
                    image : facilityUrl
                }
            });
        }

        function scaleByDistance() {
            Sandcastle.declare(scaleByDistance);

            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                billboard : {
                    image : '../images/facility.gif',
                    scaleByDistance : new Cesium.NearFarScalar(1.5e2, 4.0, 1.5e7, 0.25)
                }
            });
        }

        function fadeByDistance() {
            Sandcastle.declare(fadeByDistance);

            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                billboard : {
                    image : '../images/Cesium_Logo_overlay.png',
                    translucencyByDistance : new Cesium.NearFarScalar(1.5e2, 1, 1.5e7, 0.1)
                }
            });
        }

        function offsetByDistance() {
            Sandcastle.declare(offsetByDistance);

            Cesium.when.all([
                 Cesium.Resource.fetchImage('../images/Cesium_Logo_overlay.png'),
                 Cesium.Resource.fetchImage('../images/facility.gif')
                ],
                function(images) {
                    // 当视图放大靠近facility广告牌时，
                    // 增加CesiumLogo广告牌的pixelOffset到这个高度的2倍。
                    var facilityHeight = images[1].height;

                    // 变形的广告牌, 当视图靠近时，分开。
                    // facility广告牌。
                    viewer.entities.add({
                        position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                        billboard : {
                            image : images[1],
                            horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                            verticalOrigin : Cesium.VerticalOrigin.BOTTOM
                        }
                    });
                    // CesiumLogo广告牌。
                    viewer.entities.add({
                        position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                        billboard : {
                            image : images[0],
                            horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                            // 像素偏移，此广告牌偏上。
                            pixelOffset : new Cesium.Cartesian2(0.0, -facilityHeight),
                            // 根据距离缩放pixelOffset
                            pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.0e3, 2.0, 1.5e6, 0.5),
                            // 根据距离的透明度。
                            translucencyByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.1)
                        }
                    });
                });
        }

        function addMarkerBillboards() {
            Sandcastle.declare(addMarkerBillboards);

            // 在Atlas中基于上述图像添加几个广告牌。
            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                billboard : {
                    image : '../images/whiteShapes.png',
                    // 使用image的一个子区域，作为此广告牌的图像，以左下角为原点，像素为单位。
                    // new Cesium.BoundingRectangle(x, y, width, height)
                    // 其中x,y为图像的左下角起始角点，width(为从x开始向右的距离), height(为从y开始向上的距离)。
                    imageSubRegion : new Cesium.BoundingRectangle(49, 43, 18, 18),
                    color : Cesium.Color.LIME
                }
            });
            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-84.0, 39.0),
                billboard : {
                    image : '../images/whiteShapes.png',
                    imageSubRegion : new Cesium.BoundingRectangle(61, 23, 18, 18),
                    color : new Cesium.Color(0, 0.5, 1.0, 1.0)
                }
            });
            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-70.0, 41.0),
                billboard : {
                    image : '../images/whiteShapes.png',
                    imageSubRegion : new Cesium.BoundingRectangle(67, 80, 14, 14),
                    color : new Cesium.Color(0.5, 0.9, 1.0, 1.0)
                }
            });
            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-73.0, 37.0),
                billboard : {
                    image : '../images/whiteShapes.png',
                    imageSubRegion : new Cesium.BoundingRectangle(27, 103, 22, 22),
                    color : Cesium.Color.RED
                }
            });
            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-79.0, 35.0),
                billboard : {
                    image : '../images/whiteShapes.png',
                    imageSubRegion : new Cesium.BoundingRectangle(105, 105, 18, 18),
                    color : Cesium.Color.YELLOW
                }
            });
        }

        let terrainProvider;
        function disableDepthTest() {
            Sandcastle.declare(disableDepthTest);

            terrainProvider = viewer.terrainProvider;
            viewer.terrainProvider = Cesium.createWorldTerrain();
            // depthTestAgainstTerrain : Boolean
            // true,原语(如广告牌、复线、标签等)应该根据地形表面进行深度测试，
            // false, 这类原语应该总是绘制在地形的顶部，除非它们位于地球的另一边。
            // 针对地形对原语进行深度测试的缺点是轻微的数值噪声或地形细节水平的切换有时会使表面上的原语消失在它下面。
            // Default Value:  false
            viewer.scene.globe.depthTestAgainstTerrain = true;

            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
                billboard : {
                    image : '../images/facility.gif',
                    // HeightReference()
                    // Represents the position relative to the terrain.
                    // Default Value:  HeightReference.NONE
                    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,  // 这个位置被固定在地形上。
                    // Gets or sets the distance from the camera at which to disable the depth test to,
                    // for example, prevent clipping against terrain.
                    // When set to zero, the depth test is always applied.
                    // When set to Number.POSITIVE_INFINITY, the depth test is never applied.
                    disableDepthTestDistance : Number.POSITIVE_INFINITY
                }
            });
            viewer.zoomTo(viewer.entities);
        }

        Sandcastle.addToolbarMenu([
            {
                text : '添加广告牌',
                onselect : function() {
                    addBillboard();
                    Sandcastle.highlight(addBillboard);
                }
            },
            {
                text : '设置广告牌的属性',
                onselect : function() {
                    setBillboardProperties();
                    Sandcastle.highlight(setBillboardProperties);
                }
            },
            {
                text : '更改广告牌属性',
                onselect : function() {
                    changeBillboardProperties();
                    Sandcastle.highlight(changeBillboardProperties);
                }
            },
            {
                text : '广告牌尺寸(以米计) ',
                onselect : function() {
                    sizeBillboardInMeters();
                    Sandcastle.highlight(sizeBillboardInMeters);
                }
            },
            {
                text : '添加多个广告牌',
                onselect : function() {
                    addMultipleBillboards();
                    Sandcastle.highlight(addMultipleBillboards);
                }
            },
            {
                text : '按距离缩放广告牌',
                onselect : function() {
                    scaleByDistance();
                    Sandcastle.highlight(scaleByDistance);
                }
            },
            {
                text : '按距离褪色广告牌',
                onselect : function() {
                    fadeByDistance();
                    Sandcastle.highlight(fadeByDistance);
                }
            },
            {
                text : '按距离偏移广告牌',
                onselect : function() {
                    offsetByDistance();
                    Sandcastle.highlight(offsetByDistance);
                }
            },
            {
                text : '添加标记广告牌',
                onselect : function() {
                    addMarkerBillboards();
                    Sandcastle.highlight(addMarkerBillboards);
                }
            },
            {
                text : '在夹紧到地面时禁用深度测试',
                onselect : function() {
                    disableDepthTest();
                    Sandcastle.highlight(disableDepthTest);
                }
            }
        ]);

        Sandcastle.reset = function () {
            // flyHome(duration)
            // Fly the camera to the home view.
            // duration	Number	optional The duration of the flight in seconds.
            viewer.camera.flyHome(0);
            viewer.entities.removeAll();

            if (Cesium.defined(terrainProvider)) {
                viewer.terrainProvider = terrainProvider;
                terrainProvider = undefined;
                viewer.scene.globe.depthTestAgainstTerrain = false;
            }
        };
        //Sandcastle_End
        Sandcastle.finishedLoading();
    }

    if (typeof Cesium !== 'undefined') {
        startup(Cesium);
    }
    else if (typeof require === 'function') {
        require(['Cesium'], startup);
    }
</script>
</body>
</html>
学无止境慢慢来
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cesium-1.52 billboards.html

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=...
复制链接

扫一扫