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

1.9 KiB
Raw Blame History

title author date tags categories
快速起步 ac 2022-01-12
CesiumJS
GIS

官网上的快速起步,有两种方式:

  1. CDN的方式引用;

  2. 工程化的npm包的形式。

这里先使用CDN的方式引用刚本地部署时下载的资源的方式。

1. 获取Cesium ion的token

Sign up for a free account

Cesium ion 上注册账号就会有一个访问Ion平台数据token。

image-20220224121815977

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

image-20220224122155736

2. Hello CesiumJS

创建一个叫"hello-cesium"的空文件夹将刚解压出来的Build 文件夹拷贝一份进去。

Build目录下有很多依赖的资源文件所以不能单单拷贝Cesium.js文件。

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