CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization. CesiumJS 是一个 JavaScript 库，用于在 Web 浏览器中创建 3D 地球仪和 2D 地图，无需插件。它使用 WebGL 进行硬件加速图形处理，并且跨平台、跨浏览器，并针对动态数据可视化进行了调整。
Built on open formats, CesiumJS is designed for robust interoperability and scaling for massive datasets. CesiumJS 基于开放格式构建，旨在实现强大的互操作性和对海量数据集的扩展。
Below is a complete HTML page that will load the required JavaScript and CSS files and initialize the scene at San Francisco. If you don’t have a development environment, you can create a file containing this HTML and view it in a browser. 下面是一个完整的 HTML 页面，它将加载所需的 JavaScript 和 CSS 文件并初始化旧金山的场景。如果您没有开发环境，您可以创建一个包含此 HTML 的文件并在浏览器中查看它。
Just replace your_access_token with your Cesium ion access token.
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <!-- Include the CesiumJS JavaScript and CSS files --> <scriptsrc="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Cesium.js"></script> <linkhref="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Widgets/widgets.css"rel="stylesheet"> </head> <body> <divid="cesiumContainer"></div> <scripttype="module"> // Your access token can be found at: https://ion.cesium.com/tokens. // Replace `your_access_token` with your Cesium ion access token. Cesium.Ion.defaultAccessToken = 'your_access_token'; // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID. const viewer = newCesium.Viewer('cesiumContainer', { terrain: Cesium.Terrain.fromWorldTerrain(), }); // Fly the camera to San Francisco at the given longitude, latitude, and height. 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), } }); // Add Cesium OSM Buildings, a global 3D buildings layer. const buildingTileset = awaitCesium.createOsmBuildingsAsync(); viewer.scene.primitives.add(buildingTileset); </script> </div> </body> </html>
If you’re building your application using a module bundler such as Webpack, Parcel, or Rollup, you can install CesiumJS by running: 如果您使用模块捆绑器（例如 Webpack、Parcel 或 Rollup）构建应用程序，则可以通过运行以下命令安装 CesiumJS：
npm install cesium
The code below loads the required JavaScript and CSS files. 以下代码加载所需的 JavaScript 和 CSS 文件。
Just replace your_access_token with your Cesium ion access token. 只需将 your_access_token 替换为您的 Cesium ion 访问令牌即可。
// The URL on your server where CesiumJS's static files are hosted. window.CESIUM_BASE_URL = '/'; import { Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, Terrain, Viewer } from 'cesium'; import "cesium/Build/Cesium/Widgets/widgets.css"; // Your access token can be found at: https://ion.cesium.com/tokens. // Replace `your_access_token` with your Cesium ion access token. Ion.defaultAccessToken = 'your_access_token'; // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID. const viewer = new Viewer('cesiumContainer', { terrain: Terrain.fromWorldTerrain(), }); // Fly the camera to San Francisco at the given longitude, latitude, and height. viewer.camera.flyTo({ destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400), orientation: { heading: CesiumMath.toRadians(0.0), pitch: CesiumMath.toRadians(-15.0), } }); // Add Cesium OSM Buildings, a global 3D buildings layer. const buildingTileset = await createOsmBuildingsAsync(); viewer.scene.primitives.add(buildingTileset);
Configuring CESIUM_BASE_URL
CesiumJS requires a few static files to be hosted on your server, like web workers and SVG icons. Configure your module bundler to copy the following four directories and serve them as static files: CesiumJS 需要在您的服务器上托管一些静态文件，例如 Web Worker 和 SVG 图标。配置您的模块捆绑器以复制以下四个目录并将它们作为静态文件提供：
node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets
The window.CESIUM_BASE_URL global variable must be set before CesiumJS is imported. It must point to the URL where those four directories are served.
