加载官方在 Cesium Ion 中提供的三维模型数据

1. 前言

俗话说“巧妇难为无米之炊”，这里 米 说的其实是开发当中用到的 GIS 数据 ，就比如在刚开始入门学习使用 Cesium API 的时候，我们可以充分利用官方提供的一些数据，而且搭配官方给出的示例去练习，这样去学习会事半功倍。话不多说，接下来我会介绍一下如何加载Cesium官方提供的数据。

如下图所示：本文将会加载官方示例中的三个例子中用到的三维模型数据，分别为： Aerometrex San Francisco 、 Arctic DEM 、 Cesium OSM Buildings 。

2. 添加官方数据到自己的仓库中

如下图所示：我们以【ion Assets】下的第一个示例的数据为例进行演示，例如我们将实例的名称第一个单词 aerometrex 为关键词，输入至【Asset Depot】的搜索框中，然后点击数据末尾的【+】（即添加按钮），即可将数据添加至自己的数据仓库中，然后点击【My Sssets】下即可看到我们刚才添加的三维模型数据。

3. 代码实现

3.1 实现效果

这里我们将三个示例的代码做了一下整合，并采用一个下拉框分别进行场景地点的切换展示，先来看一下效果：

3.2 代码编写

1. 例如我们要加载第一个模型，根据上述操作，我们需要使用刚刚添加模型的 id 为标识进行加载，将其作为 Cesium3DTileset.fromIonAssetId() 的 第一个参数 。

const tileset = await Cesium3DTileset.fromIonAssetId(1415196,{ 其余属性配置 });

2. 这里仅贴上加载其中一个模型的方法，其他的都一样：其余代码请点击文末的 阅读原文 链接访问即可， 每个模型数据和各个地点都在注释当中稍微翻译了一下，个别地点也进行了简单的搜索，贴上了简单的解释 ，反正都在代码注释中了。

/**
 * Aerometrex（一家提供3D建模、航空影像和LiDAR等地理空间技术的服务的澳大利亚公司），
 * 这里加载的是旧金山高分辨率3D模型，带有街道增强的3D模型
 */
async function addAerometrexSanFrancisco3DModel() {
  try {
    const tileset = await Cesium3DTileset.fromIonAssetId(1415196, {
      maximumScreenSpaceError: 4
    });
    viewerRef.value.scene.primitives.add(tileset);
  } catch (error) {
    ElMessage.error(`Error creating tileset: ${error}`);
    if (loading.value) loading.value = false;
  }
}

/**
 * 更换模型地点
 */