76 lines
1.9 KiB
Markdown
76 lines
1.9 KiB
Markdown
|
---
|
|||
|
title: 快速起步
|
|||
|
author: ac
|
|||
|
date: 2022-01-12
|
|||
|
tags:
|
|||
|
- CesiumJS
|
|||
|
categories:
|
|||
|
- GIS
|
|||
|
---
|
|||
|
|
|||
|
> 官网上的快速起步,有两种方式:
|
|||
|
>
|
|||
|
> 1. CDN的方式引用;
|
|||
|
>
|
|||
|
> 2. 工程化的npm包的形式。
|
|||
|
>
|
|||
|
> 这里先使用CDN的方式引用刚本地部署时下载的资源的方式。
|
|||
|
|
|||
|
### 1. 获取Cesium ion的token
|
|||
|
|
|||
|
[Sign up for a free account](https://cesium.com/ion/signup/)
|
|||
|
|
|||
|
在`Cesium ion` 上注册账号,就会有一个访问Ion平台数据token。
|
|||
|
|
|||
|

|
|||
|
|
|||
|
通过这个token可以访问该用户在`My Assets` 列表中的数据,`My Assets`中的服务可以是从现有的 `Assets Depot` 中列表中添加,也可以自己上传数据。
|
|||
|
|
|||
|

|
|||
|
|
|||
|
|
|||
|
|
|||
|
### 2. Hello CesiumJS
|
|||
|
|
|||
|
创建一个叫"hello-cesium"的空文件夹,将刚解压出来的Build 文件夹拷贝一份进去。
|
|||
|
|
|||
|
> Build目录下有很多依赖的资源文件,所以不能单单拷贝Cesium.js文件。
|
|||
|
|
|||
|
```html
|
|||
|
<!DOCTYPE html>
|
|||
|
<html lang="en">
|
|||
|
<head>
|
|||
|
<meta charset="utf-8">
|
|||
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
<style>
|
|||
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
html, body, #cesiumContainer {
|
|||
|
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
|||
|
}
|
|||
|
</style>
|
|||
|
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script> -->
|
|||
|
<!-- <link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
|
|||
|
</head>
|
|||
|
<body>
|
|||
|
<div id="cesiumContainer"></div>
|
|||
|
<script>
|
|||
|
Cesium.Ion.defaultAccessToken = 'your_access_token';
|
|||
|
var viewer = new Cesium.Viewer('cesiumContainer',{
|
|||
|
terrainProvider: Cesium.createWorldTerrain()
|
|||
|
});
|
|||
|
</script>
|
|||
|
</body>
|
|||
|
</html>
|
|||
|
```
|
|||
|
|
|||
|

|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|