Vue-Cesium中如何降低3D Tiles图层相对地面的高度？

你的原始Vue3组件代码：

<template>
  <vc-viewer>
    <vc-layer-imagery>

      <!-- 地面图层 -->

      <vc-imagery-provider-bing
        ref="provider"
        bm-key="AmGu3cvB_g1HbkQErEyvmLc9j0YIGWS7IdOqR7-hQbO8J92Fzrzkhy_bYKSsyoEx"
        :map-style="'AerialWithLabels'"
      ></vc-imagery-provider-bing>

      <!-- 需要调整高度的3D Tiles图层 -->

      <vc-primitive-tileset
        :url="'https://lol/3d/new_form/tileset.json'"
        :maximum-memory-usage="4096"
        :maximumScreenSpaceError="4"
      ></vc-primitive-tileset>
    </vc-layer-imagery>
  </vc-viewer>
</template>

具体解决方法 #

方法1：通过modelMatrix平移调整高度 #

这是通用度最高的方式，利用Cesium矩阵变换将3D Tiles整体下移到地面：

<template>
  <vc-viewer>
    <vc-layer-imagery>
      <vc-imagery-provider-bing
        ref="provider"
        bm-key="AmGu3cvB_g1HbkQErEyvmLc9j0YIGWS7IdOqR7-hQbO8J92Fzrzkhy_bYKSsyoEx"
        :map-style="'AerialWithLabels'"
      ></vc-imagery-provider-bing>

      <vc-primitive-tileset
        :url="'https://lol/3d/new_form/tileset.json'"
        :maximum-memory-usage="4096"
        :maximumScreenSpaceError="4"
        :model-matrix="tilesetModelMatrix"
      ></vc-primitive-tileset>
    </vc-layer-imagery>
  </vc-viewer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as Cesium from 'cesium'

const tilesetModelMatrix = ref(null)

onMounted(() => {
  // 替换为模型实际中心点经纬度，调整-50数值控制下移高度（单位：米）
  const center = Cesium.Cartesian3.fromDegrees(116.39, 39.9)
  const translation = Cesium.Cartesian3.fromElements(0, 0, -50)
  const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center)
  Cesium.Matrix4.multiplyByTranslation(transform, translation, transform)
  tilesetModelMatrix.value = transform
})
</script>

方法2：启用贴地（仅支持矢量转3D Tiles数据） #

如果你的3D Tiles是由建筑物轮廓等矢量数据生成的，可直接开启贴地属性：

<vc-primitive-tileset
  :url="'https://lol/3d/new_form/tileset.json'"
  :maximum-memory-usage="4096"
  :maximumScreenSpaceError="4"
  :clamp-to-ground="true"
></vc-primitive-tileset>

方法3：直接设置高度偏移（部分组件支持） #

部分Vue-Cesium封装组件支持height-offset属性，直接设负数即可降低高度：

<vc-primitive-tileset
  :url="'https://lol/3d/new_form/tileset.json'"
  :maximum-memory-usage="4096"
  :maximumScreenSpaceError="4"
  :height-offset="-30"
></vc-primitive-tileset>

内容的提问来源于stack exchange，提问作者Илья Krike