@kq_npm/client3d_webgl_vue 4.5.55 → 4.5.57

package/heatmap3d/index.js

@@ -12,6 +12,58 @@ return /******/ (function() { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 133:
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  __esModule: function() { return /* reexport */ CustomColorPickervue_type_script_setup_true_lang_js/* __esModule */.B; },
+  "default": function() { return /* binding */ CustomColorPicker; }
+});
+
+// EXTERNAL MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-1.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=script&setup=true&lang=js
+var CustomColorPickervue_type_script_setup_true_lang_js = __webpack_require__(72238);
+;// ./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=script&setup=true&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
+var injectStylesIntoStyleTag = __webpack_require__(85072);
+var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=style&index=0&id=c12195da&scoped=true&lang=scss
+var CustomColorPickervue_type_style_index_0_id_c12195da_scoped_true_lang_scss = __webpack_require__(32939);
+;// ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=style&index=0&id=c12195da&scoped=true&lang=scss
+
+            
+
+var options = {};
+
+options.insert = "head";
+options.singleton = false;
+
+var update = injectStylesIntoStyleTag_default()(CustomColorPickervue_type_style_index_0_id_c12195da_scoped_true_lang_scss/* default */.A, options);
+
+
+
+/* harmony default export */ var heatmap3d_CustomColorPickervue_type_style_index_0_id_c12195da_scoped_true_lang_scss = (CustomColorPickervue_type_style_index_0_id_c12195da_scoped_true_lang_scss/* default */.A.locals || {});
+;// ./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=style&index=0&id=c12195da&scoped=true&lang=scss
+
+// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
+var exportHelper = __webpack_require__(66262);
+;// ./src/webgl/heatmap3d/CustomColorPicker.vue
+
+
+
+;
+
+
+const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.A)(CustomColorPickervue_type_script_setup_true_lang_js/* default */.A, [['__scopeId',"data-v-c12195da"]])
+
+/* harmony default export */ var CustomColorPicker = (__exports__);
+
+/***/ }),
+
 /***/ 8532:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
@@ -32,15 +84,29 @@ var _useGlobalConfig = __webpack_require__(22686);
 //热力图
 
 class Heatmap3dViewModel {
+  // 屏幕事件处理器
+  /**
+   * @description 构造函数，初始化 viewer、配置及鼠标拾取事件
+   * @param {Object} scenceView 三维视图对象
+   * @param {Object} options 配置参数对象
+   */
   constructor(scenceView, options) {
     this._viewer = null;
+    // 三维 viewer 对象
     this._options = null;
+    // 配置参数对象
     this._heatmap = null;
+    // 三维热力图对象
     this._mouseLabel = null;
+    // 鼠标拾取标注对象
     this._language = null;
+    // 语言配置
     this._heatmap2d = null;
+    // 二维热力图对象
     this._heatmap2dCountLayer = null;
+    // 二维热力图影像图层
     this.heatmapData = null;
+    // 热力图源数据
     this._heatmapHandler = null;
     const {
       locale
@@ -67,11 +133,12 @@ class Heatmap3dViewModel {
       visible: false
     });
     // 地图拾取事件，交互展示
-    let that = this;
+    const that = this;
     this._heatmapHandler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.canvas);
     this._heatmapHandler.setInputAction(function (movement) {
       var worldPosition = that._viewer.scene.pickPosition(movement.position);
       if (worldPosition) {
+        // 没有热力图对象或隐藏时不展示标注
         if (!that._heatmap && !that._heatmap2d) return;
         if (!that._options.isShow) return;
         that._mouseLabel.position = worldPosition;
@@ -79,6 +146,7 @@ class Heatmap3dViewModel {
         var lon = Cesium.Math.toDegrees(lonlat.longitude),
           lat = Cesium.Math.toDegrees(lonlat.latitude);
         var val = 0;
+        // 根据当前热力图类型取值
         if (that._options.heatmapType == "3D") {
           val = String(that._heatmap.getValueAt({
             lng: lon,
@@ -97,7 +165,10 @@ class Heatmap3dViewModel {
       }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
   }
-  // 创建三维热力图对象
+  /**
+   * @description 创建三维热力图对象
+   * @param {Array} heatmapData 热力图源数据
+   */
   initHeatmap3d(heatmapData) {
     this._heatmap = new Cesium.Kq3dHeatmap3D({
       xField: 'lng',
@@ -116,6 +187,7 @@ class Heatmap3dViewModel {
     this._viewer.scene.primitives.add(this._heatmap);
     this._heatmap && this._heatmap.setData(heatmapData);
     if (this._heatmap) {
+      // 热力图就绪后飞行至其范围
       this._heatmap.readyPromise.then(() => {
         this._viewer.camera.flyTo({
           destination: this._heatmap._rectangle
@@ -123,7 +195,10 @@ class Heatmap3dViewModel {
       });
     }
   }
-  // 创建二维热力图对象
+  /**
+   * @description 创建二维热力图对象
+   * @param {Array} heatmapData 热力图源数据
+   */
   initHeatmap2d(heatmapData) {
     this._heatmap2d = new Cesium.Kq3dHeatmap2D({
       xField: 'lng',
@@ -136,8 +211,8 @@ class Heatmap3dViewModel {
       gradient: this._options.gradient
     });
     this._heatmap2d.setData(heatmapData);
-    let extent = this._heatmap2d.extent;
-    let pv = new Cesium.SingleTileImageryProvider({
+    const extent = this._heatmap2d.extent;
+    const pv = new Cesium.SingleTileImageryProvider({
       url: this._heatmap2d.toDataURL(),
       rectangle: Cesium.Rectangle.fromDegrees(extent[0], extent[1], extent[2], extent[3])
     });
@@ -155,8 +230,8 @@ class Heatmap3dViewModel {
     if (this._options.gradient) this._heatmap2d.gradient = this._options.gradient;
     if (this._options.radius) this._heatmap2d.radius = this._options.radius;
     if (this._heatmap2dCountLayer) this._viewer.imageryLayers.remove(this._heatmap2dCountLayer, true);
-    let extent = this._heatmap2d.extent;
-    let pv = new Cesium.SingleTileImageryProvider({
+    const extent = this._heatmap2d.extent;
+    const pv = new Cesium.SingleTileImageryProvider({
       url: this._heatmap2d.toDataURL(),
       rectangle: Cesium.Rectangle.fromDegrees(extent[0], extent[1], extent[2], extent[3])
     });
@@ -166,18 +241,26 @@ class Heatmap3dViewModel {
     });
     this._viewer.imageryLayers.add(this._heatmap2dCountLayer);
   }
-  // 设置颜色渲染
+  /**
+   * @description 设置颜色渲染
+   * @param {Object} val 渐变色对象
+   */
   setColorArray(val) {
     this._options.gradient = val;
     if (this._heatmap) this._heatmap.gradient = val;
     if (this._heatmap2d) this.changeHeatmap2d();
   }
-  // 参数改变
+  /**
+   * @description 参数改变
+   * @param {String} key 参数名
+   * @param {*} val 参数值
+   */
   paramsChanged(key, val) {
     this._options[key] = val;
     if (!this._heatmap) return;
     if (!this._heatmap2dCountLayer) return;
     switch (key) {
+      // 切换 3D / 2D 渲染类型
       case "heatmapType":
         this._mouseLabel.setVisible(false);
         if (this._options.heatmapType == "3D") {
@@ -192,6 +275,7 @@ class Heatmap3dViewModel {
           this._heatmap2dCountLayer.show = this._options.isShow;
         }
         break;
+      // 半径调整：关闭动态效果并同步二维图层
       case "radius":
         this._mouseLabel.setVisible(false);
         this._heatmap[key] = Number(val);
@@ -200,6 +284,7 @@ class Heatmap3dViewModel {
         }
         this.changeHeatmap2d();
         break;
+      // 高度调整：关闭动态效果
       case "height":
         this._mouseLabel.setVisible(false);
         this._heatmap[key] = Number(val);
@@ -207,14 +292,17 @@ class Heatmap3dViewModel {
           this._heatmap.dynamic = false;
         }
         break;
+      // 透明度调整
       case "transparents":
         this._heatmap.alpha = Number(val);
         this._heatmap2dCountLayer.alpha = Number(val);
         break;
+      // 高度比率调整
       case "heightRatio":
         this._mouseLabel.setVisible(false);
         this._heatmap.heightRatio = Number(val);
         break;
+      // 显隐切换
       case "isShow":
         if (this._options.heatmapType == "3D") {
           this._heatmap.show = val;
@@ -223,14 +311,17 @@ class Heatmap3dViewModel {
         }
         this._mouseLabel.setVisible(false);
         break;
+      // 是否跟随视角切换
       case "isFollowingPerspective":
         this._heatmap.dynamic = val;
         this._mouseLabel.setVisible(false);
         break;
+      // 是否贴地切换
       case "isGround":
         this._heatmap.clampToGround = val;
         this._mouseLabel.setVisible(false);
         break;
+      // 权重字段切换：重建二维、三维热力图
       case "valueField":
         this.clear();
         if (this.heatmapData) {
@@ -276,6 +367,22 @@ class Heatmap3dViewModel {
 }
 exports["default"] = Heatmap3dViewModel;
 
+/***/ }),
+
+/***/ 19153:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(76314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".cs[data-v-2b614475]{position:absolute;width:10px;cursor:pointer}.cs[data-v-2b614475] .kq-color-picker{display:block}.cs[data-v-2b614475] .kq-color-picker .kq-color-picker__trigger{display:flex;height:8px;width:10px;border:none;border-radius:0}.cs[data-v-2b614475] .kq-color-picker .kq-color-picker__trigger .kq-color-picker__color{border:none;height:8px;width:10px}.cs[data-v-2b614475] .kq-color-picker .kq-color-picker__trigger .kq-color-picker__color .kq-color-picker__color-inner{height:8px;width:10px}.cs[data-v-2b614475] .kq-color-picker .kq-color-picker__trigger .kq-color-picker__color .kq-color-picker__color-inner .kq-color-picker__icon{display:none}.cs[data-v-2b614475] .kq-color-picker .kq-color-picker__mask{display:none}.cs[data-v-2b614475] .kq-color-picker:hover:not(.is-disabled) .kq-color-picker__trigger{border:none}.cs[data-v-2b614475] .kq-color-picker.is-disabled .kq-color-picker__trigger{cursor:pointer}.cs .delete[data-v-2b614475]{display:none;font-size:12px;line-height:normal;text-align:center;margin-left:-16px}.cs:hover .delete[data-v-2b614475]{display:block}.cs .arrow[data-v-2b614475]{width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-bottom:4px solid #d9d9d9}.cs .content[data-v-2b614475]{height:8px;width:10px;border:1px solid #d9d9d9;box-sizing:border-box}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__.A = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 20064:
@@ -302,7 +409,7 @@ Object.defineProperty(exports, "B", ({
 }));
 exports.A = void 0;
 var _vue = __webpack_require__(50154);
-const rangeMin = -5;
+const rangeMin = -5; // 滑块可移动范围最小值
 var _default = exports.A = {
   __name: 'CustomColorPickerSlider',
   props: ["width", "color", "percentage", "id"],
@@ -310,20 +417,25 @@ var _default = exports.A = {
   setup(__props, {
     emit: __emit
   }) {
-    const emit = __emit;
+    const emit = __emit; // 自定义事件：更新百分比、更新颜色、删除色块
     const props = __props;
 
     // eslint-disable-next-line vue/no-setup-props-destructure
-    const initId = props.id;
-    const initColor = (0, _vue.ref)(props.color);
-    const rangeMax = props.width - 5;
-    const position = (0, _vue.ref)(props.percentage / 100 * props.width + rangeMin);
+    const initId = props.id; // 初始id（解构后不再响应式）
+    const initColor = (0, _vue.ref)(props.color); // 当前色块颜色
+
+    const rangeMax = props.width - 5; // 滑块可移动范围最大值
+    const position = (0, _vue.ref)(props.percentage / 100 * props.width + rangeMin); // 滑块当前位置
     const disabled = (0, _vue.ref)(false); // 为了防止在mouseup事件结束后，弹出颜色框
 
-    let offsetX = 0;
+    let offsetX = 0; // 鼠标按下时的偏移量
     let isDragging = false; // 是否拖动
     let mouseDownX = 0; // 通过拖动的距离，判断是拖动还是点击
 
+    /**
+     * @description 鼠标按下事件处理，开始拖动并绑定全局事件
+     * @param {Object} event 鼠标事件
+     */
     function handleMouseDown(event) {
       isDragging = true;
       offsetX = event.clientX - position.value;
@@ -337,7 +449,10 @@ var _default = exports.A = {
       event.preventDefault();
     }
 
-    // 处理MouseMove
+    /**
+     * @description 处理MouseMove，更新滑块位置并通知百分比变化
+     * @param {Object} event 鼠标事件
+     */
     function handleMouseMove(event) {
       if (isDragging) {
         position.value = Math.min(Math.max(event.clientX - offsetX, rangeMin), rangeMax);
@@ -350,6 +465,11 @@ var _default = exports.A = {
         });
       }
     }
+
+    /**
+     * @description 鼠标抬起事件处理，结束拖动并根据移动距离决定是否禁用颜色选择器
+     * @param {Object} event 鼠标事件
+     */
     function handleMouseUp(event) {
       if (isDragging) {
         isDragging = false;
@@ -368,6 +488,11 @@ var _default = exports.A = {
         }, 100);
       }
     }
+
+    /**
+     * @description 更新颜色
+     * @param {String} color 颜色值
+     */
     function updateColor(color) {
       initColor.value = color;
       emit("updateColor", {
@@ -375,11 +500,18 @@ var _default = exports.A = {
         id: initId
       });
     }
+
+    // 删除色块
     function deleteColorSlider() {
       emit("deleteColorSlider", {
         id: initId
       });
     }
+
+    /**
+     * @description 处理滑块点击事件，阻止冒泡
+     * @param {Object} event 鼠标事件
+     */
     function handleClick(event) {
       // 阻止滑块上的点击事件冒泡
       event.stopPropagation();
@@ -410,58 +542,6 @@ var _default = exports.A = {
 
 /***/ }),
 
-/***/ 22586:
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  __esModule: function() { return /* reexport */ CustomColorPickervue_type_script_setup_true_lang_js/* __esModule */.B; },
-  "default": function() { return /* binding */ CustomColorPicker; }
-});
-
-// EXTERNAL MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-1.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=script&setup=true&lang=js
-var CustomColorPickervue_type_script_setup_true_lang_js = __webpack_require__(72238);
-;// ./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=script&setup=true&lang=js
- 
-// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
-var injectStylesIntoStyleTag = __webpack_require__(85072);
-var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=style&index=0&id=b1608504&scoped=true&lang=scss
-var CustomColorPickervue_type_style_index_0_id_b1608504_scoped_true_lang_scss = __webpack_require__(30111);
-;// ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=style&index=0&id=b1608504&scoped=true&lang=scss
-
-            
-
-var options = {};
-
-options.insert = "head";
-options.singleton = false;
-
-var update = injectStylesIntoStyleTag_default()(CustomColorPickervue_type_style_index_0_id_b1608504_scoped_true_lang_scss/* default */.A, options);
-
-
-
-/* harmony default export */ var heatmap3d_CustomColorPickervue_type_style_index_0_id_b1608504_scoped_true_lang_scss = (CustomColorPickervue_type_style_index_0_id_b1608504_scoped_true_lang_scss/* default */.A.locals || {});
-;// ./src/webgl/heatmap3d/CustomColorPicker.vue?vue&type=style&index=0&id=b1608504&scoped=true&lang=scss
-
-// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
-var exportHelper = __webpack_require__(66262);
-;// ./src/webgl/heatmap3d/CustomColorPicker.vue
-
-
-
-;
-
-
-const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.A)(CustomColorPickervue_type_script_setup_true_lang_js/* default */.A, [['__scopeId',"data-v-b1608504"]])
-
-/* harmony default export */ var CustomColorPicker = (__exports__);
-
-/***/ }),
-
 /***/ 22686:
 /***/ (function(module) {
 
@@ -486,7 +566,7 @@ var _Heatmap3dViewModel = _interopRequireDefault(__webpack_require__(8532));
 var _iconsVue = __webpack_require__(29371);
 var _client_icons_vue = __webpack_require__(65698);
 var _message = _interopRequireDefault(__webpack_require__(71323));
-var _CustomColorPicker = _interopRequireDefault(__webpack_require__(22586));
+var _CustomColorPicker = _interopRequireDefault(__webpack_require__(133));
 var _useGlobalConfig = __webpack_require__(22686);
 const _hoisted_1 = {
   class: "kq3d-heatmap-box"
@@ -553,7 +633,7 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       lang,
       locale
     } = (0, _useGlobalConfig.useLocale)();
-    let weightFields = (0, _vue.ref)([]);
+    let weightFields = (0, _vue.ref)([]); // 权重字段列表
     // 获取组件传参
     const props = __props;
 
@@ -599,7 +679,7 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       // 1:预设 2：自定义
       colorRamp: settingParams.colorRamp ?? 0 // 色带索引，0-16
     });
-    let viewModel = null;
+    let viewModel = null; // 热力图视图模型实例
 
     // 组件容器Ref
     let boxRef = (0, _vue.ref)(null);
@@ -607,6 +687,8 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
     // 生成组件默认header
     let headerTemp = (0, _vue.ref)();
     let headerTempRef = (0, _vue.ref)();
+
+    // 组件挂载后初始化位置、监听 header 生成及视图模型
     (0, _vue.onMounted)(() => {
       (0, _util.updatePosition)(boxRef.value, props);
       (0, _vue.watch)(() => props.position, (newVal, oldVal) => {
@@ -637,16 +719,25 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
         headerTemp.value = (0, _util.createHeaderTemp)(boxRef.value, (0, _vue.toRefs)(props), headerTempRef, "webgl.heatmapTitle");
       }
     };
+
+    /**
+     * @description 选择数据文件后更新数据地址
+     * @param {Object} file 上传文件对象
+     */
     function selectData(file) {
       let url = URL.createObjectURL(file.raw);
       formItem.dataPath = url;
     }
-    // 参数改变
+    /**
+     * @description 参数改变时同步至视图模型，并对部分参数联动调整
+     * @param {String} key 变更的参数名
+     */
     function paramsChanged(key) {
       viewModel && viewModel.paramsChanged(key, formItem[key]);
       switch (key) {
         case "radius":
         case "height":
+          // 调整半径或高度时取消跟随视角
           formItem.isFollowingPerspective = false;
           break;
         default:
@@ -662,6 +753,7 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       if (formItem && formItem.dataPath) {
         Cesium.Resource.fetchJson(formItem.dataPath).then(res => {
           if (res && res.features) {
+            // 数据为空给出提示
             if (res.features.length === 0) {
               (0, _message.default)({
                 message: "features " + locale.value.webgl.noDataMessage + "!",
@@ -685,6 +777,7 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
                 }
               });
             });
+            // 取各要素属性的交集作为可选权重字段
             let commonArr = commonValues(bigArray);
             weightFields.value = [locale.value.webgl.noSet].concat(commonArr);
             // if (!formItem.valueField) {
@@ -713,6 +806,11 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
         return;
       }
     }
+    /**
+     * @description 求多个数组的交集
+     * @param {Array} bigArray 二维数组
+     * @returns {Array} 交集数组
+     */
     function commonValues(bigArray) {
       // 如果大数组为空，直接返回空数组
       if (bigArray.length === 0) {
@@ -725,12 +823,17 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       }
       return common;
     }
-    // 获取对象键列表
+    /**
+     * @description 获取对象键列表
+     * @param {Object} obj 属性对象
+     * @returns {Object} 包含 validKeys（合法键列表）和 newObj（键值对象）
+     */
     function getValidKeysAndValues(obj) {
       const validKeys = [];
       const newObj = {};
       for (const key in obj) {
         const value = obj[key];
+        // 仅保留数值且大于 0 的字段
         if (!isNaN(value) && value > 0) {
           validKeys.push(key);
           newObj[key] = value;
@@ -758,6 +861,7 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       }
     });
     const heatColor = (0, _vue.computed)({
+      // 热力图色带渲染对象
       get() {
         if (formItem.colorMode === 1) {
           getCustomColors(colorData.value[formItem.colorRamp]);
@@ -780,6 +884,8 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       });
       heatColor.value = obj;
     }
+
+    // 根据预设色带生成渲染对象
     function onChangeColorRamp() {
       // 固定的开头
       const colors = colorData.value[formItem.colorRamp];
@@ -795,6 +901,12 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
         ...ramp
       };
     }
+
+    /**
+     * @description 由预设色带转换为自定义色块列表
+     * @param {Array} colors 色带颜色数组
+     * @returns {Array} 自定义色块列表
+     */
     function getCustomColors(colors) {
       let custom = [];
       const len = colors.length;
@@ -808,9 +920,15 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
       }
       return custom;
     }
+
+    /**
+     * @description 自定义色块变更时重新组装色带渲染对象
+     * @param {Array} items 色块列表
+     */
     function colorChanged(items) {
       let ramp = {};
       for (let i = 0; i < items.length; i++) {
+        // 百分比为 0 时调整为 1 避免与起始透明色重合
         if (items[i].percentage == 0) {
           items[i].percentage = 1;
         }
@@ -821,10 +939,18 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
         ...ramp
       };
     }
+    /**
+     * @description 生成色带背景样式字符串
+     * @param {Array} colors 色带颜色数组
+     * @returns {String} 背景样式字符串
+     */
     function generateColorStyle(colors) {
       return `background-image: linear-gradient(90deg, ${colors.toString()})`;
     }
-    // 反转色带的颜色
+    /**
+     * @description 反转色带的颜色
+     * @param {Array} colors 色带颜色数组
+     */
     function onClickReverseRamp(colors) {
       colors = colors.reverse();
       onChangeColorRamp();
@@ -1366,7 +1492,7 @@ module.exports = require("@element-plus/icons-vue");
 
 /***/ }),
 
-/***/ 30111:
+/***/ 32939:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(76314);
@@ -1375,7 +1501,7 @@ module.exports = require("@element-plus/icons-vue");
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".gp[data-v-b1608504]{display:flex;flex-direction:column;align-items:flex-start}.gp .palette[data-v-b1608504]{width:257px;height:16px}.gp .csh[data-v-b1608504]{width:257px;height:17.5px;position:relative;cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAATUlEQVQ4T2NkwAH+////HybFyMjIiE0ZVkGQQpBmkB6QGaOaEUHHiByq6CEKCzBcMQLWjCMmcOkBi4NjgSKb8SWS0XjGDB28GYNQrgIAPsNjBG37r7sAAAAASUVORK5CYII=),crosshair !important}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".gp[data-v-c12195da]{display:flex;flex-direction:column;align-items:flex-start}.gp .palette[data-v-c12195da]{width:257px;height:16px}.gp .csh[data-v-c12195da]{width:257px;height:17.5px;position:relative;cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAATUlEQVQ4T2NkwAH+////HybFyMjIiE0ZVkGQQpBmkB6QGaOaEUHHiByq6CEKCzBcMQLWjCMmcOkBi4NjgSKb8SWS0XjGDB28GYNQrgIAPsNjBG37r7sAAAAASUVORK5CYII=),crosshair !important}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__.A = (___CSS_LOADER_EXPORT___);
 
@@ -1394,22 +1520,6 @@ module.exports = require("@babel/runtime/helpers/interopRequireDefault");
 
 module.exports = __WEBPACK_EXTERNAL_MODULE__42975__;
 
-/***/ }),
-
-/***/ 49025:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(76314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
-// Imports
-
-var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, ".cs[data-v-c771bfde]{position:absolute;width:10px;cursor:pointer}.cs[data-v-c771bfde] .kq-color-picker{display:block}.cs[data-v-c771bfde] .kq-color-picker .kq-color-picker__trigger{display:flex;height:8px;width:10px;border:none;border-radius:0}.cs[data-v-c771bfde] .kq-color-picker .kq-color-picker__trigger .kq-color-picker__color{border:none;height:8px;width:10px}.cs[data-v-c771bfde] .kq-color-picker .kq-color-picker__trigger .kq-color-picker__color .kq-color-picker__color-inner{height:8px;width:10px}.cs[data-v-c771bfde] .kq-color-picker .kq-color-picker__trigger .kq-color-picker__color .kq-color-picker__color-inner .kq-color-picker__icon{display:none}.cs[data-v-c771bfde] .kq-color-picker .kq-color-picker__mask{display:none}.cs[data-v-c771bfde] .kq-color-picker:hover:not(.is-disabled) .kq-color-picker__trigger{border:none}.cs[data-v-c771bfde] .kq-color-picker.is-disabled .kq-color-picker__trigger{cursor:pointer}.cs .delete[data-v-c771bfde]{display:none;font-size:12px;line-height:normal;text-align:center;margin-left:-16px}.cs:hover .delete[data-v-c771bfde]{display:block}.cs .arrow[data-v-c771bfde]{width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-bottom:4px solid #d9d9d9}.cs .content[data-v-c771bfde]{height:8px;width:10px;border:1px solid #d9d9d9;box-sizing:border-box}", ""]);
-// Exports
-/* harmony default export */ __webpack_exports__.A = (___CSS_LOADER_EXPORT___);
-
-
 /***/ }),
 
 /***/ 50154:
@@ -1450,6 +1560,58 @@ exports.A = (sfc, props) => {
 };
 
 
+/***/ }),
+
+/***/ 68740:
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  __esModule: function() { return /* reexport */ CustomColorPickerSlidervue_type_script_setup_true_lang_js/* __esModule */.B; },
+  "default": function() { return /* binding */ CustomColorPickerSlider; }
+});
+
+// EXTERNAL MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-1.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=script&setup=true&lang=js
+var CustomColorPickerSlidervue_type_script_setup_true_lang_js = __webpack_require__(22191);
+;// ./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=script&setup=true&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
+var injectStylesIntoStyleTag = __webpack_require__(85072);
+var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=style&index=0&id=2b614475&scoped=true&lang=scss
+var CustomColorPickerSlidervue_type_style_index_0_id_2b614475_scoped_true_lang_scss = __webpack_require__(19153);
+;// ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=style&index=0&id=2b614475&scoped=true&lang=scss
+
+            
+
+var options = {};
+
+options.insert = "head";
+options.singleton = false;
+
+var update = injectStylesIntoStyleTag_default()(CustomColorPickerSlidervue_type_style_index_0_id_2b614475_scoped_true_lang_scss/* default */.A, options);
+
+
+
+/* harmony default export */ var heatmap3d_CustomColorPickerSlidervue_type_style_index_0_id_2b614475_scoped_true_lang_scss = (CustomColorPickerSlidervue_type_style_index_0_id_2b614475_scoped_true_lang_scss/* default */.A.locals || {});
+;// ./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=style&index=0&id=2b614475&scoped=true&lang=scss
+
+// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
+var exportHelper = __webpack_require__(66262);
+;// ./src/webgl/heatmap3d/CustomColorPickerSlider.vue
+
+
+
+;
+
+
+const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.A)(CustomColorPickerSlidervue_type_script_setup_true_lang_js/* default */.A, [['__scopeId',"data-v-2b614475"]])
+
+/* harmony default export */ var CustomColorPickerSlider = (__exports__);
+
 /***/ }),
 
 /***/ 71323:
@@ -1491,7 +1653,7 @@ Object.defineProperty(exports, "B", ({
 exports.A = void 0;
 var _vue = __webpack_require__(50154);
 var _util = __webpack_require__(42975);
-var _CustomColorPickerSlider = _interopRequireDefault(__webpack_require__(99730));
+var _CustomColorPickerSlider = _interopRequireDefault(__webpack_require__(68740));
 const _hoisted_1 = {
   class: "gp"
 };
@@ -1503,16 +1665,17 @@ var _default = exports.A = {
   setup(__props, {
     emit: __emit
   }) {
-    const emit = __emit;
+    const emit = __emit; // 自定义事件：颜色变更
     const props = __props;
 
     // 宽度
-    const items = (0, _vue.ref)(props.data);
-    let backgroundImage = (0, _vue.ref)(updateBackgroundImage());
+    const items = (0, _vue.ref)(props.data); // 色块列表数据
+
+    const backgroundImage = (0, _vue.ref)(updateBackgroundImage()); // 色带条背景样式
 
     // 更新色带条
     function updateBackgroundImage() {
-      let style = [];
+      const style = [];
       for (let i = 0; i < items.value.length; i++) {
         const item = items.value[i];
         style.push(`${item.color} ${item.percentage}%`);
@@ -1520,7 +1683,10 @@ var _default = exports.A = {
       return `background-image: linear-gradient(90deg, ${style.toString()})`;
     }
 
-    // 更新颜色百分比
+    /**
+     * @description 更新颜色百分比
+     * @param {Object} args 包含 percentage（百分比）和 id（色块id）
+     */
     function updatePercentage(args) {
       const {
         percentage,
@@ -1539,7 +1705,10 @@ var _default = exports.A = {
       emit("color-changed", items.value);
     }
 
-    // 更新颜色
+    /**
+     * @description 更新颜色
+     * @param {Object} args 包含 color（颜色值）和 id（色块id）
+     */
     function updateColor(args) {
       const {
         color,
@@ -1558,8 +1727,12 @@ var _default = exports.A = {
       emit("color-changed", items.value);
     }
 
-    // 删除色块
+    /**
+     * @description 删除色块
+     * @param {Object} args 包含 id（色块id）
+     */
     function deleteColorSlider(args) {
+      // 至少保留两个色块
       if (items.value.length <= 2) {
         return;
       }
@@ -1576,7 +1749,10 @@ var _default = exports.A = {
       emit("color-changed", items.value);
     }
 
-    // 增加色块
+    /**
+     * @description 增加色块
+     * @param {Object} event 鼠标点击事件
+     */
     function addColorSlider(event) {
       items.value.push({
         id: (0, _util.guid)(),
@@ -1592,7 +1768,7 @@ var _default = exports.A = {
     return (_ctx, _cache) => {
       return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
         class: "palette",
-        style: (0, _vue.normalizeStyle)((0, _vue.unref)(backgroundImage))
+        style: (0, _vue.normalizeStyle)(backgroundImage.value)
       }, null, 4 /* STYLE */), (0, _vue.createElementVNode)("div", {
         class: "csh",
         onClick: addColorSlider
@@ -1996,65 +2172,13 @@ 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;
 
-/***/ }),
-
-/***/ 99730:
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  __esModule: function() { return /* reexport */ CustomColorPickerSlidervue_type_script_setup_true_lang_js/* __esModule */.B; },
-  "default": function() { return /* binding */ CustomColorPickerSlider; }
-});
-
-// EXTERNAL MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-1.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=script&setup=true&lang=js
-var CustomColorPickerSlidervue_type_script_setup_true_lang_js = __webpack_require__(22191);
-;// ./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=script&setup=true&lang=js
- 
-// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
-var injectStylesIntoStyleTag = __webpack_require__(85072);
-var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag);
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=style&index=0&id=c771bfde&scoped=true&lang=scss
-var CustomColorPickerSlidervue_type_style_index_0_id_c771bfde_scoped_true_lang_scss = __webpack_require__(49025);
-;// ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=style&index=0&id=c771bfde&scoped=true&lang=scss
-
-            
-
-var options = {};
-
-options.insert = "head";
-options.singleton = false;
-
-var update = injectStylesIntoStyleTag_default()(CustomColorPickerSlidervue_type_style_index_0_id_c771bfde_scoped_true_lang_scss/* default */.A, options);
-
-
-
-/* harmony default export */ var heatmap3d_CustomColorPickerSlidervue_type_style_index_0_id_c771bfde_scoped_true_lang_scss = (CustomColorPickerSlidervue_type_style_index_0_id_c771bfde_scoped_true_lang_scss/* default */.A.locals || {});
-;// ./src/webgl/heatmap3d/CustomColorPickerSlider.vue?vue&type=style&index=0&id=c771bfde&scoped=true&lang=scss
-
-// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
-var exportHelper = __webpack_require__(66262);
-;// ./src/webgl/heatmap3d/CustomColorPickerSlider.vue
-
-
-
-;
-
-
-const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.A)(CustomColorPickerSlidervue_type_script_setup_true_lang_js/* default */.A, [['__scopeId',"data-v-c771bfde"]])
-
-/* harmony default export */ var CustomColorPickerSlider = (__exports__);
-
 /***/ })
 
 /******/ 	});