CesiumJS 快速入门

1em
375 阅读1分钟

目标：快速创建一个使用真实数据的3D应用

第一步：创建一个账号和得到一个token

  1. 注册一个账号获取[token](Cesium ion)后续调用Cesium官方的数据需要

image.png

第二步：构建Cesium客户端

Cesium是开源的JS引擎，我们引入它有以下两种方式

  • CDN引入---简单学习使用
  • NPN安装---工程化

CDN引入

  1. 简单创建一个html文件，引入Cesium提供的JS和CSS文件，并使用它的场景数据，同时需要你用你的token替换下面代码中的:
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入Cesium的JS和CSS文件 -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.90/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.90/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #cesiumContainer {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
  <!-- 地球容器 -->
  <div id="cesiumContainer"></div>
  <script>
    const your_token = '你自己的token';
    Cesium.Ion.defaultAccessToken = your_token;
    // 在id为cesiumContainer的HTML元素里初始化Cesium视图
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });
    // 添加OSM的全球3D图层作为底图
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
    // 指定对应的经纬度和高度，将摄像机移动到旧金山
    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>
</body>
</html>

image.png

NPM安装

若是实际项目中使用了webpack/Rollup等做打包，就需要npm安装

  1. 安装
npm install cesium

2.Cesium中有些静态文件需要再服务器上部署，具体就是下面这些文件

  • node_modules/cesium/Build/Cesium/Workers
  • node_modules/cesium/Build/Cesium/ThirdParty
  • node_modules/cesium/Build/Cesium/Assets
  • node_modules/cesium/Build/Cesium/Widgets
  1. 如何引入
window.CESIUM_BASE_URL = '/'; 
import * as Cesium from 'cesium'; 
import "cesium/Build/Cesium/Widgets/widgets.css";

其中window.CESIUM_BASE_URL中的路径必须指向上述几个文件的位置

avatar
文章
阅读
粉丝