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 Viewer
const 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), // 覆盖范围
}), // 禁用默认的imageryProvider
baseLayerPicker: 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;