meface/docs/article/gis/cesiumjs/02helloCesiumJS.md

76 lines
1.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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。
![image-20220224121815977](./images/image-20220224121815977.png)
通过这个token可以访问该用户在`My Assets` 列表中的数据,`My Assets`中的服务可以是从现有的 `Assets Depot` 中列表中添加,也可以自己上传数据。
![image-20220224122155736](./images/image-20220224122155736.png)
### 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>
```
![image-20220224122554241](./images/image-20220224122554241.png)