Cesium官方教程1：开始

作者：花生_TL007 | 2024-03-29 00:25:56

踩

cesium官方教程

本文转载自：https://www.jianshu.com/p/d89ff3e7c4dc

官方教程原文地址：https://cesium.com/docs/tutorials/getting-started/

学会使用全球地形、影像、3D Tiles（模型切片）、地理编码创建一个Cesium程序。

CesiumJS是一个基于javascript的Web端3D地图引擎。Cesium ion是一个3d内容的发布中心，并且可以把你自己的数据进行切片、发布服务。CesiumJS和 ion 配合起来可以创建世界级3D地图程序。

3D数据经过Cesium ion或者cesiumlab进行处理，并且在cesiumjs中可视化。

一、你的第一个应用程序

代码：


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

你的Cesium ion账户：如果你登陆cesium ion之后，可以用你自己的access token 替换代码里的。

所有web程序需要一个web服务器，CesiumJS也不例外。为了简单，这个教程跳过本地服务器的搭建，使用Glitch 和一个在线的IDE做程序开发。点击这里创建一个glitch项目。Glitch加载之后，忽略模板提示，直接点击index.html 删除整个内容，把上面的代码粘贴过去。

点击

按钮，它会打开一个新窗口，并显示了Cesium的程序。修改代码后，这个弹出窗口会自动刷新。

Hello World!

CesiumJS默认呈现你的ion账户提供的Bing影像地图。

二、分析代码

在HTML的head标签内包含CesiumJS的库引用


<script src="https://cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

创建一个HTML标签去承载CesiumJS控件(widget)

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

从你的ion账户提供一个token去访问Bing影像底图

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmMyMGJkZi1lZGNiLTRjZWUtYjg5Mi0zOGQ0NDNkNTNlNzYiLCJpZCI6MTMyNzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjI5MTY1MTd9.1kWwUft1-Vk2ztF4_rwkYmibN6w-tAAQmP4O2qw34mw';

最后，创建一个名为Viewer的Cesium控件，并且让他去使用上面定义的HTML元素

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

三、添加Cesium全球地形数据

Cesium World Terrain是一个高精度地形库，在你的ion账户里已经有访问权限。

用下述代码替换我们做的第一个示例里的创建Viewer的部分:


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

现在我们在预览界面缩放到特定位置，比如“Grand Canyon, AZ”，就看到如下图效果：

Cesium World Terrain

Grand Canyon的10米精度地形

四、加载你自己的数据

你可以将自己的数据上传到ion并将其切成3D Tiles，这是一种用于大规模异构3D地理空间数据流的开放规范。

在本教程中，我们提供了一个包含单个建筑物的示例KML/COLLADA包，使用它来创建一个3D Tiles瓦片集，并将其添加到应用程序。点击这里下载。

导航到ion，拖放刚才下载的文件AGI_HQ.kmz到页面上的任何位置，再点击上传(upload)

一旦上传完成，ion将开始切割瓦片过程，并在右上角报告进度。完成切割后，在左侧选择新的数据，然后按下页面右小角示例代码旁边的copy按钮。在创建的Viewer行后面，将结果黏贴到Glitch中。


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

将应用程序的默认view设置为tileset:

viewer.zoomTo(tileset)

3D Tiles

加载到CesiumJS中的3D Tiles数据，你自己的数据看起来就是不一样！

祝贺！你已经创建了你的第一个Cesium程序！

以下是供参考的完整示例：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmMyMGJkZi1lZGNiLTRjZWUtYjg5Mi0zOGQ0NDNkNTNlNzYiLCJpZCI6MTMyNzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjI5MTY1MTd9.1kWwUft1-Vk2ztF4_rwkYmibN6w-tAAQmP4O2qw34mw';
    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>

接下来应该做什么？

现在你已经知道了如何设置一个基本的Cesium应用程序，你可以浏览Sandcastle来探索所有的特性和一些常见的用例。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/332480