原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=ArcticDEM.html&label=All

实现效果如下视频所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<template>
  //...
  <div
    class="map"
    ref="viewerDivRef"
    v-loading="loading"
    element-loading-text="三维模型加载中..."
    element-loading-background="rgba(122, 122, 122, 0.8)">
    <el-select
      class="select"
      v-model="value"
      placeholder="请选择模型"
      size="default"
      @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value" />
    </el-select>
  </div>
</template>

<script>
const loading = ref(true);
const value = ref("");
const options = [
  { value: "1", label: "丹奈利峰" },
  { value: "2", label: "安克拉治区域" },
  { value: "3", label: "山峰(群峰)" },
  { value: "4", label: "河床" },
];

onMounted(() => {
  //...
  add3DModelData();
});

/**
 * 添加Cesium Ion中提供的三维模型数据
 */
function add3DModelData() {
  addArcticDEM();
  if (loading.value) loading.value = false;
}

/**
 * 来自Arctic DEM项目（Release 4）的高分辨率北极地形
 * (https://www.pgc.umn.edu/data/arcticdem/)
 */
async function addArcticDEM() {
  try {
    viewerRef.value.scene.terrainProvider =
      await CesiumTerrainProvider.fromIonAssetId(3956);
  } catch (error) {
    ElMessage.error(`Failed to load terrain. ${error}`);
    if (loading.value) loading.value = false;
  }
}

/**
 * 更换模型地点
 */
function handleChange(val) {
    let dest, ori;
    if (val === "5") {
      //Denali：丹奈利峰（阿拉斯加州的山）
      dest = Cartesian3.fromRadians(
        -2.6399828792482234,
        1.0993550795541742,
        5795
      );
      ori = [3.8455, -0.4535, 0.0];
    } else if (val === "6") {
      //Anchorage Area：安克拉治是美国阿拉斯加州最大城市
      dest = Cartesian3.fromRadians(
        -2.610708034601548,
        1.0671172431736584,
        1900
      );
      ori = [4.6, -0.341, 0.0];
    } else if (val === "7") {
      //Peaks：山峰(群峰)
      dest = Cartesian3.fromRadians(
        -2.6928866820212813,
        1.072394255273859,
        3700
      );
      ori = [1.6308222948889464, -0.6473480165020193, 0.0];
    } else if (val === "8") {
      //Riverbed：河床
      dest = Cartesian3.fromRadians(
        -2.6395623497608596,
        1.0976443174490356,
        2070
      );
      ori = [6.068794108659519, -0.08514161789475816, 0.0];
    } 
    flyToSomewhere(dest, ori);
}

function flyToSomewhere(dest, ori) {
  viewerRef.value.scene.camera.flyTo({
    destination: dest instanceof Cartesian3 ? dest : new Cartesian3(...dest),
    orientation: new HeadingPitchRoll(...ori),
    duration: 1
  });
}
</script>