CesiumJS 中文基础教程

最新推荐文章于 2025-05-12 00:00:00 发布

汤怡唯Matilda

最新推荐文章于 2025-05-12 00:00:00 发布

阅读量1k

点赞数 9

本文链接：https://blog.youkuaiyun.com/gitblog_00706/article/details/141006860

版权

CesiumJS 中文基础教程

CesiumJS-tutorialCesiumJS中文基础教程 http://cesiumcn.org/ | http://cesium.coinidea.com/项目地址:https://gitcode.com/gh_mirrors/ce/CesiumJS-tutorial

项目介绍

CesiumJS 是一个用于创建 3D 地球和 2D 地图的开源 JavaScript 库。它支持多种数据格式和渲染技术，适用于地理空间数据可视化。本教程由 hujiulin 维护，提供了从基础到进阶的中文教程，帮助开发者快速上手 CesiumJS。

项目快速启动

环境搭建

首先，确保你已经安装了 Node.js 和 npm。然后，克隆项目仓库并安装依赖：

git clone https://github.com/hujiulin/CesiumJS-tutorial.git
cd CesiumJS-tutorial
npm install

运行示例

进入项目目录后，运行以下命令启动开发服务器：

npm start

这将启动一个本地服务器，并在浏览器中打开示例页面。

第一个示例程序

以下是一个简单的 CesiumJS 示例代码，展示如何在网页中创建一个 3D 地球：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cesium 示例</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = 'YOUR_ACCESS_TOKEN';
        const viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>

请确保替换 YOUR_ACCESS_TOKEN 为你从 Cesium ion 获取的访问令牌。