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

2023-06-28 383 0

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

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 `名称:11111n速度:${(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

跟这个需求差不多https://segmentfault.com/q/1010000043902102/a-1020000043903625
可以使用CallbackProperty动态更改position位置

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?