车或者人从线段上移动的过程并调整方向(可视化)

 viewer = new Cesium.Viewer('cesiumContainer', {

            geocoder: false,

            homeButton: false,

            imageryProvider: arcgis_layer, //底图

            sceneModePicker: false,

            baseLayerPicker: false,

            navigationHelpButton: false,

            animation: false,

            timeline: false,

            fullscreenButton: false,

            shouldAnimate: true,

            terrainProvider: terrainProvider,

            vrButton: false,

            infoBox: true,

            selectionIndicator: false,

            orderIndependentTranslucency: false,

            contextOptions: {

            },

            requestRenderMode: false,

        });

        viewer.scene.globe.enableLighting = true;

        let geojson = await funjosnS('43060030017-A4');

        // 水库

        await drainageDasin(viewer,geojson[1])

        // 上游河流

        await UpstreamRivers(viewer,geojson[0])

        // 下游河流

        //调用方式以及要传入的链接

        await btnRivers(viewer,geojson[2],'http://111.22.69.99:58080/cesium/Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',1)

        // 下游河流面

        await btnDasin(viewer,geojson[3])

//函数抛出

export const btnRivers =async (viewer: any, e: string,url:any,num=0) => {

  var scene = viewer.scene;

  Cesium.GeoJsonDataSource.load(e).then((dataSource:any) =>{

      dataSource.entities.values.forEach(async (entity: any) => {

        if (entity.polygon) { // 面

          entity.polygon.material = '/public/app1.jpg';

          entity.polygon.clampToGround = true; // 使面实体贴地

        } if (entity.polyline) {//线

          entity.polyline.width = 6;

          entity.polyline.material = '/public/app.png';

          entity.polyline.clampToGround = true; // 使面实体贴地

            // 获取线的坐标位置

            if(num != 0){

              await updatePositionFun(viewer,entity,url,scene)

            }

      }

    });

    viewer.dataSources.add(dataSource);

  })

  .catch(() => {

  });

}

// 移动动画3D模型

const updatePositionFun =async (viewer: any, entity: any,url:any,scene)=>{

  const positions = entity.polyline.positions.getValue(Cesium.JulianDate.now());

        // 创建模型矩阵

        let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positions[0]);

        const model = await Cesium.Model.fromGltfAsync({

          url: url,

          modelMatrix: modelMatrix,

          scale: 50,

          incrementallyLoadTextures: true,   // 加载模型后的纹理是否可以继续流入

          runAnimations: true,     // 指定是否应运行 glTF 动画

          clampAnimations: true,    // 指定 glTF 动画是否应在不带关键帧的持续时间内保持最后一个姿势

          shadows: Cesium.ShadowMode.ENABLED,   // 指定模型是否 投射或接收来自光源的阴影

          heightReference: Cesium.HeightReference.NONE,  // 表示相对于地形的位置。NONE表示绝对位置

          color: Cesium.Color.RED,  // 与模型的渲染颜色混合的颜色

          colorBlendMode: Cesium.ColorBlendMode.MIX, // 颜色混合模式,HIGHLIGHT、MIX、REPLACE

          colorBlendAmount: 0.3,  // colorBlendMode是MIX时有效,控制颜色混入的程度

          silhouetteColor: Cesium.Color.WHITE.withAlpha(0.5),  // 白色线框,模型边框的颜色

          silhouetteSize: 5    // 模型边框大小

        });

        scene.primitives.add(model);

        // 计算运动的总时间和速度

        const totalDuration = 60; // 秒

        const startTime = performance.now();

        // 声明普通函数 updatePosition

        const updatePosition=()=>{

          const currentTime = performance.now();

          const elapsedTime = (currentTime - startTime) / 1000; // 转换为秒

          const t = elapsedTime / totalDuration;

         

          if (t >= 1.0) {

            // 如果时间超过总时长,将模型移动到终点

            modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positions[positions.length - 1]);

            model.modelMatrix = modelMatrix;

          } else {

            // 计算当前比例

            const totalLength = positions.length;

            const index = Math.floor(t * (totalLength - 1));

            const nextIndex = Math.min(index + 1, totalLength - 1);

            const segmentT = (t * (totalLength - 1)) - index;

            // 线性插值计算当前位置

            const currentCartesian = Cesium.Cartesian3.lerp(

              positions[index],

              positions[nextIndex],

              segmentT,

              new Cesium.Cartesian3()

            );

            // 计算方向向量,保持Z轴不变

            const direction = Cesium.Cartesian3.subtract(

              positions[nextIndex],

              positions[index],

              new Cesium.Cartesian3()

            );

            direction.z = 0; // 保持Z轴不变

            Cesium.Cartesian3.normalize(direction, direction);

            // 计算模型的朝向

            const up = Cesium.Cartesian3.UNIT_Z;

            const right = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3());

            Cesium.Cartesian3.normalize(right, right);

            const adjustedUp = Cesium.Cartesian3.cross(right, direction, new Cesium.Cartesian3());

            // 创建旋转矩阵

            const rotationMatrix = new Cesium.Matrix3(

              right.x, right.y, right.z,

              adjustedUp.x, adjustedUp.y, adjustedUp.z,

              -direction.x, -direction.y, -direction.z

            );

            modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotationMatrix, currentCartesian, new Cesium.Matrix4());

            model.modelMatrix = modelMatrix;

            requestAnimationFrame(updatePosition);

          }

        }

        // 开始动画

        requestAnimationFrame(updatePosition);

}

  • 17
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值