快速开始
这是一个基于Cesium，应用真实地理数据构建3D应用程序的快速开始上手的教程。你将学习到如何构建Cesium的web应用页面，像这样：
第一步：创建一个账户并获得一个token
Cesium ion 是一个开放的数据流平台，托管保持三维数据内容。注册一个免费的账户可以为你开发的应用程序提供全球卫星数据和真实三维数据。
官网首页sign up注册后登陆，进入 Access Tokens
注意default token旁边的copy button 按钮，我们下一步将用到。
第二步：建立CesiumJS的客户端
CesiumJS 是一个开源的JavaScript 引擎。我们将用它来加载Cesium ion中提供的三维数据内容，进行可视化展示。
下面介绍设置CesiumJS的两种方法:
- Import from CDN
下面是一个完整的HTML页面，它将加载所需的JavaScript和CSS文件并初始化旧金山的场景。
由于您已注册了Cesium ion，此代码段要用到您的访问令牌（token）。
下面的代码在Cesium.Ion.defaultAccessToken处设置自己的令牌就能正取展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Your access token can be found at: https://cesium.com/ion/tokens.
Cesium.Ion.defaultAccessToken = '设置自己的token';
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
orientation : {
heading : Cesium.Math.toRadians(0.0),
pitch : Cesium.Math.toRadians(-15.0),
}
});
</script>
</div>
</body>
</html>
- Install with NPM
如果你要使用js框架（webpack等）来创建应用程序，在node中运行以下代码安装 CesiumJS :
npm install cesium
下面的代码加载所需的JavaScript和CSS文件。
由于您已注册了Cesium ion，此代码段要用到您的访问令牌（token）。
下面的代码在Cesium.Ion.defaultAccessToken处设置自己的令牌就能正取展示。
//服务器上存放CesiumJS静态文件的URL
// The URL on your server where CesiumJS's static files are hosted.
window.CESIUM_BASE_URL = '/';
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
// Your access token can be found at: https://cesium.com/ion/tokens.
Cesium.Ion.defaultAccessToken = '设置自己的token';
// Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
orientation : {
heading : Cesium.Math.toRadians(0.0),
pitch : Cesium.Math.toRadians(-15.0),
}
});
配置代码中的CESIUM_BASE_URL（即：服务器上存放CesiumJS静态文件的URL）
CesiumJS需要在服务器上托管一些静态文件，比如web workers和SVG图标。将模块绑定器配置为复制以下四个目录并将它们作为静态文件使用：
node_modules/cesium/Build/Cesium/Workersnode_modules/cesium/Build/Cesium/ThirdPartynode_modules/cesium/Build/Cesium/Assetsnode_modules/cesium/Build/Cesium/Widgets
window.CESIUM_BASE_URL这个全局变量必须在CESUMJS之前设置。它必须指向提供这四个目录的URL。
例如，如果 （Assets/Images/cesium_credit.png）处的图像在（http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png）下使用了静态/Cesium/前缀，那么您将按如下方式设置基本URL：
window.CESIUM_BASE_URL = '/static/Cesium/';
查看完整的Webpack配置，请看 Cesium Webpack Example：
https://github.com/CesiumGS/cesium-webpack-example#cesium-webpack-example
下一步
现在你已经可以构建一个Cesium应用程序了，有整个世界可以探索！下面将介绍查看使用这些教程可以构建的内容：
- 建立飞行跟踪器
- 建立三维建筑
github:https://github.com/jlsdlj/cesiumChina
2831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
