文章目录
Getting Started (入门)
CesiumJS是一个用于Web上3D地图的JavaScript库。Cesium ion是您发现3D内容并整理自己的数据以进行流传输的中心。 CesiumJS和ion携手合作,使您能够构建世界一流的3D映射应用程序。
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的运行情况:
Loading your own data (加载自己的数据)
您可以将自己的数据上传到 Cesium ion,然后将其平铺到3D Tiles中,这是一种用于流式传输大量异构3D地理空间数据集的开放规范。 在本教程中,我们提供了一个带有单个建筑物的示例KML / COLLADA程序包。 使用它来创建3D Tiles贴图集并将其添加到应用程序。 单击此处下载。
导航至ion并将您刚刚下载的文件AGI_HQ.kmz拖放到页面上的任何位置。 选择“ KML / COLLADA”(作为3D Tiles)作为数据类型:
最后,点击上传。
上传完成后,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>
What’s next? (下一步是什么?)
现在您已经知道如何设置基本的Cesium应用程序,接下来可以浏览Sandcastle上的代码示例以探索所有功能和一些常见用例。