React 18+TS中使用Cesium 1.95

tsconfig.json配置文件说明：

{"compilerOptions": {"target": "ES5",                      // 编译后的 JS 目标版本"lib": ["DOM", "DOM.Iterable", "ES6"], // 编译时可以使用的库（如 DOM API、ES6 特性）"allowJs": true,                      // 允许编译 JavaScript 文件（如遗留的 .js 文件）"skipLibCheck": true,                 // 跳过声明文件（*.d.ts）的类型检查，提高编译速度"esModuleInterop": true,              // 支持 CommonJS/ES Module 互相引用，推荐开启"allowSyntheticDefaultImports": true, // 允许没有 default export 的模块使用 import x from 'y'"strict": true,                       // 启用所有严格类型检查选项（推荐开启）"forceConsistentCasingInFileNames": true, // 强制文件名大小写一致"module": "esnext",                   // 模块系统，通常与打包工具匹配，如 esnext、commonjs"moduleResolution": "node",           // 模块解析策略，通常为 node"resolveJsonModule": true,            // 允许导入 JSON 文件"isolatedModules": true,              // 确保每个文件可独立编译，与 Babel 或 Vite 等工具配合使用"noEmit": true,                       // 不生成编译输出文件，通常由 babel/vite 等工具处理"jsx": "react-jsx",                   // 支持 React JSX，默认是 "react"，React 17+ 推荐 "react-jsx""baseUrl": "./src",                   // 解析非相对模块的基准路径"paths": {                            // 模块路径别名（需配合打包工具使用，如 Vite、webpack）"@/*": ["*"]}},"include": ["src"],                     // 只编译 src 目录下的文件"exclude": ["node_modules", "dist"]     // 排除不需要编译的目录
}

配置项	说明	常用值
target	编译后的 JavaScript 版本	"ES5", "ES6", "ESNext"
lib	包含哪些内置库声明（如 DOM、ES6）	["DOM", "ES6"]
module	模块系统	"commonjs", "esnext", "system"
moduleResolution	模块解析方式	"node"（Node.js 风格）
jsx	如何处理 JSX	"preserve", "react", "react-jsx"（React 17+ 推荐）
strict	是否启用所有严格类型检查选项	true/ false（推荐开启）
esModuleInterop	允许更灵活的 ES 模块与 CommonJS 互操作	true（推荐）
allowSyntheticDefaultImports	允许无 default export 的模块用 import x from 'y'	true
baseUrl	解析非相对路径的基准目录（如 @/components）	"./src"
paths	路径别名映射（需工具配合，如 Vite/Webpack）	{ "@/*": ["src/*"] }
include	指定要编译的文件	["src/**/*"]
exclude	指定要排除的文件	["node_modules", "dist"]
noEmit	不输出编译后的文件（一般由打包工具处理）	true

注意事项

• ​​jsx选项​​：在 React 项目中非常重要。如果是 React 17 以上并使用了新的 JSX 转换，推荐使用 "jsx": "react-jsx"。
• ​​strict模式​​：建议开启，有助于提前发现潜在错误，但可能会增加初期的类型适配成本。
• ​​路径别名 (paths)​​：虽然可以在 tsconfig.json中配置，但通常还需要在打包工具（如 Vite、Webpack）中同步配置才能真正生效。
• ​​noEmit: true​​：表示 TypeScript 只做类型检查，不生成 JS 文件。通常配合 Babel、Vite、Webpack 等工具使用。

总结

项目	说明
​​作用​​	配置 TypeScript 编译器行为，控制类型检查、模块解析、JS 输出等
​​核心配置区​​	compilerOptions定义编译细节，include/exclude定义文件范围
​​React 项目关键配置​​	jsx: "react-jsx", esModuleInterop: true, module: "esnext", strict: true
​​如何配置​​	手动编辑 tsconfig.json或通过 tsc --init初始化后修改

展示一个飞行的飞机（或点）沿轨迹运动：

import { useEffect } from "react";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import "./CesiumCom.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）function CesiumCom() {useEffect(() => {// 初始化Cesium Viewerconst viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "/maps/{z}/{x}/{y}.jpeg", // 瓦片URL模板tilingScheme: new Cesium.WebMercatorTilingScheme(), // 投影方案（Web墨卡托）minimumLevel: 0, // 最小层级maximumLevel: 18, // 最大层级rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), // 覆盖范围}), // 禁用默认的imageryProviderbaseLayerPicker: false, // 禁用底图选择器geocoder: false, //设置搜索框是否可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: true, // 查看器选择模式选择键是否可见navigationHelpButton: false, // 帮助按钮是否可见animation: true, // 播放控制按钮是否可见timeline: true, // 时间轴是否可见fullscreenButton: false, // 全屏按钮是否可见});(viewer.cesiumWidget.creditContainer as HTMLDivElement).style.display = "none"; // 隐藏logo// 创建一个 SampledPositionProperty，用于存储随时间变化的位置const positionProperty = new Cesium.SampledPositionProperty();// 模拟一组时间点和对应的三维笛卡尔坐标（单位：米，相对于地球椭球）// 这里以几个时间点为例，模拟一个物体飞行的轨迹const times: Cesium.JulianDate[] = [];const positions: Cesium.Cartesian3[] = [];// 示例：定义几个时间点上的位置（你可以根据实际数据替换这些坐标和时间）function addPosition(time:string, longitude: number, latitude: number, height: number) {const _time = Cesium.JulianDate.fromIso8601("2024-06-01T" + time);times.push(_time);const _position = Cesium.Cartesian3.fromDegrees(longitude,latitude,height);positions.push(_position);positionProperty.addSample(_time, _position);}// 添加模拟的飞行轨迹点（时间递增，模拟飞行过程）addPosition("10:00:00Z", 116.3974, 39.9093, 1000); // 北京addPosition("10:05:00Z", 117.2008, 39.0842, 1000); // 天津附近addPosition("10:10:00Z", 118.7674, 32.0415, 1000); // 南京附近addPosition("10:15:00Z", 121.4737, 31.2304, 1000); // 上海// 设置起始和结束时间const start = times[0];const stop = times[times.length - 1];viewer.clock.startTime = start.clone();viewer.clock.stopTime = stop.clone();viewer.clock.currentTime = start.clone();viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 到达终点后停止viewer.clock.multiplier = 1.0; // 时间流逝速度，1.0 表示实时，更大的值加速// 创建一个运动的实体（比如一个红色的点）const movingEntity = viewer.entities.add({name: "运动实体",position: positionProperty,point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,heightReference: Cesium.HeightReference.NONE,},// 可选：添加标签label: {text: "飞行器",font: "12pt sans-serif",fillColor: Cesium.Color.WHITE,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,style: Cesium.LabelStyle.FILL_AND_OUTLINE,pixelOffset: new Cesium.Cartesian2(0, -40),},});// 可选：绘制完整的轨迹路径（用 Polyline）viewer.entities.add({name: "轨迹路径",polyline: {positions: positions,width: 2,material: Cesium.Color.YELLOW.withAlpha(0.7),clampToGround: false,},});// 将相机定位到起始点附近（可选）viewer.zoomTo(viewer.entities);}, []);return <div id="cesiumContainer"></div>;
}export default CesiumCom;