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>
|
||
```
|
||
|
||

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