Cesium-1.72学习（增加点、线、立方体、等案例）

最新推荐文章于 2024-06-12 09:25:59 发布
最新推荐文章于 2024-06-12 09:25:59 发布
阅读量2k 收藏 9
点赞数 1
分类专栏： Cesium 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43117449/article/details/108316684
版权

1、点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加点 cesium (自定义图标)</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
    <div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg',
            credit : '© Analytical Graphics, Inc.',
            tilingScheme : new Cesium.GeographicTilingScheme(),
            maximumLevel : 5
        }),
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球


    //增加点
    //静态方法，直接调用，返回->new Cesium.Cartesian3 ( x , y , z )
    //Cesium.Cartesian3.fromDegrees (longitude, latitude, height , ellipsoid , result )
    //前三个参数分别是经纬高
    viewer.entities.add({
        position:Cesium.Cartesian3.fromDegrees( 75.59, 40, 0),
        billboard:{
            image:'/Cesium-1.72/Apps/Sandcastle/images/facility.gif'
        },
        id:'MyCesium',
        name:'Cesium-Station',
        label : {
            text : 'Citizens Bank Park',
            font : '14pt monospace',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth : 2,
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            pixelOffset : new Cesium.Cartesian2(0, -10),
            fillColor:Cesium.Color.GREEN
        },
        description:'自定义增加的点'
    })
</script>

2、线

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加线 cesium </title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
    <div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg',
            credit : '© Analytical Graphics, Inc.',
            tilingScheme : new Cesium.GeographicTilingScheme(),
            maximumLevel : 5
        }),
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球

    //添加线


    for(var p = 0 ; p <2;p++){
        var data = new Array();
        for(var i = 0 ; i< 360;i++){
            data.push(i);
            data.push(0);
            data.push(p*1000000);
        }
        viewer.entities.add({
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArrayHeights(data),
                width : 5,
                material : new Cesium.PolylineOutlineMaterialProperty({
                    color : Cesium.Color.ORANGE,
                    outlineWidth : 2,
                    outlineColor : Cesium.Color.BLACK
                })
            }
        })
    }


</script>

3、立方体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加box cesium </title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
    <div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg',
            credit : '© Analytical Graphics, Inc.',
            tilingScheme : new Cesium.GeographicTilingScheme(),
            maximumLevel : 5
        }),
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球

    //添加3Dbox
    viewer.entities.add({
        name:'red 3D BOX',
        position: Cesium.Cartesian3.fromDegrees(-107.0,42.0,300000.0),
        box:{
            dimensions:new Cesium.Cartesian3(400000.0,300000.0,500000.0),
            material:Cesium.Color.RED.withAlpha(0.5),
            outline:true,
            outlineColor:Cesium.Color.BLACK
        }
    })

    viewer.zoomTo(viewer.entities);

</script>

4、相机定位

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cesium 相机控制</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
    <script src="/Cesium-1.72/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link rel="stylesheet" href="/Cesium-1.72/Apps/Sandcastle/templates/bucket.css">
</head>
<body style="background-color: #fff;">
    <div style="width:1500px;height:700px;">
        <div id="toolbar" style="z-index: 999;"></div>
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script>

    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', //本机地图服务
            fileExtension : "png",
        }),
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球

    Sandcastle.addDefaultToolbarButton('相机定位', function() {
        //相机定位
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 150000.0),
        });
    });

    function flyInACity(){
        //相机定位
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.2, 39.4, 550000.0),
        });
    }

    Sandcastle.addToolbarMenu([
        {
            text: "Camera Options",
        },
        {
            text: "Fly in a Beijing",
            onselect: function () {
                flyInACity();
                Sandcastle.highlight(flyInACity);
            },
        }
        ]);
</script>

5、平面矩形填充

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平面矩形填充</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
    <div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', //本机地图服务
            fileExtension : "png",
        }),
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球

    //添加矩形
    viewer.entities.add({
        name : 'Yellow plane outline',
        position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 0),
        plane : {
            plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),//平面的法线
            dimensions : new Cesium.Cartesian2(400000.0, 300000.0),
            fill : true,
            //material:Cesium.Color.RED.withAlpha(0.5),透明度
            material:new Cesium.GridMaterialProperty({
                color : Cesium.Color.YELLOW,
                cellAlpha : 0.2,
                lineCount : new Cesium.Cartesian2(8, 8),
                lineThickness : new Cesium.Cartesian2(2.0, 2.0)
            }),
            outline : true,
            outlineColor : Cesium.Color.RED
        }
    })


    var stripeMaterial = new Cesium.StripeMaterialProperty({
        evenColor: Cesium.Color.WHITE.withAlpha(0.5),
        oddColor: Cesium.Color.BLUE.withAlpha(0.5),
        repeat: 5.0,
    });
    viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(
                Cesium.Cartesian3.fromDegreesArray([
                    -107.0,
                    27.0,
                    -107.0,
                    22.0,
                    -102.0,
                    23.0,
                    -97.0,
                    21.0,
                    -97.0,
                    25.0,
                    -99.0,
                    26.0,
                ])
            ),
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 4,
            material: stripeMaterial,
        },
    });

</script>

6、模拟飞机动态运行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加线 cesium </title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
    <div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', //本机地图服务
            fileExtension : "png",
        }),
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
        shouldAnimate: true,
        clock:new Cesium.Clock({
            currentTime:Cesium.JulianDate.fromDate(new Date())
        })
    });

    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球



    var arr = new Array();

    viewer.entities.add({
        id:'star1_t',
        name : 'Orange line with black outline at height and following the surface',
        description:'Orange Line',//描述
        polyline : {
            positions : Cesium.Cartesian3.fromDegreesArrayHeights(arr),
            width : 5,
            material : new Cesium.PolylineOutlineMaterialProperty({
                color : new Cesium.Color ( 1 , 1 , 0 , 0.5 ),
                outlineWidth : 2,
                outlineColor : Cesium.Color.BLACK
            })
        }
    })

    //添加矩形
    viewer.entities.add({
        id:'star1_s1_p',
        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,
            ]),
            material: new Cesium.GridMaterialProperty({
                color : Cesium.Color.YELLOW,
                cellAlpha : 0.2,
            })
        },
    });

    //添加线
    viewer.entities.add({
        name: "Purple straight arrow at height",
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                -75,
                43,
                500000,
                -75,
                43,
                0,
            ]),
            width: 10,
            arcType: Cesium.ArcType.NONE,
            material: new Cesium.PolylineArrowMaterialProperty(
                Cesium.Color.PURPLE
            ),
        },
    });

    //添加卫星模型
    ent = new Cesium.Entity({
        id:'star1',
        name:'star',
        description:'卫星',
        position:Cesium.Cartesian3.fromDegrees( 10,0,4000000),
        model:{
            uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
            minimumPixelSize : 128,
            maximumScale : 40000
        }
    });
    viewer.entities.add(ent);


    //添加三角型
    viewer.entities.add({
        id:'lines',
        name: "Cyan vertical polygon with per-position heights and outline",
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
                -90.0,
                41.0,
                0.0,
                -85.0,
                41.0,
                500000.0,
                -80.0,
                41.0,
                0.0,
            ]),
            perPositionHeight: true,
            material: Cesium.Color.CYAN.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK,
        },
    });


    var x =0;

    setInterval(function() {

        var data = new Array();
        data.push(x+1);
        data.push(10);
        data.push(x-5);
        data.push(10);
        data.push(x-5);
        data.push(-10);
        data.push(x+1);
        data.push(-10);

        //更改时间
        viewer.clock=new Cesium.Clock({
            currentTime:Cesium.JulianDate.fromDate(new Date())
        })
        //图像更改1
        var position = Cesium.Cartesian3.fromDegrees(x,0,4000000)
        viewer.entities.getById('star1').position=position;
        arr.push(x);
        arr.push(0);
        arr.push(4000000);
        viewer.entities.getById('star1_t').polyline.positions = Cesium.Cartesian3.fromDegreesArrayHeights(arr);
        viewer.entities.getById('star1_s1_p').polygon.hierarchy=Cesium.Cartesian3.fromDegreesArray(data);
        x += 10;
    },1000);




   /* var x  = 0;
    var ent = null;
    setInterval(function() {
        if(ent != null){
            viewer.entities.remove(ent);
        }
        //添加卫星模型
         ent = new Cesium.Entity({
            name:'star',
            description:'卫星',
            position:Cesium.Cartesian3.fromDegrees( x,0,4000000),
            model:{
                uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
                minimumPixelSize : 128,
                maximumScale : 40000
            }
        });
        viewer.entities.add(ent);
        x+=1;
        if(x == 360){
            x = 0 ;
        }
    },1000);*/


</script>

7、官方czml卫星运行案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速开始 cesium</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
    <div style="width:1500px;height:700px;">
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg',
            credit : '© Analytical Graphics, Inc.',
            tilingScheme : new Cesium.GeographicTilingScheme(),
            maximumLevel : 5
        }),
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
        shouldAnimate: true
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球


    viewer.dataSources.add(
        Cesium.CzmlDataSource.load("/Cesium-1.72/Apps/SampleData/simple.czml")
    )
</script>

8、模拟卫星扫描

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卫星扫描</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
    <div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', //本机地图服务
            fileExtension : "png",
        }),
    });

    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球

    var data = [];

    data = [{
        longitude: 116.405419,
        dimension: 39.918034,
        height: 700000,
        time: 0
    }, {
        longitude: 115.2821,
        dimension: 39.918145,
        height: 700000,
        time: 40
    }, {
        longitude: 114.497402,
        dimension: 39.344641,
        height: 700000,
        time: 100
    }, {
        longitude: 107.942392,
        dimension: 35.559967,
        height: 700000,
        time: 280
    }, {
        longitude: 106.549265,
        dimension: 34.559967,
        height: 700000,
        time: 360
    }, {
        longitude: 95.2821,
        dimension: 32.918145,
        height: 700000,
        time: 400
    }, {
        longitude: 94.497402,
        dimension: 30.344641,
        height: 700000,
        time: 450
    }, {
        longitude: 87.942392,
        dimension: 25.559967,
        height: 700000,
        time: 550
    }, {
        longitude: 66.549265,
        dimension: 24.559967,
        height: 700000,
        time: 600
    }];

    // 起始时间
    var start = Cesium.JulianDate.fromDate(new Date(2020, 7, 11));
    // 结束时间
    var stop = Cesium.JulianDate.addSeconds(start, 600, new Cesium.JulianDate());

    // 设置始时钟始时间
    viewer.clock.startTime = start.clone();
    // 设置时钟当前时间
    viewer.clock.currentTime = start.clone();
    // 设置始终停止时间
    viewer.clock.stopTime = stop.clone();
    // 时间速率，数字越大时间过的越快
    viewer.clock.multiplier = 10;
    // 时间轴
    viewer.timeline.zoomTo(start, stop);
    // 循环执行
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;


    var property = computeFlight(data);
    // 添加模型
    var planeModel = viewer.entities.add({
        // 和时间轴关联
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start: start,
            stop: stop
        })]),
        position: property,
        // 根据所提供的速度计算点
        orientation: new Cesium.VelocityOrientationProperty(property),
        // 模型数据
        model: {
            uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
            minimumPixelSize: 128
        },
        path: {
            resolution: 1,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: .1,
                color: Cesium.Color.YELLOW
            }),
            width: 10
        }
    });
    planeModel.position.setInterpolationOptions({ //设定位置的插值算法
        interpolationDegree: 5,
        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
    });

    var property2 = computeFlight2(data);
    var entity_ty = viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start: start,
            stop: stop
        })]),
        position: property2,
        orientation: new Cesium.VelocityOrientationProperty(property2),
        cylinder: {
            HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            length: 700000,
            topRadius: 0,
            bottomRadius: 700000 / 4,
            material: Cesium.Color.RED.withAlpha(.4),
            outline: !0,
            numberOfVerticalLines: 0,
            outlineColor: Cesium.Color.RED.withAlpha(.8)
        },
    });
    entity_ty.position.setInterpolationOptions({
        interpolationDegree: 5,
        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
    });



    function computeFlight(source) {
        var property = new Cesium.SampledPositionProperty();
        for (var i = 0; i < source.length; i++) {
            var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
            var position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
            // 添加位置，和时间对应
            property.addSample(time, position);
        }
        return property;
    }

    function computeFlight2(source) {
        var property = new Cesium.SampledPositionProperty();
        for (var i = 0; i < source.length; i++) {
            var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
            var position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height / 2);
            // 添加位置，和时间对应
            property.addSample(time, position);
        }
        return property;
    }

</script>

9、时钟

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock 时钟</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
    <script src="/Cesium-1.72/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link rel="stylesheet" href="/Cesium-1.72/Apps/Sandcastle/templates/bucket.css">
</head>
<body style="background-color: #fff;">
    <div style="width:1500px;height:700px;">
        <div id="toolbar" style="z-index: 999;"></div>
        <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', //本机地图服务
            fileExtension : "png",
        }),
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球

    // Create a clock that loops on Christmas day 2013 and runs in 4000x real time.
    var clock = new Cesium.Clock({
        startTime: Cesium.JulianDate.fromIso8601("2013-12-25"),
        currentTime: Cesium.JulianDate.fromIso8601("2013-12-25"),
        stopTime: Cesium.JulianDate.fromIso8601("2013-12-26"),
        clockRange: Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time
        clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
        multiplier: 4000, // how much time to advance each tick
        shouldAnimate: true, // Animation on by default
    });

    viewer.clockViewModel = clock;

    viewer.scene.globe.enableLighting = true;

    Sandcastle.addToolbarButton("Reset Current Time", function () {
        var resetTime = viewer.clockViewModel.startTime;
        viewer.clockViewModel.currentTime = resetTime;
        viewer.timeline.updateFromClock();
    });

    Sandcastle.addToolbarButton("Slow Down Clock", function () {
        viewer.clockViewModel.multiplier /= 2;
    });

    Sandcastle.addToolbarButton("Speed Up Clock", function () {
        viewer.clockViewModel.multiplier *= 2;
    });
</script>

案例代码：https://github.com/zhangxuhui1992/cesium

永恒的狼牙
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Cesium-1.72学习（地球模型创建 在线 离线 瓦片）
weixin_43117449的博客
08-31 1252
1、在线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速开始 cesium</title> <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css"> <script src="/Cesium-1.
Cesium 加载在线天地图瓦片和离线瓦片功能（cesium开发记录）
weixin_42508580的博客
11-25 6774
Cesium 加载在线天地图瓦片功能 1、未联网状态加载默认本地底图，保证地球有底图显示 let viewer = new Cesium.Viewer('cesiumContainer', { // 未联网状态下 默认显示球面地图 imageryProvider: new Cesium.TileMapServiceImageryProvider({ url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
Cesium系列教程-进阶篇
xt3d的博客
05-23 288
本篇教程适合具有一定Cesium基础的开发者，涉及到GLSL语言，所以也需要基础的着色器编写能力。相信通过此篇教程一定能提升您的Cesium开发能力。Cesium系列教程-进阶篇。
cesium创建纯净的地球
baidu_40393148的博客
03-12 261
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- 引入本地的cesium支持js和css文件，更快并节约流量 --> <script src="Build/Cesium/Cesium.js"></script> <link href="Build/Cesium/W
cesium渲染路网图矢量瓦片，影像瓦片，地形瓦片
最新发布
qq_38974956的博客
06-12 125
cesium渲染路网图矢量瓦片，影像瓦片，地形瓦片
Cesium-1.72.rar
08-24
由于官方下载速度较慢，这份压缩包文件“Cesium-1.72.rar”是为了方便开发者们快速获取到这个宝贵的资源。 Cesium的核心特性是利用WebGL技术来实现在网页中展示高精度的3D地球模型。WebGL是一种基于OpenGL标准的...
Cesium-1.72.zip
08-05
CesiumJS是一个开源JavaScript库，用于创建世界级的3D球体和地图，具有最佳的性能、精度、视觉质量和易用性。从航空航天到智能城市再到，各个行业的开发人员都使用CesiumJS来创建交互式web应用程序来共享动态地理...
cesium-sensor-volumes.js, 适用于Cesium1.71.0
08-17
适用于Cesium1.71.0，引入后即可渲染agi_conicSensor, agi_rectangularSensor, agi_customPatternSensor，agi_Vector等效果，直接引用即可import "/js/cesium-sensor-volumes
cesium-wind.rar_cesium 风_cesium 绘制风场_cesium-wind_curiousx2p_渲染中
07-15
总的来说，"cesium-wind.rar"这个压缩包文件提供的内容对于学习和开发Cesium风场渲染应用非常有价值，它涵盖了从数据处理到3D图形编程的多个关键知识点，是进行相关研究或项目开发的重要参考资料。
cesium-viewshed.js
01-20
cesium可视域插件cesium-viewshed
cesium实现多彩矩形地球球体效果
专注GIS开发
02-25 2794
cesium实现多彩矩形球体效果
cesium添加自定义点位图片
zw17302560727的博客
04-12 810
链接地址。
cesium中加载点图标
苟冬新
01-30 3385
贴代码 // primitives可加载大量数据，性能方面比entities要好一些 let billboard = viewer.scene.primitives.add(new Cesium.BillboardCollection()); billboards.add({ image: imgUrl, // 图片地址 width: 22, height: 22, // scale: 1.0, // sizeInMeters : true, //图像的尺寸被指定成
cesium实现自定义地球球体背景效果
专注GIS开发
02-19 3276
cesium实现自定义背景
Cesium之简介以及离线部署运行篇
weixin_34392843的博客
01-03 1588
Cesium简介   cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，一款开源3DGIS的js库。cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile，但是由于cesium基于WebGL来渲染3D的，所以对浏览器有要求，必须支持WebGL才行。参照cesium官网的说明文档，...
46.（cesium之家）cesium实现信息提示tooltip
地图之家
11-23 687
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> <li
CesiumJS如何自定义浮框
remy0817的博客
01-04 541
CesiumJS实现自定义浮框
cesium添加实体标签组
weixin_40311409的博客
12-22 1210
如何在Cesium中添加多个标签前言一、代码效果 前言 Cesium当中可能会使用到多个实体对象，比如标签、几何体等等，但是有一些需要多个的时候不想一个一个添加到viewer就需要使用循环来生成。 一、代码 代码如下（示例）： let labels=viewer.entities.add(new Cesium.Entity()); putLables( antennaList, labels ); labels.show = true; function putLables(_datas, _pare
html左侧模块选择,[转载]如何添加多个自定义HTML模块
weixin_36446632的博客
05-31 209
和讯博客在各类网站推出的博客模板中可说是独树一帜,也是在其它博客网纷纷出台限制特效,让和讯其特有的自定义HTML模板可以实现众多博友玩特效的乐趣!吸引着大批网友进驻和讯网,让这个以财经为主的网站带来了巨大的流量和效益.当然和讯网为考虑到网站的运行速率也只是添置了一个自定义HTML模块,对于良曼来说这好像还不够宽广,还是不能突显本博的与众不同,因此良曼上半年的改模板行动开始了,最终以添加多个自定义模...
Cesium-primitive方式加载geojson线数据
05-27
可以通过以下步骤使用Cesium-primitive方式加载geojson线数据： 1. 使用Cesium的GeoJsonDataSource加载geojson数据： ```javascript var dataSource = new Cesium.GeoJsonDataSource(); dataSource.load(url).then(function(){ var entities = dataSource.entities.values; // your code here }); ``` 2. 遍历entities，获取线数据的坐标信息： ```javascript var coordinates = []; for (var i = 0; i < entities.length; i++) { var entity = entities[i]; if (entity.polyline) { var positions = entity.polyline.positions.getValue(); coordinates.push(positions); } } ``` 3. 使用Cesium的PolylineGeometry生成线的geometry： ```javascript var geometries = []; for (var i = 0; i < coordinates.length; i++) { var geometry = new Cesium.PolylineGeometry({ positions: coordinates[i], width: 5.0 }); geometries.push(geometry); } ``` 4. 使用Cesium的Primitive生成线的primitive： ```javascript var primitives = []; for (var i = 0; i < geometries.length; i++) { var primitive = new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: geometries[i] }), appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType('Color', { color: Cesium.Color.RED }) }) }); primitives.push(primitive); } viewer.scene.primitives.add(primitives); ``` 以上代码可以将加载的geojson线数据以Cesium-primitive的方式显示在Cesium的场景中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值