正文

cesium实现轨迹运动

譬如朝露 V管理员/ / 0 评论/ 669阅读
07 16 
<!--
 * @Author: your name
 * @Date: 2021-05-12 13:51:34
 * @LastEditTime: 2021-05-17 15:22:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Cesium-Examples\Examples\test.html
-->
<!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>3dtiles_模型</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 = new Cesium.UrlTemplateImageryProvider({
        //     url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
        // });
        let token = 'v9QJo6dCfCkJW4zoLCNXg3L8CRr8kabVMXdE25%2FjfaF8sQEmeHGno4SLc2G3K71K97qh9wl4sB%2BVOK6v6f4xC1LqHNAoTp9BaPh%2FVhYT5MPqLd4eWoGztA%3D%3D'
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NjkyNzMxZC1jZWQ0LTQ5YTgtODU1Yy1iMDYyMDEzZDI5NDMiLCJpZCI6MzE5ODgsImlhdCI6MTYxNzI1OTA1Nn0.4OP6HAlLruQmvNgKz2lzwu6zt1oe24HsfdH1_nDLM1I';
        let viewer = new Cesium.Viewer('cesiumContainer', {
            // imageryProvider: osm,
            imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954, }),//默认加载Blue Marble Next Generation影像：

        });



        //创建线路
        let position = [
            120.4655857678565,
            32.00600655954142,
            3,
            120.46393487369018,
            32.005427177467865,
            3,
            120.46343462436438,
            32.00643869437034,
            3,
            120.46058500796654,
            32.005410119042985,
            3
        ]
        // let pts = [0, 0, 0, 0];
        var redLine = viewer.entities.add({
            name: "Red line on terrain",
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(position),
                width: 5,
                material: Cesium.Color.BLUE,
                clampToGround: true,
            },
        });
        var start = Cesium.JulianDate.fromDate(new Date());
        var stop = Cesium.JulianDate.addSeconds(
            start,
            10,
            new Cesium.JulianDate()
        );
        var positionProperty = new Cesium.SampledPositionProperty();
        let linePosition = redLine.polyline.positions.getValue();
        linePosition.forEach((item, index) => {
            const julianDate = Cesium.JulianDate.addSeconds(start, index, new Cesium.JulianDate());
            positionProperty.addSample(julianDate, item);

        })


        var car = viewer.entities.add({
            availability: new Cesium.TimeIntervalCollection([
                new Cesium.TimeInterval({
                    start: start,
                    stop: stop,
                }),
            ]),
            model: {
                uri: './gltf/qiche.gltf',
                minimumPixelSize: 64,
            },
            // viewFrom: new Cesium.Cartesian3(-100.0, 0.0, 100.0),

            position: positionProperty,
            orientation: new Cesium.VelocityOrientationProperty(positionProperty)
        });
        viewer.clock.startTime = start.clone();
        viewer.clock.stopTime = stop.clone();
        viewer.clock.currentTime = start.clone();
        viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
        viewer.clock.multiplier = 1;
        viewer.clock.shouldAnimate = true;

        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(position[0], position[1], 1000.0)
        })
    </script>
</body>

</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。