Cesium学习笔记（八）：Demo学习(差值器)

最新推荐文章于 2024-04-02 17:34:18 发布

simple-soul

最新推荐文章于 2024-04-02 17:34:18 发布

阅读量8.3k

点赞数 5

本文链接：https://blog.csdn.net/UmGsoil/article/details/74959829

版权

cesium 同时被 3 个专栏收录

10 篇文章 16 订阅

订阅专栏

javascript

9 篇文章 3 订阅

订阅专栏

webgis

9 篇文章 0 订阅

订阅专栏

这个Demo是官方Demo中的Interpolation（差值器），不过我更喜欢叫它转圈的飞机o(￣ε￣*)

这个Demo看上去就是一个飞机在绕着一个圈在飞，你可以通过切换差值器看效果

话说这个Demo困扰了我好久，我一直以为这个飞机飞行是自己画出来的，因为上一个就是嘛，然后一直找啊找，就是找不到

最后才发现其实它只是在几个时间段填了几个sample，其他的都是靠差值器自动生成的。。。

一起来看一下代码吧

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=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>
    <link rel="stylesheet" href="Sandcastle/templates/bucket.css">
    <style>
        @import url(../Build/Cesium/Widgets/widgets.css);
    </style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="toolbar">
    <div id="interpolationMenu"></div>
</div>

<script src="你的js路径"></script>

</body>
</html>

js

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProviderViewModels: [], //禁用地形变化
    infoBox: false,
    selectionIndicator: false
});

// 打开自然光照
viewer.scene.globe.enableLighting = true;

// 开启地形变化
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
    url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    requestWaterMask: true,
    requestVertexNormals: true
});

//启用深度测试，所以地形后面的东西会消失
viewer.scene.globe.depthTestAgainstTerrain = true;

//生成一个随机数
Cesium.Math.setRandomNumberSeed(3);

//设定了模拟时间的边界
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

//确保查看器处于预期的时间
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束时
//时间变化来控制速度
viewer.clock.multiplier = 10;

//给时间线设置边界
viewer.timeline.zoomTo(start, stop);

//多边形和点（高度随机）
function computeCirclularFlight(lon, lat, radius) {
    var property = new Cesium.SampledPositionProperty();
    //i为角度(多边形的偏离角度)
    for (var i = 0; i <= 360; i += 45) {
        var radians = Cesium.Math.toRadians(i);
        var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());

        //计算位置
        var position = Cesium.Cartesian3.fromDegrees(
            lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);

        //添加了8个sample
        property.addSample(time, position);

        //那几个黄圈圈
        viewer.entities.add({
            position: position,
            point: {
                pixelSize: 8,
                color: Cesium.Color.TRANSPARENT,
                outlineColor: Cesium.Color.YELLOW,
                outlineWidth: 3
            }
        });
    }
    return property;
}

//计算实体位置属性
var position = computeCirclularFlight(0, 180, 0.03);

//创建实体
var entity = viewer.entities.add({

    // 将实体availability设置为与模拟时间相同的时间间隔。
    availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start: start,
        stop: stop
    })]),

    //这是一个4x4的矩阵，包含了方位方向等属性
    position: position,

    //基于位置移动自动计算方向.
    orientation: new Cesium.VelocityOrientationProperty(position),

    //加载飞机模型
    model: {
        uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize: 64
    },

    //路径
    path: {
        resolution: 1,
        material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.1,
            color: Cesium.Color.PINK
        }),
        width: 10
    }
});

//头顶视角
Sandcastle.addDefaultToolbarButton('View Top Down', function () {
    viewer.trackedEntity = undefined;
    viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));
});

//侧面视角
Sandcastle.addToolbarButton('View Side', function () {
    viewer.trackedEntity = undefined;
    viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(-90), Cesium.Math.toRadians(-15), 7500));
});

//追随视角
Sandcastle.addToolbarButton('View Aircraft', function () {
    viewer.trackedEntity = entity;
});

//切换差值器
Sandcastle.addToolbarMenu([{
    text: 'Interpolation: Linear Approximation',
    onselect: function () {
        entity.position.setInterpolationOptions({
            interpolationDegree: 1,
            interpolationAlgorithm: Cesium.LinearApproximation
        });
    }
}, {
    text: 'Interpolation: Lagrange Polynomial Approximation',
    onselect: function () {
        entity.position.setInterpolationOptions({
            interpolationDegree: 5,
            interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
        });
    }
}, {
    text: 'Interpolation: Hermite Polynomial Approximation',
    onselect: function () {
        entity.position.setInterpolationOptions({
            interpolationDegree: 2,
            interpolationAlgorithm: Cesium.HermitePolynomialApproximation
        });
    }
}], 'interpolationMenu');

看完了这个例子，让我们来趁热打铁，写个小例子玩玩

一个环赤道的卫星，然而没有卫星就拿飞机吧。。。

var viewer = new Cesium.Viewer("cesiumContainer");

//设定了模拟时间的边界
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

//确保查看器处于预期的时间
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束时
//时间变化来控制速度
viewer.clock.multiplier = 10;

//给时间线设置边界
viewer.timeline.zoomTo(start, stop);

function computeCirclularFlight(lon, lat) {
    var property = new Cesium.SampledPositionProperty();

    //i的增量不能太大，不然差值器无法把图形如愿画出来
    for (var i = 0; i <= 360; i+=30) {
        var radians = Cesium.Math.toRadians(i);
        var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());

        //绕赤道飞
        var position = Cesium.Cartesian3.fromDegrees(lon+i, lat, 9999999);

        //添加sample
        property.addSample(time, position);

    }
    return property;
}

//计算实体位置属性
var satellitePosition = computeCirclularFlight(0, 0);

//创建实体
var entity = viewer.entities.add({

    // 将实体availability设置为与模拟时间相同的时间间隔。
    availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start : start,
        stop : stop
    })]),

    position : satellitePosition,

    //基于位置移动自动计算方向.
    orientation : new Cesium.VelocityOrientationProperty(satellitePosition),

    //加载飞机模型
    model : {
        uri : '../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    },

    //路径
    path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.1,
            color : Cesium.Color.PINK
        }),
        width : 10
    }
});

//差值器
entity.position.setInterpolationOptions({
    interpolationDegree : 5,
    interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
});

这里写图片描述

simple-soul

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
7
评论
Cesium学习笔记（八）：Demo学习(差值器)

这个Demo是官方Demo中的Interpolation（差值器），不过我更喜欢叫它转圈的飞机o(￣ε￣*)这个Demo看上去就是一个飞机在绕着一个圈在飞，你可以通过切换差值器看效果话说这个Demo困扰了我好久，我一直以为这个飞机飞行是自己画出来的，因为上一个就是嘛，然后一直找啊找，就是找不到最后才发现其实它只是在几个时间段填了几个sample，其他的都是靠差值器自动生成的。。。一起来看一下代码吧h
复制链接

扫一扫