Skip to main content

Cesium Series - Creating the Earth

阿琛5/1/24Less than 1 minuteGIS Relatedcesium

Reference URL: https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

1. Set Asset Resource Paths

CesiumJS requires hosting some static files on your server, such as web workers and SVG icons. Configure your module folder to copy the following four directories and serve them as static files:

  • node_modules/cesium/Build/Cesium/Workers
  • node_modules/cesium/Build/Cesium/ThirdParty
  • node_modules/cesium/Build/Cesium/Assets
  • node_modules/cesium/Build/Cesium/Widgets

For example, if the service address of Assets/Images/cesium_credit.png is http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png, then the base URL is /static/Cesium/. This requires the following setup:

window.CESIUM_BASE_URL = "/static/Cesium/";

2. Initialize the Map

const DEFAULT_RECTANGLE = Cesium.Rectangle.fromDegrees(110, 40, 116, 37);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = DEFAULT_RECTANGLE; // Set initial camera extent
const viewer = new Cesium.Viewer("container", {
  infoBox: false,
  selectionIndicator: false,
});
// Change the camera view to Tiananmen
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.39145, 39.907325, 4000),
  duration: 0,
});

3. Execution Result

cesium
cesium

AI Translation | AI 翻译

This article was translated from Chinese to English by AI. If there are any inaccuracies, please refer to the original Chinese version.


本文由 AI 辅助从中文翻译为英文。如遇不准确之处，请以中文原版为准。