vue3+cesium 请问如何实现模型跟着轨迹移动?

请问大佬们,如何添加模型按照轨迹线移动,目前轨迹点和轨迹线已经有了
更新:

function locus() {
  const uid = window.localStorage.getItem('CardUID')
  api.terminalInfo(uid).then((terminalInfoData) => {
    if (window.localStorage.getItem('CardUID') === null) {
      return ElMessage({
        message: '终端信息显示:当前车辆终端UID未绑定',
        type: "error"
      })
    }
    const { data: res } = terminalInfoData
    const fucison = res.data.fusionCounts === 0 ? 0 : res.data.fusionCounts//融合频率
    const rtk = res.data.rtkCounts === 0 ? 0 : res.data.rtkCounts//RTK频率
    const uwb = res.data.uwbCounts === 0 ? 0 : res.data.uwbCounts//UWB频率
    // function getLabel(time, result) {
    //   return `名称:11111\n速度:${(Math.random() + 100).toFixed(1)} km`;
    // }
    // let textOne = `终端ID:${res.data.uid},定位类型:${TargetingType.value}\n融合频率:${fucison},RTK频率:${rtk},UWB频率:${uwb}`;
    let textOne = `终端ID:${res.data.uid}\n融合频率:${fucison},RTK频率:${rtk},UWB频率:${uwb}`;
    emitter.on('webDataValue', (data) => {
      watch(positionParam, (newVal, oldVal) => {
        // console.log("newVal", newVal, 'oldVal', oldVal, 'positionParam', positionParam);
        OldpositionParam.longitude = oldVal.longitude;
        OldpositionParam.latitude = oldVal.latitude;
      },
        {
          deep: false
        }
      );
      let positions = ref([
        { longitude: OldpositionParam.longitude, latitude: OldpositionParam.latitude, },//旧经纬度
        { longitude: data.longitude, latitude: data.latitude, }//新经纬度
      ])
      let midpointPosition;
      function getMidpoint(time, result) {
        if (!midpointPosition) {
          let startLatitude = positions.value[0].latitude;
          let startLongitude = positions.value[0].longitude;
          let endLatitude = positions.value[1].latitude;
          let endLongitude = positions.value[1].longitude;

          let midpointLatitude = (startLatitude + endLatitude) / 2;
          let midpointLongitude = (startLongitude + endLongitude) / 2;

          midpointPosition = Cesium.Cartesian3.fromDegrees(midpointLongitude, midpointLatitude, 0);
        }
        return midpointPosition;
      }
      const entity = viewer.value.entities.add({
        position: new Cesium.CallbackProperty(getMidpoint, true),
        model: {
          uri: "/car/scene.gltf",
          scale: 2,
          minimumPixelSize: 50
        }
      });


      // 添加点
      positions.value.forEach((position, index) => {
        viewer.value.entities.values.forEach(entity => {
          if (entity.label && entity.label.text == textOne) {
            entity.label.show = false;
          }
        });
        let cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude)
        viewer.value.entities.add({
          position: cartesian3,
          point: {
            pixelSize: 10,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 1,
          },
          label: {
            text: textOne,
            font: '14pt monospace',
            // show: new Cesium.CallbackProperty(() => {
            //   return entityIndex === entityList.length - 1;
            // }, false),
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -9),
          },
        });
      });
      // 添加轨迹线
      viewer.value.entities.add({
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray(positions.value.flatMap(pos => [pos.longitude, pos.latitude])),
          width: 2,
          material: Cesium.Color.RED,//折线的材质,可以是颜色或贴图的材质
        },
      });
    })
  })
}

车辆行进间的车头方向效果
image.png

阅读 3.1k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题