Getting Started (入门)

最新推荐文章于 2021-04-29 15:10:34 发布

高建伟-joe

最新推荐文章于 2021-04-29 15:10:34 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： CesiumJS 文章标签： javascript 前端 npm html node.js

本文链接：https://blog.youkuaiyun.com/Gjw_java/article/details/107887130

CesiumJS 专栏收录该内容

7 篇文章

订阅专栏

文章目录

Getting Started (入门)
Your first app (您的第一个应用)
Breaking down the code (分解代码)
Adding Cesium World Terrain (添加 Cesium 世界地形)
Loading your own data (加载自己的数据)
What’s next? (下一步是什么？)

Getting Started (入门)

CesiumJS是一个用于Web上3D地图的JavaScript库。Cesium ion是您发现3D内容并整理自己的数据以进行流传输的中心。 CesiumJS和ion携手合作，使您能够构建世界一流的3D映射应用程序。
start

Your first app (您的第一个应用)

以下是您的第一个Cesium应用程序的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

$\color{orange}{提示：}$
创建一个 Cesium ion 账户
请注意以上代码中的your_access_token占位符。创建一个 Cesium ion 帐户以使用本教程中的3D内容。在此处注册，以上示例代码将自动使用您的令牌进行更新。如果您已经有一个帐户，请登录

您的 Cesium ion 帐户
由于您已登录Cesium ion，因此以上代码中正在使用您的默认访问令牌。

Web应用程序需要Web服务器，而CesiumJS也不例外。为简单起见，本教程跳过了本地服务器设置，并使用了Glitch（用于Web开发的在线IDE）。单击此处创建一个新的Glitch项目。加载Glitch之后，忽略模板说明，而是单击index.html，删除全部内容，并将其替换为上面的代码。

单击显示/实时按钮，它将在您的Cesium应用程序运行时打开一个新窗口。修改代码后，该视图将自动更新。

Breaking down the code (分解代码)

在HTML头部分中包含CesiumJS库。

<script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

创建一个HTML元素来保存 CesiumJS 部件：

<div id="cesiumContainer"></div>

提供您的 Cesium ion 帐户的访问令牌，以访问Bing图像。由于您已经登录Cesium ion，因此本教程将自动使用您帐户的默认访问令牌：

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2Nzk1ZWY5My1hNWFhLTRjYzUtYjA4ZS0wN2FmM2IzMWZhNzMiLCJpZCI6MzE1MDAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTU1MTI0ODN9._8DXJU8GwUNK0cxhejvCLL1dhPVF_MZoXVcROMJj4gM';

最后，创建名为Viewer的顶级 Cesium 部件，并告诉它使用您在上面定义的HTML元素：

var viewer = new Cesium.Viewer('cesiumContainer');

Adding Cesium World Terrain (添加 Cesium 世界地形)

Cesium World Terrain是 Cesium ion 帐户附带的高分辨率全球地形资产。通过将创建Viewer 部件的行替换为以下内容，将其添加到您的Cesium应用中：

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

现在，当您缩放到特定位置（例如“kunming,china”）时，您会看到Cesium World Terrain的运行情况：
kunming

Loading your own data (加载自己的数据)

您可以将自己的数据上传到 Cesium ion，然后将其平铺到3D Tiles中，这是一种用于流式传输大量异构3D地理空间数据集的开放规范。在本教程中，我们提供了一个带有单个建筑物的示例KML / COLLADA程序包。使用它来创建3D Tiles贴图集并将其添加到应用程序。单击此处下载。

导航至ion并将您刚刚下载的文件AGI_HQ.kmz拖放到页面上的任何位置。选择“ KML / COLLADA”（作为3D Tiles）作为数据类型：

attachment
最后，点击上传。

上传完成后，ion将开始平铺过程并在右上角报告进度。平铺完成后，在左侧选择了新资产的情况下，按页面右下方示例代码旁边的copy按钮。将结果粘贴到创建查看器的行之后的Glitch中。

var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(your_asset_id)
    })
);

使用另一行代码将应用程序的默认视图设置为图块：

viewer.zoomTo(tileset);

在这里插入图片描述
恭喜你！您已经创建了第一个Cesium应用程序！
这是完整的示例供参考：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2Nzk1ZWY5My1hNWFhLTRjYzUtYjA4ZS0wN2FmM2IzMWZhNzMiLCJpZCI6MzE1MDAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTU1MTI0ODN9._8DXJU8GwUNK0cxhejvCLL1dhPVF_MZoXVcROMJj4gM';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });

    var tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(your_asset_id)
        })
    );
    viewer.zoomTo(tileset);
  </script>
</body>
</html>