尧图网页设计 
快速开始(CesiumJS Quickstart – Cesium)登录官网创建账号并获取Token快速可视化一个Cesium页面方法一在本地创建一个后缀html文件,将以下内容粘贴到html中并拖到任一浏览器中方法二打开vscode新建一个空白文件夹,在命令行下载依赖和插件后运行(所有命令直接问AI即可)新建终端运行 检查是否安装node.js初始化npm项目安装cesium和vite安装Vite 的 Cesium 插件的命令直接问AI要在package.json中加上启动脚本创建项目文件index.html默认该名字!DOCTYPE html html langen head meta charsetutf-8 titleCesium NPM Demo/title style html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /style /head body div idcesiumContainer/div script typemodule src/src/main.js/script /body /html创建src/main.jsimport { 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 Cesiums 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去生成的案例可以自己去尝试 Cesium入门学习记录1
快速开始(CesiumJS Quickstart – Cesium)登录官网创建账号并获取Token快速可视化一个Cesium页面方法一在本地创建一个后缀html文件,将以下内容粘贴到html中并拖到任一浏览器中方法二打开vscode新建一个空白文件夹,在命令行下载依赖和插件后运行(所有命令直接问AI即可)新建终端运行 检查是否安装node.js初始化npm项目安装cesium和vite安装Vite 的 Cesium 插件的命令直接问AI要在package.json中加上启动脚本创建项目文件index.html默认该名字!DOCTYPE html html langen head meta charsetutf-8 titleCesium NPM Demo/title style html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /style /head body div idcesiumContainer/div script typemodule src/src/main.js/script /body /html创建src/main.jsimport { 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 Cesiums 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去生成的案例可以自己去尝试