企业官网建设流程全解析

快速开始(CesiumJS Quickstart – Cesium)

登录官网创建账号并获取Token

快速可视化一个Cesium页面

方法一：在本地创建一个后缀html文件,将以下内容粘贴到html中，并拖到任一浏览器中

方法二：打开vscode新建一个空白文件夹,在命令行下载依赖和插件后运行(所有命令直接问AI即可)

• 新建终端，运行 检查是否安装node.js，初始化npm项目，安装cesium和vite，安装Vite 的 Cesium 插件的命令（直接问AI要）

• 在package.json中加上启动脚本

• 创建项目文件index.html（默认该名字）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cesium NPM Demo</title> <style> html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script type="module" src="/src/main.js"></script> </body> </html>

• 创建src/main.js

import { Viewer, Ion, Cartesian3, Math as CesiumMath, Terrain, createOsmBuildingsAsync, } from "cesium"; import "cesium/Build/Cesium/Widgets/widgets.css"; // 替换为你自己的 token（从 https://ion.cesium.com/tokens 获取） Ion.defaultAccessToken = "你的_token_粘贴在这里"; const viewer = new Viewer("cesiumContainer", { terrain: Terrain.fromWorldTerrain(), }); viewer.camera.flyTo({ destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400), orientation: { heading: CesiumMath.toRadians(0.0), pitch: CesiumMath.toRadians(-15.0), }, }); const buildingTileset = await createOsmBuildingsAsync(); viewer.scene.primitives.add(buildingTileset);

• 创建vite.config.js（在根目录）

import { defineConfig } from "vite"; import cesium from "vite-plugin-cesium"; export default defineConfig({ plugins: [cesium()], });

在命令行运行npm run dev后会给出浏览地址

飞行轨迹实现（只记录思路，代码在官网有）

• 基于方法二（inport from NPM实现）
• 在html创建div容器，实例化viewer（一实例化就会实现cesium场景）
• 已入需要依赖和设置个人Token
• 加入地形以及OSM建筑数据
• 解析轨迹数据与设置时间
• 加入飞机的三维模型

将OSM中的建筑模型替换成自己的建筑模型

• 基于方法二（inport from NPM实现）
• 在html创建div容器，实例化viewer（一实例化就会实现cesium场景）
• 已入需要依赖和设置个人Token
• 加入地形以及OSM建筑数据
• 将json后缀结尾的矢量文件（用来标注位置）上传到Cesium ion 平台的个人资产库中（目的是获取assets ID）
• 添加矢量文件
• 隐藏部分之前OSM中导入的部分三维建筑
• 将三维建筑模型上传到Cesium ion 平台的个人资产库中（该模型如果不含地理位置要自己手动定位）
• 导入自己想要的三维建筑
• 创建button用来切换三维建筑的显示

使用AI去快速创建一个cesium场景应用

安装Agent与vs code

• 在vscode中安装一个claude code插件比较好用
• 推荐B站的大牙大-的教程，可以搞定vs code安装与claude 插件安装，最后呈现效果见下图

安装CesiumJS Agent Skills

在vscode的终端中运行以下命令，注意运行该命令后，可以使用上文已经安装好了对话插件输入检查skill是否已经安装好了的提示词

claude plugin marketplace add CesiumGS/cesiumjs-skills

快速构建的提示词（复制于官网）

Project setup Create a new Vite + React + TypeScript project for a CesiumJS 3D globe app. Use vite-plugin-cesium to handle Cesium's static asset configuration. Initialize package.json, tsconfig, vite.config.ts, and install dependencies. Add the Cesium viewer Create a React component that renders a full-page CesiumJS Viewer. Read the Cesium ion token from a VITE_CESIUM_ION_TOKEN environment variable. Set the initial camera to look at San Francisco from a low angle. Create a .env file with a placeholder for the token. Start the dev server Start the dev server and open the app in my browser.

在给出提示词时，不要试图通过你自己去判断程序的问题所在，你只需复制粘贴终端或控制台报出的问题，或者描述你看到的不符合你期待的现象例如camera并没有对准你想要的地点等，有时候重启和直接截屏相应问题也是一个很好的解决办法。（官网有很多指导你用Agent去生成的案例，可以自己去尝试）