vue3+cesium 请问如何在每次点移动的时候只有最新的点会显示标签,其余的旧的点不显示标签?

作者站长头像
站长
· 阅读数 10
function locus() {
  emitter.on('webDataValue', (data) => {
    watch(positionParam, (newVal, oldVal) => {
      // console.log("newVal", newVal, 'oldVal', oldVal, 'positionParam', positionParam);
      OldpositionParam.longitude = newVal.longitude;
      OldpositionParam.latitude = newVal.latitude;
    },
      {
        deep: false
      }
    );
    let positions = ref([
      { longitude: OldpositionParam.longitude, latitude: OldpositionParam.latitude, },//旧经纬度
      { longitude: data.longitude, latitude: data.latitude, }//新经纬度
    ])

    // 添加点
    positions.value.forEach((position, index) => {
      viewer.value.entities.add({
        position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude),
        point: {
          pixelSize: 10,
          color: Cesium.Color.RED,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2,
        },
        label: {
          text: `点${index + 1}`,
          font: '14pt monospace',
          show: new Cesium.CallbackProperty(() => {
             return index === positions.value.length - 1;
          }, true),
          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,//折线的材质,可以是颜色或贴图的材质
      },
    });
  })
}

vue3+cesium 请问如何在每次点移动的时候只有最新的点会显示标签,其余的旧的点不显示标签?

回复
1个回答
avatar
test
2024-07-04

Cesium支持的地理坐标系WGS84和莫卡托,默认就是WGS84,不过Cesium渲染不是对地理坐标系进行渲染,所以需要将地理坐标系转换为空间坐标系,也就是Cartesian3,这个转换是不可少的,但是这个转换不会造成位置偏移,如果发生偏移那么检查下自己的代码是不是手动产生了偏移(在三维上有时候视角不同,看着位置也不同,另外是否开启深度检测,也会影响视觉上的效果)

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容