cesium定位到实体车辆trackedEntity，设置垂直于正后方

最新推荐文章于 2024-04-18 17:33:22 发布

AF01

最新推荐文章于 2024-04-18 17:33:22 发布

阅读量825

点赞数 12

文章标签： javascript

本文链接：https://blog.csdn.net/songJunFeng1/article/details/135069563

版权

<!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.0">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.102/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet"
        href="https://cesium.com/downloads/cesiumjs/releases/1.102/Build/Cesium/Widgets/widgets.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/@dvgis/cesium-map/dist/cesium.map.min.js"></script> -->
    <title>Document</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .lonLat {
            position: fixed;
            width: 100%;
            top: 0;
            /* left: 50%; */
            color: aliceblue;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <div class="lonLat">

    </div>
    <script>
       
        let divEle = document.createElement('div')
        var viewer = new Cesium.Viewer("cesiumContainer", {
            timeline: false, // 底部时间线
            homeButton: false, // 视角返回初始位置
            fullscreenButton: false, // 全屏
            animation: false, // 左下角仪表盘（动画器件）
            sceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）
            navigationHelpButton: false, //导航帮助按钮
            // targetFrameRate: 30,
            geocoder: false, // 位置查找工具
            baseLayerPicker: false,
            // requestRenderMode: true,
            creditContainer: divEle,
            // shadows:true,
            // imageryProvider: new Cesium.SingleTileImageryProvider({
            //     url: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
            //     // url: "./earth.webp",
            //     // rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90),
            // }),
        });

        viewer.scene.globe.eableLighting = true;

        viewer.scene.debugShowFramesPerSecond = true;

        viewer.clockViewModel.currentTime = Cesium.JulianDate.fromDate(new Date(2022, 2, 25, 12));

        addModel('./xiaobache.glb', 0)
        function addModel(url, height) {
            viewer.entities.removeAll();
            let p = 120.059
            let position = Cesium.Cartesian3.fromDegrees(
                p,
                36.328,
                height
            );
            setTimeout(() => {
                setInterval(() => {
                    p = p + 0.00001
                    position = Cesium.Cartesian3.fromDegrees(
                        // 120.059,
                        p,
                        36.328,
                        height
                    )
                }, 10);
            }, 3000);
            const heading = Cesium.Math.toRadians(0);
            const pitch = 0;
            const roll = 0;
            const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            const orientation = Cesium.Transforms.headingPitchRollQuaternion(
                position,
                hpr
            );
            const entity = viewer.entities.add({
                name: url,
                position: new Cesium.CallbackProperty(() => {
                    return position
                }),
                orientation: orientation,
                model: {
                    uri: url,
                    scale: 10,
                    minimumPixelSize: 128,
                    maximumScale: 20000,
                    
                },
            });
            var heading1 = heading + Cesium.Math.toRadians(90.0);
            var pitch1 = Cesium.Math.toRadians(-50.0);

            viewer.flyTo(
                entity,
                {
                    duration: 1, maximumHeight: 10, offset: new Cesium.HeadingPitchRange(heading1, pitch1, 250)
                },
            );
            setTimeout(() => {
                viewer.trackedEntity = entity;
            }, 1 * 1000)
            // var center = Cesium.Cartesian3.fromDegrees(120.059, 36.328);
            // var heading1 = heading + Cesium.Math.toRadians(90.0);
            // var range1 = 100.0;
            // viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading1, pitch1, 250));

        }
    </script>
</body>

</html>