Cesium汽车视角跟随

作者: 武汉前端阿杰1001 | 来源:发表于2021-12-22 14:16 被阅读0次

Cesium汽车视角跟随
汽车视角相机延迟跟随（相机跟随）
Cesium加载三维地形及WMS地图，并实现动态控制显示
Cesium模型跟随鼠标旋转
cesium粗略定位初始化场景视角
Cesium中的视角锁定
如何防止cesium相机视角翻转至地底下
Cesium如何开启第一人称视角（第三视角）漫游
cesium相机锁定和弹出图表
unity 第一人称和第三人称视角的切换

a.gif

image.png

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

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

    #cesiumContainer {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    #toolbar {
        position: absolute;
        background-color: white;
        opacity: .8;
    }
</style>

<body>
    <div id="cesiumContainer" class="fullSize">
        <div id="slider"></div>
    </div>
    <div id="loadingOverlay">
      <h1>Loading...</h1>
  </div>
  <div id="toolbar"></div>
</body>
<script>

    var tms = new Cesium.UrlTemplateImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
            // fileExtension: 'jpg',
            // maximumLevel: 7,
        })
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: tms,
            requestVertexNormals: true
        })
        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                url: '/json/tileset.json',
            }));
            var tj
            tileset.readyPromise.then(function (tileset) {
            tj = viewer.scene.primitives.add(tileset);
            default_HeadingPitchRange = new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
            // viewer.zoomTo(tileset, default_HeadingPitchRange);
            var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
            var delta_lng = 0, delta_lat = 0;
            var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, 0.0);
            var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, 0);
            var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
            tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

            tj.style = new Cesium.Cesium3DTileStyle ({
                color: {
                    conditions: [
                        ['${height} >= 300', 'rgba(45, 0, 75, 0.5)'],
                        ['${height} >= 200', 'rgb(102, 71, 151)'],
                        ['${height} >= 100', 'rgb(170, 162, 204)'],
                        ['${height} >= 50', 'rgb(224, 226, 238)'],
                        ['${height} >= 25', 'rgb(252, 230, 200)'],
                        ['${height} >= 10', 'rgb(248, 176, 87)'],
                        ['${height} >= 5', 'rgb(198, 106, 11)'],
                        ['true', 'rgb(127, 59, 8)']
                    ]
                }

            });

        }).otherwise(function (error) {
            console.log(error);
        });

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

       var data = [{
            longitude: 114.33215260505678,
            dimension: 30.596778541164497,
            height: 0,
            time: 0
        }, {
            longitude: 114.35604572296144,
            dimension: 30.57896245918393,
            height: 0,
            time: 600
        }];
        // 起始时间
        var startTime = Cesium.JulianDate.fromDate(new Date());
        // 结束时间
        var stopTime = Cesium.JulianDate.addSeconds(startTime, 600, new Cesium.JulianDate());
        var property = computeFlight(data);
        viewer.clock.multiplier = 20;

        // 循环执行
        viewer.clock.stopTime = stopTime.clone();
        viewer.timeline.zoomTo(stopTime, stopTime);
        viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

        this.animateEntity = this.viewer.entities.add({
            availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start: startTime,
                stop: stopTime
            })]),
            position: property,
            orientation: new Cesium.VelocityOrientationProperty(property),
            model: {
                uri: "http://www.bigemap.com/SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
                scale: 10
            },
            path: {
              resolution: 1,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.YELLOW
                }),
                width: 0
            }
        });
        viewer.trackedEntity = this.animateEntity
            viewer.clock.shouldAnimate = true
            this.animateEntity.viewFrom = new Cesium.Cartesian3(-200,400,200)
      </script>

</html>