@kq_npm/client3d_webgl_vue 4.5.56 → 4.5.57

package/windyslicing/index.js

@@ -187,26 +187,52 @@ const Utils = {
   }
 };
 class WindySlicingViewModel {
+  // 当前绘制分组标识
+
+  /**
+   * @description 构造函数，初始化剖切管理对象及事件处理器
+   * @param {Object} scenceView 场景视图对象，包含 _viewer、_layerManager、_drawManager 属性
+   * @param {Object} options 剖切配置参数
+   * @param {Function} callbackParams 回调函数，用于通知外部状态变化
+   */
   constructor(scenceView, options, callbackParams) {
     // 类属性初始化（更清晰的声明）
     this._viewer = null;
+    // 三维viewer对象
     this._layerManager = null;
+    // 图层管理器对象
     this._options = null;
+    // 剖切配置参数对象
     this._windySlicingDrawManager = null;
+    // 绘制管理器对象
     this._windySlicingLayerconfig = null;
+    // 气象剖切图层配置
     this._windySlicingPolylineHandler = null;
+    // 线绘制屏幕事件处理器
     this._isDrawPolyline = false;
+    // 是否正在绘制线
     this._pointSlicingHtmlTag = null;
+    // 点剖切HTML标注对象
     this._volumePrimitives = [];
+    // 体剖切Primitive集合
     this._volumePrimitive = null;
+    // 当前体剖切Primitive
     this._volumePrimitiveVoxels = null;
+    // 体素剖切Primitive
     this._currentVolumeOption = null;
+    // 当前体剖切配置参数
     this._currentVolumePosition = null;
+    // 当前体剖切位置范围
     this._Kq3dWavePrimitive = null;
+    // 三维粒子（风场波浪）对象
     this.callbackParams = null;
+    // 回调参数函数
     this.volumelines = null;
+    // 剖面线数据
     this._language = null;
+    // 当前语言对象
     this._groupName = CONSTS.GROUP_NAME;
+    // 绘制分组名称
     this._currentGroupName = null;
     const {
       locale
@@ -232,6 +258,7 @@ class WindySlicingViewModel {
 
   // 切换剖切模式（逻辑保持，简化条件判断）
   changeSlicingMode() {
+    // 根据样式类型映射对应的剖切处理函数
     const modeMap = {
       '1': () => this._currentVolumePosition && this.windySlicingRectangleSlicing(this._currentVolumePosition),
       '2': () => this._currentVolumePosition && this.windySlicingSurfaceSection(this._currentVolumePosition, this._windySlicingLayerconfig),
@@ -243,7 +270,11 @@ class WindySlicingViewModel {
     handler && handler();
   }
 
-  // 参数切换（拆分大函数，按功能模块化）
+  /**
+   * @description 参数切换（拆分大函数，按功能模块化）
+   * @param {String} key 改变的参数类型标识
+   * @param {*} val 改变的参数值
+   */
   paramsChanged(key, val) {
     if (!this._windySlicingLayerconfig && this._options.mode !== "clear") {
       this._showWarningTip();
@@ -276,7 +307,10 @@ class WindySlicingViewModel {
     const handler = handlerMap[key];
     handler ? handler() : null;
   }
-  // 处理三维粒子参数
+  /**
+   * @description 处理三维粒子参数
+   * @param {String} key 粒子参数类型标识
+   */
   _changParticleParams(key) {
     const that = this;
     // 实例不存在直接退出
@@ -398,7 +432,12 @@ class WindySlicingViewModel {
     });
   }
 
-  // 获取接口数据
+  /**
+   * @description 获取接口数据
+   * @param {String} var1 风场U方向变量名
+   * @param {String} var2 风场V方向变量名
+   * @returns {Promise<Array>} 风场数据数组
+   */
   async getKq3dWaveData(var1, var2) {
     if (!this._windySlicingLayerconfig) return [];
     const rect = JSON.stringify(this._currentVolumePosition);
@@ -463,6 +502,11 @@ class WindySlicingViewModel {
       }
     };
   }
+  /**
+   * @description 将角度矩形转换为弧度矩形
+   * @param {Object} degreeRectangle 角度矩形对象，包含 west/south/east/north
+   * @returns {Object} 弧度矩形对象
+   */
   degreesToRadiansRectangle(degreeRectangle) {
     return {
       west: Cesium.Math.toRadians(degreeRectangle.west),
@@ -471,7 +515,12 @@ class WindySlicingViewModel {
       north: Cesium.Math.toRadians(degreeRectangle.north)
     };
   }
-  // 发送请求
+  /**
+   * @description 发送请求
+   * @param {String} url 请求地址
+   * @param {Object} data 请求数据
+   * @returns {Promise} 请求结果的Promise
+   */
   _getRequest(url, data) {
     return new Promise(resolve => {
       const xhr = new XMLHttpRequest();
@@ -503,7 +552,10 @@ class WindySlicingViewModel {
     this.changeSlicingMode();
   }
 
-  // 处理高度控制切换
+  /**
+   * @description 处理高度控制切换
+   * @param {Array} val 高度值数组
+   */
   _handleAltitudeControlChange(val) {
     this.removeVolumePrimitive();
     if (this._currentVolumePosition) {
@@ -519,7 +571,10 @@ class WindySlicingViewModel {
     }
   }
 
-  // 处理经/纬度剖面切换
+  /**
+   * @description 处理经/纬度剖面切换
+   * @param {String} type 剖面类型：long-经度剖面，lat-纬度剖面
+   */
   _handleSectionChange(type) {
     const primitiveKey = type === 'long' ? '_volumePrimitive1' : '_volumePrimitive2';
     const valueKey = type === 'long' ? 'longSectionValue' : 'latSectionValue';
@@ -537,7 +592,10 @@ class WindySlicingViewModel {
     }
   }
 
-  // 处理轴剖切
+  /**
+   * @description 处理轴剖切
+   * @param {String} axis 剖切轴：x/y/z
+   */
   _handleAxisClipping(axis) {
     if (!this._volumePrimitiveVoxels) return;
     const clipConfig = {
@@ -697,7 +755,13 @@ class WindySlicingViewModel {
     }
   }
 
-  // 生成Z轴显隐数组（复用逻辑）
+  /**
+   * @description 生成Z轴显隐数组（复用逻辑）
+   * @param {Array} zList Z轴值数组
+   * @param {Boolean} isEnable 是否启用
+   * @param {Number} targetIndex 目标索引
+   * @returns {Array} Z轴显隐数组
+   */
   _generateZVisibles(zList, isEnable, targetIndex) {
     if (!zList || zList.length === 0) return [];
     return zList.map((_, index) => {
@@ -784,7 +848,10 @@ class WindySlicingViewModel {
     }
   }
 
-  // 两点绘制线结果
+  /**
+   * @description 两点绘制线结果
+   * @param {Function} callback 绘制完成回调函数
+   */
   drawPolylineHandler(callback) {
     let activeShapePoints = [];
     this._windySlicingPolylineHandler.setInputAction(event => {
@@ -829,7 +896,13 @@ class WindySlicingViewModel {
     this._sendPointRequest(requestData, unit, cartographic);
   }
 
-  // 构建点剖切请求数据
+  /**
+   * @description 构建点剖切请求数据
+   * @param {Number} X 经度
+   * @param {Number} Y 纬度
+   * @param {Object} layer 图层对象
+   * @returns {Object} 请求参数对象
+   */
   _buildPointRequestData(X, Y, layer) {
     const baseData = {
       collectionName: this._windySlicingLayerconfig?.params?.layer,
@@ -859,7 +932,12 @@ class WindySlicingViewModel {
     return baseData;
   }
 
-  // 发送点剖切请求
+  /**
+   * @description 发送点剖切请求
+   * @param {Object} data 请求数据
+   * @param {String} unit 单位
+   * @param {Object} cartographic 拾取点坐标
+   */
   _sendPointRequest(data, unit, cartographic) {
     const url = this._windySlicingLayerconfig?.url.replaceAll("/wmts", "").replace("/image", "/image/identify");
     const xhr = new XMLHttpRequest();
@@ -870,7 +948,12 @@ class WindySlicingViewModel {
     xhr.send(JSON.stringify(data));
   }
 
-  // 处理点剖切响应
+  /**
+   * @description 处理点剖切响应
+   * @param {XMLHttpRequest} xhr 请求对象
+   * @param {String} unit 单位
+   * @param {Object} cartographic 拾取点坐标
+   */
   _handlePointResponse(xhr, unit, cartographic) {
     if (xhr.status < 200 || xhr.status >= 300) {
       console.error('Request error:', xhr.statusText);
@@ -884,7 +967,12 @@ class WindySlicingViewModel {
     this.setWindySlicingPointData(`${val}&nbsp;&nbsp;${unit}`, cartographic);
   }
 
-  // 格式化点剖切数值（拆分复杂逻辑）
+  /**
+   * @description 格式化点剖切数值（拆分复杂逻辑）
+   * @param {String} layerName 图层名称
+   * @param {Array} getAllVal 获取到的所有值数组
+   * @returns {*} 格式化后的数值或文本
+   */
   _formatPointValue(layerName, getAllVal) {
     // 风场处理
     if (CONSTS.WIND_LAYERS.includes(layerName)) {
@@ -912,7 +1000,13 @@ class WindySlicingViewModel {
     return Number(getAllVal[0].value);
   }
 
-  // 计算风向
+  /**
+   * @description 计算风向
+   * @param {Number} u U方向分量
+   * @param {Number} v V方向分量
+   * @param {Number} dir 方向角度（当u、v为空时使用）
+   * @returns {Object} 包含风向文本和风速的对象
+   */
   direction(u, v, dir) {
     let angles, speed;
     if (u && v) {
@@ -928,7 +1022,11 @@ class WindySlicingViewModel {
     };
   }
 
-  // 获取风向文本（简化条件判断）
+  /**
+   * @description 获取风向文本（简化条件判断）
+   * @param {Number} angle 角度值
+   * @returns {String} 风向文本
+   */
   _getDirectionText(angle) {
     const directionRanges = [{
       min: 15,
@@ -979,7 +1077,11 @@ class WindySlicingViewModel {
     });
   }
 
-  // 构建点标注HTML（抽离静态内容）
+  /**
+   * @description 构建点标注HTML（抽离静态内容）
+   * @param {String} val 显示的数值文本
+   * @returns {String} HTML字符串
+   */
   _buildPointHtml(val) {
     return `<div class="pickClass">
       <div style="display: block;position: absolute;left: 0px;right: 0;width: 2px;height: 140px;background: rgba(68,65,65,.84)">
@@ -988,7 +1090,11 @@ class WindySlicingViewModel {
     </div>`;
   }
 
-  // 重构剖切参数
+  /**
+   * @description 重构剖切参数
+   * @param {Object} [params] 自定义参数
+   * @returns {Object} 体剖切Provider对象
+   */
   getSlicingParams(params = {}) {
     if (!this._windySlicingLayerconfig) return;
     const colors = this._windySlicingLayerconfig?.colors ?? [];
@@ -1007,7 +1113,12 @@ class WindySlicingViewModel {
     return new Cesium.Kq3dGridVolumeProvider(this._currentVolumeOption);
   }
 
-  // 构建基础Volume配置
+  /**
+   * @description 构建基础Volume配置
+   * @param {String} img 颜色表生成的图片
+   * @param {Array} ranges 属性范围数组
+   * @returns {Object} 基础配置对象
+   */
   _buildVolumeOption(img, ranges) {
     return {
       viewer: this._viewer,
@@ -1097,7 +1208,11 @@ class WindySlicingViewModel {
     this.setViewEntity(rect);
   }
 
-  // 获取面剖切Z轴值
+  /**
+   * @description 获取面剖切Z轴值
+   * @param {Object} data 图层配置
+   * @returns {Array} 排序后的Z轴值数组
+   */
   _getSurfaceSectionZValues(data) {
     let zValues = JSON.parse(JSON.stringify(data.zValues));
     if (!zValues || zValues.length === 0) {
@@ -1106,12 +1221,20 @@ class WindySlicingViewModel {
     return data.unit !== CONSTS.REVERSE_UNIT ? zValues.sort((a, b) => a - b) : zValues.sort((a, b) => b - a);
   }
 
-  // 获取面剖切索引
+  /**
+   * @description 获取面剖切索引
+   * @param {Object} data 图层配置
+   * @param {Array} zValues Z轴值数组
+   * @returns {Number} 面剖切索引
+   */
   _getSurfaceSectionIndex(data, zValues) {
     return data.unit !== CONSTS.REVERSE_UNIT ? 0 : zValues.length - 1;
   }
 
-  // 创建面剖切辅助线
+  /**
+   * @description 创建面剖切辅助线
+   * @param {Array} zValues Z轴值数组
+   */
   _createSurfaceSectionLines(zValues) {
     this.volumelines = this.createXYVolume(this.getRectangle(this._currentVolumePosition));
     const options1 = {
@@ -1136,13 +1259,21 @@ class WindySlicingViewModel {
     }
   }
 
-  // 转换为Cesium Rectangle
+  /**
+   * @description 转换为Cesium Rectangle
+   * @param {Object|String} rect 矩形四至对象或JSON字符串
+   * @returns {Object} Cesium Rectangle对象
+   */
   getRectangle(rect) {
     const rectObj = typeof rect === 'string' ? JSON.parse(rect) : rect;
     return new Cesium.Rectangle(Cesium.Math.toRadians(rectObj.minX), Cesium.Math.toRadians(rectObj.minY), Cesium.Math.toRadians(rectObj.maxX), Cesium.Math.toRadians(rectObj.maxY));
   }
 
-  // 创建XY轴剖面线
+  /**
+   * @description 创建XY轴剖面线
+   * @param {Object} rectangle Cesium Rectangle对象
+   * @returns {Object} 包含边界线和剖面线的对象
+   */
   createXYVolume(rectangle) {
     // 获取矩形四个角点
     const southwest = Cesium.Rectangle.southwest(rectangle);
@@ -1196,7 +1327,13 @@ class WindySlicingViewModel {
     });
   }
 
-  // 生成值颜色数组
+  /**
+   * @description 生成值颜色数组
+   * @param {Number} start 起始值
+   * @param {Number} end 结束值
+   * @param {String} color CSS颜色字符串
+   * @returns {Array} 值颜色数组
+   */
   getValueColor(start, end, color) {
     const arr = [];
     let num = start;
@@ -1288,7 +1425,10 @@ class WindySlicingViewModel {
     this.callbackParams && this.callbackParams("bodyDissectionZClipping", this._options.enableLayerings);
   }
 
-  // 设置entity视角缩放
+  /**
+   * @description 设置entity视角缩放
+   * @param {Object} rect 矩形四至对象
+   */
   setViewEntity(rect) {
     // 原逻辑注释保留，如需启用可取消注释
     // const rectangle = new Cesium.Rectangle(
@@ -1317,7 +1457,11 @@ class WindySlicingViewModel {
     // }, CONSTS.FLY_TO_DURATION);
   }
 
-  // 根据颜色表生成图片
+  /**
+   * @description 根据颜色表生成图片
+   * @param {Array} colors 颜色数组
+   * @returns {String} 图片的dataURL
+   */
   generateImage(colors) {
     const canvas = document.createElement('canvas');
     canvas.width = CONSTS.CANVAS_SIZE.width;
@@ -1352,6 +1496,7 @@ class WindySlicingViewModel {
       this._windySlicingDrawManager.clearDrawGroup(this._groupName);
     }
   }
+  // 销毁三维粒子实例
   destroyedKq3dWave() {
     if (this._Kq3dWavePrimitive) {
       if (this._Kq3dWavePrimitive.particleSystem) {
@@ -1536,14 +1681,14 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       locale
     } = (0, _useGlobalConfig.useLocale)();
     const props = __props;
-    let enableLayerings = (0, _vue.ref)([]);
-    let unit = (0, _vue.ref)("m");
-    let unitValue = (0, _vue.ref)("");
-    let showSlicingSetting = (0, _vue.ref)(false);
-    let showWindySlicing = (0, _vue.ref)(props.show);
-    const scrollcar_ref = (0, _vue.ref)();
-    const renderbox_ref = (0, _vue.ref)();
-    const isShowParticle3D = (0, _vue.ref)(true);
+    let enableLayerings = (0, _vue.ref)([]); // 分层数据数组
+    let unit = (0, _vue.ref)("m"); // 单位
+    let unitValue = (0, _vue.ref)(""); // 单位值
+    let showSlicingSetting = (0, _vue.ref)(false); // 是否显示剖切设置
+    let showWindySlicing = (0, _vue.ref)(props.show); // 是否显示气象剖切组件
+    const scrollcar_ref = (0, _vue.ref)(); // 滚动容器Ref
+    const renderbox_ref = (0, _vue.ref)(); // 渲染容器Ref
+    const isShowParticle3D = (0, _vue.ref)(true); // 是否显示三维粒子选项
     let formItem = (0, _vue.reactive)({
       collapseValue: props.settingParams?.collapseValue ?? "setting",
       mode: props.settingParams?.mode ?? "",
@@ -1627,13 +1772,14 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
     // 创建深度复制
     let formItemDef = JSON.parse(JSON.stringify(formItem));
     delete formItemDef.collapseValue;
-    const layeredDisplayMax = (0, _vue.ref)(0);
-    let viewModel = null;
+    const layeredDisplayMax = (0, _vue.ref)(0); // 分层显示最大索引
+
+    let viewModel = null; // 气象剖切视图模型对象
     // 组件容器Ref
     let boxRef = (0, _vue.ref)(null);
     // 生成组件默认header
-    let headerTemp = (0, _vue.ref)();
-    let headerTempRef = (0, _vue.ref)();
+    let headerTemp = (0, _vue.ref)(); // 动态生成的Header组件
+    let headerTempRef = (0, _vue.ref)(); // Header组件Ref
     (0, _vue.onMounted)(() => {
       (0, _util.updatePosition)(boxRef.value, props);
       (0, _vue.watch)(() => props.position, (newVal, oldVal) => {
@@ -1677,11 +1823,20 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       showWindySlicing.value = true;
       viewModel && viewModel.getWindySlicingLayer(data?.guid ?? "");
     };
+    /**
+     * @description 切换气象图层
+     * @param {Object} data 图层配置对象
+     */
     const changeWindyLayer = data => {
       clear();
       Object.assign(formItem, formItemDef);
       viewModel && viewModel.getWindySlicingLayer(null, data);
     };
+    /**
+     * @description 回调参数处理，根据key更新组件状态
+     * @param {String} key 回调类型标识
+     * @param {*} val 回调值
+     */
     function callbackParams(key, val) {
       switch (key) {
         case "showSlicingSetting":
@@ -1734,24 +1889,35 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
           break;
       }
     }
-    //切换类型
+    /**
+     * @description 切换绘制类型
+     * @param {String} mode 绘制模式：point/line/polygon/delete
+     */
     function changeMode(mode) {
       if (!viewModel) return;
       showSlicingSetting.value = false;
       formItem.mode = mode;
       viewModel._options.mode = formItem.mode;
       viewModel && viewModel.paramsChanged("mode");
+      // 删除模式时重置参数
       if (mode == "delete") {
         Object.assign(formItem, formItemDef);
       }
     }
+    // 应用剖切样式
     function applicationClick() {
       paramsChanged("styleType");
     }
+
+    // 应用分层显示配置
     function applicationLayeredDisplayClick() {
       paramsChanged("changParticleParams", "layeredDisplay");
     }
-    // 参数切换事件
+    /**
+     * @description 参数切换事件
+     * @param {String} key 改变的参数类型标识
+     * @param {*} val 改变的参数值
+     */
     function paramsChanged(key, val) {
       if (!viewModel) return;
       viewModel._options[key] = formItem[key];
@@ -1809,20 +1975,28 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       formItem.bodyDissectionZClippingMax = 10;
       Object.assign(viewModel._options, formItem);
     }
+    /**
+     * @description 根据Z轴值更新剖面参数范围
+     * @param {Array} gdzValues Z轴值数组
+     */
     function changeParams(gdzValues) {
       formItem.heightSectionValueMax = gdzValues.length;
+      // 根据单位判断高度剖面值
       if (unit.value != "hpa") {
         formItem.heightSectionValue = 1;
       } else {
         formItem.heightSectionValue = gdzValues.length;
       }
       if (!viewModel?.volumelines) return;
+      // 计算经度剖面滑动条范围
       let jdValue = Math.abs(viewModel?.volumelines.line1[0].longitude - viewModel?.volumelines.line1[1].longitude);
       jdValue = jdValue.toFixed(3);
       formItem.longSectionValueStep = jdValue / 100;
       formItem.longSectionValueMin = -(jdValue / 2);
       formItem.longSectionValueMax = jdValue / 2;
       formItem.longSectionValue = 0;
+
+      // 计算纬度剖面滑动条范围
       let wdValue = Math.abs(viewModel?.volumelines.line4[0].latitude - viewModel?.volumelines.line4[1].latitude);
       wdValue = wdValue.toFixed(3);
       formItem.latSectionValueStep = wdValue / 100;
@@ -1831,15 +2005,24 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       formItem.latSectionValue = 0;
       Object.assign(viewModel._options, formItem);
     }
+    // 清除剖切结果
     function clear() {
       showSlicingSetting.value = false;
       viewModel && viewModel.clear();
     }
-    // 显示提示信息
+    /**
+     * @description 显示提示信息
+     * @param {Number} val 滑动条值
+     * @returns {String} 提示文本
+     */
     function formatTooltip(val) {
       return enableLayerings.value[val - 1] + " " + unit.value;
     }
-    // 显示提示信息
+    /**
+     * @description 显示提示信息
+     * @param {Number} val 滑动条值
+     * @returns {String} 提示文本
+     */
     function formatTooltips(val) {
       return val + " " + unitValue.value;
     }
@@ -1853,12 +2036,17 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
         color: "#fdfd28"
       });
     };
+    // 添加分层显示项
     const addLayeredDisplay = () => {
       formItem.layeredDisplay.push({
         value: 0,
         color: "#fdfd28"
       });
     };
+    /**
+     * @description 删除分层显示项
+     * @param {Number} index 删除项的索引
+     */
     const handleDeleteLayeredDisplay = index => {
       formItem.layeredDisplay.splice(index, 1);
     };
@@ -3036,11 +3224,11 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.kq_npm_client_leaflet_vue = exports.kq_npm_client_common_vue = exports.kq_npm_client3d_webgl_vue = void 0;
-let kq_npm_client_common_vue = exports.kq_npm_client_common_vue = window.kq_npm_client_common_vue = window.kq_npm_client_common_vue || {};
+const kq_npm_client_common_vue = exports.kq_npm_client_common_vue = window.kq_npm_client_common_vue = window.kq_npm_client_common_vue || {};
 __webpack_require__.g.kq_npm_client_common_vue = kq_npm_client_common_vue;
-let kq_npm_client_leaflet_vue = exports.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue || {};
+const kq_npm_client_leaflet_vue = exports.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue || {};
 __webpack_require__.g.kq_npm_client_leaflet_vue = kq_npm_client_leaflet_vue;
-let kq_npm_client3d_webgl_vue = exports.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue || {};
+const kq_npm_client3d_webgl_vue = exports.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue || {};
 __webpack_require__.g.kq_npm_client3d_webgl_vue = kq_npm_client3d_webgl_vue;
 
 /***/ })

package/wireframesketch/index.js

@@ -66,6 +66,10 @@ var _message = _interopRequireDefault(__webpack_require__(71323));
 
 class WireframeSketchViewModel {
   // 草图模式显示
+  /**
+   * @description 构造函数，初始化线框模式管理对象
+   * @param {Object} scenceView 场景视图对象，包含 _viewer 属性
+   */
   constructor(scenceView) {
     this._viewer = null;
     // 三维viewer对象
@@ -77,9 +81,15 @@ class WireframeSketchViewModel {
       viewer: this._viewer
     }); //声明线框模式类
   }
+
+  /**
+   * @description 根据渲染模式切换线框/草图/纹理显示
+   * @param {String} key 渲染模式标识：1-线框渲染，2-草图渲染，3-纹理渲染
+   */
   changeFrameRender(key) {
     switch (key) {
       case "1":
+        // 线框渲染模式：设置线框类型并移除已有的草图效果
         this._wireFrame.type = 1;
         if (this._sketch) {
           this._viewer.effects.remove(this._sketch);
@@ -87,6 +97,7 @@ class WireframeSketchViewModel {
         }
         break;
       case "2":
+        // 草图渲染模式：关闭线框并创建草图效果
         this._wireFrame.type = 0;
         if (!this._sketch) {
           this._sketch = new window.Cesium.Kq3dSketch({
@@ -96,6 +107,7 @@ class WireframeSketchViewModel {
         }
         break;
       case "3":
+        // 纹理渲染模式：关闭线框并移除已有的草图效果
         this._wireFrame.type = 0;
         if (this._sketch) {
           this._viewer.effects.remove(this._sketch); // 移除草图模式
@@ -243,9 +255,9 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       lang,
       locale
     } = (0, _useGlobalConfig.useLocale)();
-    let viewModel = null;
-    let ref_box = (0, _vue.ref)();
-    let checkbox_data = (0, _vue.ref)(["2"]);
+    let viewModel = null; // 视图模型对象
+    let ref_box = (0, _vue.ref)(); // 内容容器Ref
+    let checkbox_data = (0, _vue.ref)(["2"]); // 当前选中的渲染模式复选框值
 
     // 获取组件传参
     const props = __props;
@@ -253,8 +265,9 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
     let boxRef = (0, _vue.ref)(null);
 
     // 生成组件默认header
-    let headerTemp = (0, _vue.ref)();
-    let headerTempRef = (0, _vue.ref)();
+    let headerTemp = (0, _vue.ref)(); // 动态生成的Header组件
+    let headerTempRef = (0, _vue.ref)(); // Header组件Ref
+
     (0, _vue.onMounted)(() => {
       (0, _util.updatePosition)(boxRef.value, props);
       (0, _vue.watch)(() => props.position, (newVal, oldVal) => {
@@ -284,6 +297,10 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
         headerTemp.value = (0, _util.createHeaderTemp)(boxRef.value, (0, _vue.toRefs)(props), headerTempRef, 'webgl.wireFrameSketch');
       }
     };
+    /**
+     * @description 切换渲染模式
+     * @param {String} val 渲染模式标识：1-线框渲染，2-草图渲染，3-纹理渲染
+     */
     function onChangeFrameRender(val) {
       checkbox_data.value = [];
       checkbox_data.value.push(val);
@@ -410,11 +427,11 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.kq_npm_client_leaflet_vue = exports.kq_npm_client_common_vue = exports.kq_npm_client3d_webgl_vue = void 0;
-let kq_npm_client_common_vue = exports.kq_npm_client_common_vue = window.kq_npm_client_common_vue = window.kq_npm_client_common_vue || {};
+const kq_npm_client_common_vue = exports.kq_npm_client_common_vue = window.kq_npm_client_common_vue = window.kq_npm_client_common_vue || {};
 __webpack_require__.g.kq_npm_client_common_vue = kq_npm_client_common_vue;
-let kq_npm_client_leaflet_vue = exports.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue || {};
+const kq_npm_client_leaflet_vue = exports.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue || {};
 __webpack_require__.g.kq_npm_client_leaflet_vue = kq_npm_client_leaflet_vue;
-let kq_npm_client3d_webgl_vue = exports.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue || {};
+const kq_npm_client3d_webgl_vue = exports.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue || {};
 __webpack_require__.g.kq_npm_client3d_webgl_vue = kq_npm_client3d_webgl_vue;
 
 /***/ })