CesiumJS 封装 - 初始化与配置

一、定义基础参数

首先我们使用 ts 定义 初始化的基本参数，大致涵盖创建 cesium 的相关参数，代码如下：

interface CesiumOptions { container: HTMLElement; //容器animation?: boolean; //是否创建动画小器件，左下角仪表baseLayerPicker?: boolean; //是否显示图层选择器fullscreenButton?: boolean; //是否显示全屏按钮vrButton?: boolean; // 用于切换 VR 模式的单个按钮小部件。geocoder?: boolean; // 是否显示geocoder小器件，右上角查询按钮homeButton?: boolean; //是否显示Home按钮infoBox?: boolean; //是否显示信息框sceneModePicker?: boolean; //是否显示3D/2D选择器selectionIndicator?: boolean; //是否显示选取指示器组件timeline?: boolean; //是否显示时间轴navigationHelpButton?: boolean; //是否显示右上角的帮助按钮showCompass?: boolean; // 是否显示指南针showFrameRate?: boolean; // 是否显示帧率tiandituConfig?: {token: string;mapServer?: boolean; // 影像：是否使用天地图服务national?: boolean;// 是否使用国界线}; // 天地图配置arcGisConfig?: boolean; // ArcGis配置amapConfig?: {mapServer?: boolean; // 影像：是否使用高德地图服务annotation?: boolean;// 是否使用注记};tencentConfig?:{mapServer?: boolean; // 影像：是否使用腾讯服务annotation?: boolean;// 是否使用注记vector?: number;//  是否使用矢量图层  1 表示默认，4 表示黑色矢量图层};skyBox?: [string, string, string, string, string, string]; // 是否显示天空盒customMouseControl?: MouseControllerOptions; // 自定义鼠标控制选项
}

详细参数介绍

参数名	类型/默认值	说明
container	HTMLElement	必填，Cesium 渲染容器，DOM 元素
animation	boolean	是否显示左下角动画仪表（默认为 true）
baseLayerPicker	boolean	是否显示图层选择器（默认为 true）
fullscreenButton	boolean	是否显示全屏按钮（默认为 true）
vrButton	boolean	是否显示 VR 模式切换按钮（默认为 false）
geocoder	boolean	是否显示右上角地理编码查询按钮（默认为 true）
homeButton	boolean	是否显示 Home（回到初始视角）按钮（默认为 true）
infoBox	boolean	是否显示实体信息框（点击实体后弹出）（默认为 true）
sceneModePicker	boolean	是否显示 3D/2D/哥伦布模式切换按钮（默认为 true）
selectionIndicator	boolean	是否显示选中实体的高亮指示器（默认为 true）
timeline	boolean	是否显示时间轴（默认为 true）
navigationHelpButton	boolean	是否显示右上角帮助按钮（默认为 true）
showCompass	boolean	是否显示指南针（默认为 true）
showFrameRate	boolean	是否显示帧率（FPS）（默认为 false）
tiandituConfig	object	天地图服务配置（可选）
├─ token	string	天地图 Token（必填）
├─ mapServer	boolean	是否使用天地图影像服务（默认 false）
└─ national