Cesium实体移动+视角跟踪_前端_web_建站_vue_react_leaflet_arcgis

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<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>模型加载</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        let osm = Cesium.createOpenStreetMapImageryProvider({
            url: 'https://a.tile.openstreetmap.org/'
        });
        let viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: osm,
            contextOptions: {
                webgl: {
                    alpha: true
                }
            },
            selectionIndicator: false,
            animation: false,  //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: false, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false,  //是否显示点击要素之后显示的信息
            fullscreenButton: false,
            shouldAnimate: true //动画播放
        });

        // 定义线的轨迹动态线纹理-->
        function PolylineTrailLinkMaterialProperty(color, duration) {
            this._definitionChanged = new Cesium.Event();
            this._color = undefined;
            this._colorSubscription = undefined;
            this.color = color;
            this.duration = duration;
            this._time = (new Date()).getTime();
        }
        Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
            isConstant: {
                get: function () { return false }
            },
            definitionChanged: {
                get: function () { return this._definitionChanged; }
            },
            color: Cesium.createPropertyDescriptor('color')
        });
        PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
            return 'PolylineTrailLink';
        };
        PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
            if (!Cesium.defined(result)) { result = {}; }
            result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
            result.image = Cesium.Material.PolylineTrailLinkImage;
            result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
            return result;
        };
        PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
            return this === other || (other instanceof PolylineTrailLinkMaterialProperty && Property.equals(this._color, other._color));
        };
        // 在Material上挂载相关的流动线纹理 可以根据自己的需要进行封装
        Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
        Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
        Cesium.Material.PolylineTrailLinkImage = './images/linear-color-red.png';
        // 定义着色器源码 核心部分
        Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    {\n\
        czm_material material = czm_getDefaultMaterial(materialInput);\n\
        vec2 st = materialInput.st;\n\
        vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
        material.alpha = colorImage.a;\n\
        material.diffuse = colorImage.rgb;\n\
        return material;\n\
    }";
        Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
            fabric: {
                type: Cesium.Material.PolylineTrailLinkType,
                uniforms: {
                    color: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
                    image: Cesium.Material.PolylineTrailLinkImage,
                    time: 0
                },
                source: Cesium.Material.PolylineTrailLinkSource
            },
            translucent: function (material) {
                return true;
            }
        });
        let position = Cesium.Cartesian3.fromDegreesArrayHeights([
            120.4655857678565,
            32.00600655954142,
            3,
            120.46393487369018,
            32.005427177467865,
            3,
            120.46343462436438,
            32.00643869437034,
            3,
            120.46058500796654,
            32.005410119042985,
            3
        ]);
        let route = viewer.entities.add({
            name: 'Rescue Route',
            polyline: {
                positions: position,
                width: 10,
                material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.ORANGE, 3000, './images/linear-color-red.png')
            },

        });
        viewer.flyTo(route)
        let cart = addCar(route)

        //沿线行驶
        function addCar(entity, delay = 3) {

            if (!entity) return;
            const positions = entity.polyline.positions.getValue();
            if (!positions) return;
            let allDis = 0;
            for (let index = 0; index < positions.length - 1; index++) {
                const dis = Cesium.Cartesian3.distance(positions[index], positions[index + 1]);
                allDis += dis;
            }
            const playTime = 10;
            const v = allDis / playTime;
            const startTime = Cesium.JulianDate.addSeconds(viewer.clock.startTime, delay, new Cesium.JulianDate());
            var endTime = Cesium.JulianDate.addSeconds(startTime, playTime, new Cesium.JulianDate());
            const property = new Cesium.SampledPositionProperty();
            let t = 0;
            for (let i = 1; i < positions.length; i++) {
                if (i == 1) {
                    property.addSample(startTime, positions[0]);
                }
                const dis = Cesium.Cartesian3.distance(positions[i], positions[i - 1]);
                const time = dis / v + t;
                const julianDate = Cesium.JulianDate.addSeconds(startTime, time, new Cesium.JulianDate());
                property.addSample(julianDate, positions[i]);
                t += dis / v;
            }

            const car = viewer.entities.add({
                position: property,

                orientation: new Cesium.VelocityOrientationProperty(property),
                model: {
                    uri: './gltf/qiche.gltf',
                    scale: 0.5
                }
            });
            viewer.clock.currentTime = startTime;
            viewer.clock.multiplier = 1;
            viewer.clock.shouldAnimate = true;
            viewer.clock.stopTime = endTime;
            return car;
        };

        viewer.clock.onTick.addEventListener(() => {
            tarkHandle(cart)
        });



        function tarkHandle(entitiy) {

            removeTark();
            let center = entitiy.position.getValue(
                viewer.clock.currentTime
            );

            let orientation = entitiy.orientation.getValue(
                viewer.clock.currentTime
            )

            if (center && orientation) {
                let transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
                transform = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation), center);
                viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(-100, 0, 50))
            } else {

                removeTark();
            }
        }
        //解绑视角跟踪事件
        function removeTark() {
            viewer.clock.onTick.removeEventListener(tarkHandle);
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        }
    </script>
</body>

</html>
参考代码：
Cesium第一视角人称漫游.rar