@kq_npm/client3d_webgl_vue 3.0.7-beta → 3.0.9-beta

package/scenceview/index.js

@@ -184,183 +184,271 @@ class AddDataViewModel {
     this._layerManager = scenceView._layerManager;
     this._geojsonStyle.billboard.image = options.billboardImage;
     this._language = scenceView._language;
+    this._geometryServerUrl = options.geometryServerUrl;
+    this._geometryServerToken = options.geometryServerToken;
   } //解析文件
 
 
-  parseFile(file, removeFile, cb) {
-    var reader = new FileReader();
-    reader.readAsText(file); //文本
-    //readAsDataURL(file);  //base64 图片
-    //readAsArrayBuffer(file); //原始二进制数据
-    //readAsBinaryString(file);//二进制字符串
-    //reader.readAsBinaryString(file);
-
+  parseFile(file, cb) {
     var that = this;
-
-    reader.onload = function (event) {
-      var ret = event.target.result;
+    return new Promise((resolve, reject) => {
       var ext = file.name.replace(/.+\./, "").toLowerCase(); //文件扩展名
 
       var name = file.name.replace(/(.*\/)*([^.]+).*/gi, "$2"); //文件名
 
-      switch (ext) {
-        case "json":
-        case "geojson":
-        case "topojson":
-          ret = ret.replace(/(^\s*)|(\s*$)/, "");
-          ret = ret.substring(ret.indexOf("{"));
+      if (ext === "zip") {
+        (0,util_.uploadSHP)(that._geometryServerUrl, file, that._geometryServerToken, null, function (res) {
+          if (res) {
+            if (res.srs) {
+              //返回的geojson数据已经做了处理,返回数据坐标系为4326
+              delete res.srs;
+            }
 
-          try {
-            var data = JSON.parse(ret);
+            var ds = new Cesium.Kq3dGeoJsonDataSource(name);
+            ds.load(res, that._geojsonStyle).then(ds => {
+              ds.entities.values.forEach(entity => {
+                if (entity.polygon) {
+                  entity.polyline = {
+                    positions: entity.polygon.hierarchy._value.positions,
+                    width: that._geojsonStyle.polygon.outlineWidth,
+                    material: that._geojsonStyle.polygon.outlineColor
+                  };
+                }
+              });
 
-            if (typeof data == "object" && data) {
-              ret = data;
-            }
-          } catch (e) {}
+              that._viewer.dataSources.add(ds);
 
-          var ds = new Cesium.Kq3dGeoJsonDataSource(name);
-          ds.load(ret, that._geojsonStyle).then(ds => {
-            ds.entities.values.forEach(entity => {
-              if (entity.polygon) {
-                entity.polyline = {
-                  positions: entity.polygon.hierarchy._value.positions,
-                  width: that._geojsonStyle.polygon.outlineWidth,
-                  material: that._geojsonStyle.polygon.outlineColor
-                };
-              }
+              ds.autoAvoid(that._viewer);
+
+              that._viewer.flyTo(ds);
+
+              resolve("success");
+              var layer = {
+                guid: ds.guid,
+                name: name,
+                visible: true,
+                serverType: "datasource",
+                lsType: "ls"
+              };
+
+              that._layerManager.addTempLayerNode(layer);
+
+              cb && cb(layer);
             });
+          } else {
+            reject(file.name + " service parse error.");
+            cb && cb("error");
+          }
+        });
+      } else if (ext === "txt") {
+        let dataUrl = that._geometryServerUrl + (that._geometryServerToken ? "?ua_token=" + that._geometryServerToken : "");
+        (0,util_.readTxT)(file, dataUrl, "4326", res => {
+          if (res) {
+            var ds = new Cesium.Kq3dGeoJsonDataSource(name);
+            ds.load(res, that._geojsonStyle).then(ds => {
+              ds.entities.values.forEach(entity => {
+                if (entity.polygon) {
+                  entity.polyline = {
+                    positions: entity.polygon.hierarchy._value.positions,
+                    width: that._geojsonStyle.polygon.outlineWidth,
+                    material: that._geojsonStyle.polygon.outlineColor
+                  };
+                }
+              });
 
-            that._viewer.dataSources.add(ds);
+              that._viewer.dataSources.add(ds);
 
-            ds.autoAvoid(that._viewer);
+              ds.autoAvoid(that._viewer);
 
-            that._viewer.flyTo(ds);
+              that._viewer.flyTo(ds);
 
-            var layer = {
-              guid: ds.guid,
-              name: name,
-              visible: true,
-              serverType: "datasource",
-              lsType: "ls"
-            };
+              resolve("success");
+              var layer = {
+                guid: ds.guid,
+                name: name,
+                visible: true,
+                serverType: "datasource",
+                lsType: "ls"
+              };
 
-            that._layerManager.addTempLayerNode(layer);
+              that._layerManager.addTempLayerNode(layer);
 
-            cb && cb(layer);
-          });
-          break;
+              cb && cb(layer);
+            });
+          } else {
+            reject(file.name + " service parse error.");
+          }
+        });
+      } else {
+        var reader = new FileReader();
+        reader.readAsText(file); //文本
+        //readAsDataURL(file);  //base64 图片
+        //readAsArrayBuffer(file); //原始二进制数据
+        //readAsBinaryString(file);//二进制字符串
+        //reader.readAsBinaryString(file);
+
+        reader.onload = function (event) {
+          var ret = event.target.result;
+
+          switch (ext) {
+            case "json":
+            case "geojson":
+            case "topojson":
+              ret = ret.replace(/(^\s*)|(\s*$)/, "");
+              ret = ret.substring(ret.indexOf("{"));
+
+              try {
+                var data = JSON.parse(ret);
+
+                if (typeof data == "object" && data) {
+                  ret = data;
+                }
+              } catch (e) {}
+
+              var ds = new Cesium.Kq3dGeoJsonDataSource(name);
+              ds.load(ret, that._geojsonStyle).then(ds => {
+                ds.entities.values.forEach(entity => {
+                  if (entity.polygon) {
+                    entity.polyline = {
+                      positions: entity.polygon.hierarchy._value.positions,
+                      width: that._geojsonStyle.polygon.outlineWidth,
+                      material: that._geojsonStyle.polygon.outlineColor
+                    };
+                  }
+                });
 
-        case "kml":
-          ret = ret.replace(/(^\s*)|(\s*$)/, "");
-          var options = {
-            name: name,
-            camera: that._viewer.scene.camera,
-            canvas: that._viewer.scene.canvas
-          };
-          var ds = new Cesium.KmlDataSource(options);
-          var data = new Blob([ret], {
-            type: "text/xml"
-          });
-          ds.load(data).then(ds => {
-            that._viewer.dataSources.add(ds);
+                that._viewer.dataSources.add(ds);
 
-            that._viewer.flyTo(ds);
+                ds.autoAvoid(that._viewer);
 
-            var layer = {
-              guid: ds.guid,
-              name: name,
-              visible: true,
-              serverType: "datasource",
-              lsType: "ls"
-            };
+                that._viewer.flyTo(ds);
 
-            that._layerManager.addTempLayerNode(layer);
+                resolve("success");
+                var layer = {
+                  guid: ds.guid,
+                  name: name,
+                  visible: true,
+                  serverType: "datasource",
+                  lsType: "ls"
+                };
 
-            cb && cb(layer);
-          });
-          break;
+                that._layerManager.addTempLayerNode(layer);
 
-        case "kmz":
-          var options = {
-            name: name,
-            camera: that._viewer.scene.camera,
-            canvas: that._viewer.scene.canvas
-          };
-          var ds = new Cesium.KmlDataSource(options);
-          ds.load(file).then(ds => {
-            that._viewer.dataSources.add(ds);
+                cb && cb(layer);
+              });
+              break;
 
-            that._viewer.flyTo(ds);
+            case "kml":
+              ret = ret.replace(/(^\s*)|(\s*$)/, "");
+              var options = {
+                name: name,
+                camera: that._viewer.scene.camera,
+                canvas: that._viewer.scene.canvas
+              };
+              var ds = new Cesium.KmlDataSource(options);
+              var data = new Blob([ret], {
+                type: "text/xml"
+              });
+              ds.load(data).then(ds => {
+                that._viewer.dataSources.add(ds);
 
-            var layer = {
-              guid: ds.guid,
-              name: name,
-              visible: true,
-              serverType: "datasource",
-              lsType: "ls"
-            };
+                that._viewer.flyTo(ds);
 
-            that._layerManager.addTempLayerNode(layer);
+                resolve("success");
+                var layer = {
+                  guid: ds.guid,
+                  name: name,
+                  visible: true,
+                  serverType: "datasource",
+                  lsType: "ls"
+                };
 
-            cb && cb(layer);
-          });
-          break;
+                that._layerManager.addTempLayerNode(layer);
 
-        case "czml":
-          ret = ret.replace(/(^\s*)|(\s*$)/, "");
+                cb && cb(layer);
+              });
+              break;
 
-          try {
-            var data = JSON.parse(ret);
+            case "kmz":
+              var options = {
+                name: name,
+                camera: that._viewer.scene.camera,
+                canvas: that._viewer.scene.canvas
+              };
+              var ds = new Cesium.KmlDataSource(options);
+              ds.load(file).then(ds => {
+                that._viewer.dataSources.add(ds);
 
-            if (typeof data == "object" && data) {
-              ret = data;
-            }
-          } catch (e) {}
+                that._viewer.flyTo(ds);
 
-          that._viewer.dataSources.add(Cesium.CzmlDataSource.load(ret, {
-            name: name
-          })).then(ds => {
-            that._viewer.flyTo(ds);
+                resolve("success");
+                var layer = {
+                  guid: ds.guid,
+                  name: name,
+                  visible: true,
+                  serverType: "datasource",
+                  lsType: "ls"
+                };
 
-            var layer = {
-              guid: ds.guid,
-              name: name,
-              visible: true,
-              serverType: "datasource",
-              lsType: "ls"
-            };
+                that._layerManager.addTempLayerNode(layer);
 
-            that._layerManager.addTempLayerNode(layer);
+                cb && cb(layer);
+              });
+              break;
 
-            cb && cb(layer);
-          });
+            case "czml":
+              ret = ret.replace(/(^\s*)|(\s*$)/, "");
 
-          break;
+              try {
+                var data = JSON.parse(ret);
 
-        case "zip":
-          break;
+                if (typeof data == "object" && data) {
+                  ret = data;
+                }
+              } catch (e) {}
 
-        case "txt":
-          break;
+              that._viewer.dataSources.add(Cesium.CzmlDataSource.load(ret, {
+                name: name
+              })).then(ds => {
+                that._viewer.flyTo(ds);
 
-        case "csv":
-          break;
+                resolve("success");
+                var layer = {
+                  guid: ds.guid,
+                  name: name,
+                  visible: true,
+                  serverType: "datasource",
+                  lsType: "ls"
+                };
 
-        case "xls":
-        case "xlsx":
-          break;
+                that._layerManager.addTempLayerNode(layer);
 
-        default:
-          break;
-      }
+                cb && cb(layer);
+              });
 
-      removeFile && removeFile(file);
-    };
+              break;
 
-    reader.onerror = function () {
-      console.log(file.name + "read error.");
-      removeFile && removeFile(file);
-    };
+            case "txt":
+              break;
+
+            case "csv":
+              break;
+
+            case "xls":
+            case "xlsx":
+              break;
+
+            default:
+              break;
+          }
+        };
+
+        reader.onerror = function () {
+          console.log(file.name + " read error.");
+          reject(file.name + " read error.");
+        };
+      }
+    });
   } //解析数据源
 
 
@@ -905,8 +993,6 @@ class AddDataViewModel {
   }
 
 }
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/adddata/AddData.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
@@ -961,6 +1047,21 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
+    // 几何服务地址前缀，例：http://support.kqgeo.com:29800/geometry-proxy/kqgis/rest/services/geometry
+    geometryServerUrl: {
+      type: String,
+      required: true
+    },
+    // 几何服务token，例：eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJob3N0IiwiY3JlYXRlZCI6MTY1NTk2MzU1NzUyMywiZXhwIjoxNzY3MTEwNDAwfQ.BiNOr6vL6liHzlMK89XSvqmFY9fuWiYqDEwYmWxk-6vFKBgLeMC8FloBXyKcxOCl9Rd28y_pX4PhVRYP5cZTwA
+    geometryServerToken: {
+      type: String,
+      required: true
+    },
     // 当前展示的tab标签页
     activeName: {
       type: String,
@@ -1013,7 +1114,8 @@ const __default__ = {
     });
     let upload_ref = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null);
     let upload_btn_ref = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null);
-    let fileList = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)([]); // 获取组件传参
+    let fileList = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)([]);
+    let loadingFile = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(false); // 获取组件传参
 
     let operatorArray = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.computed)(() => {
       let array = [];
@@ -1034,9 +1136,22 @@ const __default__ = {
       }
 
       return flag;
-    });
+    }); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     let viewModel = null;
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -1148,12 +1263,25 @@ const __default__ = {
           ];
           dataSourceType.value = dataSourceTypeList.value[0];
           let options = {
-            billboardImage: const_image_.BILLBOARD_IMAGE_URL
+            billboardImage: const_image_.BILLBOARD_IMAGE_URL,
+            geometryServerUrl: props.geometryServerUrl,
+            geometryServerToken: props.geometryServerToken
           };
           viewModel = new AddDataViewModel(scenceView, options);
         }
       });
-    }); // 切换tab页
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 切换tab页
+
 
     function handleChange(pane) {} // 切换类型
 
@@ -1187,8 +1315,14 @@ const __default__ = {
 
 
     function loadFiles() {
+      loadingFile.value = true;
+      let promiseList = [];
       fileList.value.forEach(file => {
-        viewModel.parseFile(file.raw, removeFile, props.loadCallback);
+        promiseList.push(viewModel.parseFile(file.raw, props.loadCallback));
+      });
+      Promise.all(promiseList).then(() => {
+        removeFiles();
+        loadingFile.value = false;
       });
     } //加载URL
 
@@ -1238,17 +1372,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-add-data", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).addData,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_tabs, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_tabs, {
         modelValue: props.activeName,
         "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => props.activeName = $event),
         onTabChange: handleChange
@@ -1258,7 +1391,7 @@ const __default__ = {
           name: "upload"
         }, {
           default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
-            class: ""
+            class: "kq3d-add-data-title"
           }, {
             default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createTextVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).fileFormatDescription), 1
             /* TEXT */
@@ -1282,7 +1415,7 @@ const __default__ = {
             "auto-upload": false,
             "file-list": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(fileList),
             "onUpdate:file-list": _cache[0] || (_cache[0] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.isRef)(fileList) ? fileList.value = $event : fileList = $event),
-            accept: ".geojson,.topojson,.json,.kml,.kmz,.czml",
+            accept: ".zip,.geojson,.topojson,.json,.kml,.kmz,.czml,.txt",
             "on-change": changeFile,
             ref_key: "upload_ref",
             ref: upload_ref
@@ -1350,7 +1483,7 @@ const __default__ = {
             action: "",
             "show-file-list": false,
             "auto-upload": false,
-            accept: ".geojson,.topojson,.json,.kml,.kmz,.czml",
+            accept: ".zip,.geojson,.topojson,.json,.kml,.kmz,.czml,.txt",
             ref_key: "upload_btn_ref",
             ref: upload_btn_ref,
             class: "kq3d-add-data-footer-upload",
@@ -1391,7 +1524,8 @@ const __default__ = {
             onClick: _cache[2] || (_cache[2] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => loadFiles(), ["stop"])),
             title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).loadFiles,
             type: "primary",
-            disabled: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(disabled)
+            disabled: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(disabled),
+            loading: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(loadingFile)
           }, {
             default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createTextVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).loadFiles), 1
             /* TEXT */
@@ -1401,7 +1535,7 @@ const __default__ = {
 
           }, 8
           /* PROPS */
-          , ["title", "disabled"])])])]),
+          , ["title", "disabled", "loading"])])])]),
           _: 3
           /* FORWARDED */
 
@@ -1684,11 +1818,14 @@ var gis_utils_ = __webpack_require__(826);
 var AspectAnalysisViewModel = __webpack_require__(8132);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/aspectanalysis/AspectAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
+  class: "kq3d-aspect-analysis-box"
+};
+const _hoisted_2 = {
   class: "kq3d-aspect-analysis-footer"
 };
 
@@ -1710,6 +1847,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -1764,8 +1906,21 @@ const __default__ = {
       // 箭头宽度最大值
       arrowColor: props.settingParams && props.settingParams.arrowColor || "#FFFF00" // 箭头颜色
 
-    });
+    }); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
 
       gis_utils_.utils.getWebMap(null, scenceView => {
@@ -1781,7 +1936,18 @@ const __default__ = {
           });
         }
       });
-    }); // 参数改变
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 参数改变
+
 
     function paramsChanged(key) {
       switch (key) {
@@ -1848,17 +2014,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-aspect-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).aspectAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-aspect-analysis-tip"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).skylineTips), 1
@@ -2028,7 +2193,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[10] || (_cache[10] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startAnalysis(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startAnalysis,
         type: "primary"
@@ -2053,7 +2218,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -2187,8 +2352,8 @@ var BaseterrainGalleryViewModel = __webpack_require__(2109);
 var const_image_ = __webpack_require__(9702);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/baseterraingallery/BaseterrainGallery.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
@@ -2236,6 +2401,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -2248,7 +2418,8 @@ const __default__ = {
     },
     // HeaderTemp标题
     headerTempTitle: {
-      type: String
+      type: String,
+      default: "在线地形"
     },
     // HeaderTemp图标
     headerTempIcon: {
@@ -2272,8 +2443,18 @@ const __default__ = {
     let currentIndex = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(2);
     let currentTerrain = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(""); //逻辑类对象
 
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
       currentIndex.value = props.selectIndex;
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
@@ -2284,6 +2465,16 @@ const __default__ = {
         }
       });
     });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    };
 
     function changSelectTerrain() {
       switch (currentIndex.value) {
@@ -2339,17 +2530,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-baseterrain-gallery", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).onlineTerrain,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         style: {
           "line-height": "48px",
           "height": "48px"
@@ -2675,17 +2865,20 @@ var gis_utils_ = __webpack_require__(826);
 var BoxClipViewModel = __webpack_require__(219);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/boxclip/BoxClip.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-box-clip-span"
+  class: "kq3d-box-clip-box"
 };
 const _hoisted_2 = {
   class: "kq3d-box-clip-span"
 };
 const _hoisted_3 = {
+  class: "kq3d-box-clip-span"
+};
+const _hoisted_4 = {
   class: "kq3d-box-clip-footer"
 };
 
@@ -2707,6 +2900,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -2758,8 +2956,21 @@ const __default__ = {
       clipHeight: props.settingParams && props.settingParams.clipHeight || 4.7,
       clipRotation: props.settingParams && props.settingParams.clipRotation || 90
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
       //父组 件ScenceView初始化完成后执行
 
@@ -2792,7 +3003,18 @@ const __default__ = {
           }
         }
       }, 1000);
-    }); // 参数改变
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 参数改变
+
 
     function paramsChanged(key) {
       switch (key) {
@@ -2894,17 +3116,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-box-clip", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).boxClip,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         gutter: 20,
         class: "rowClass"
       }, {
@@ -2912,7 +3133,7 @@ const __default__ = {
           span: 6,
           class: "colClass"
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_1, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipObj), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipObj), 1
           /* TEXT */
           )]),
           _: 1
@@ -2965,7 +3186,7 @@ const __default__ = {
           span: 6,
           class: "colClass"
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipPattern), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipPattern), 1
           /* TEXT */
           )]),
           _: 1
@@ -3494,7 +3715,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_4, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[38] || (_cache[38] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => clip(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clip,
         type: "primary"
@@ -3519,7 +3740,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -4333,24 +4554,27 @@ var gis_utils_ = __webpack_require__(826);
 var ExcavateFillAnalysisViewModel = __webpack_require__(5183);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/excavatefillanalysis/ExcavateFillAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-excavate-fill-analysis-content"
+  class: "kq3d-excavate-fill-analysis-box"
 };
 const _hoisted_2 = {
-  class: "kq3d-excavate-fill-analysis-footer"
+  class: "kq3d-excavate-fill-analysis-content"
 };
 const _hoisted_3 = {
-  key: 1,
-  class: "kq3d-excavate-fill-analysis-result"
+  class: "kq3d-excavate-fill-analysis-footer"
 };
 const _hoisted_4 = {
-  class: "kq3d-excavate-fill-analysis-result-div"
+  key: 0,
+  class: "kq3d-excavate-fill-analysis-result"
 };
 const _hoisted_5 = {
+  class: "kq3d-excavate-fill-analysis-result-div"
+};
+const _hoisted_6 = {
   class: "title"
 };
 
@@ -4372,6 +4596,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -4426,8 +4655,21 @@ const __default__ = {
       fillColor: props.settingParams && props.settingParams.fillColor || "#E6A23C" //  // 填方颜色
 
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
 
       gis_utils_.utils.getWebMap(null, scenceView => {
@@ -4460,7 +4702,18 @@ const __default__ = {
           });
         }
       });
-    }); //开始分析
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; //开始分析
+
 
     function startAnalysis() {
       // this.clearResult();
@@ -4550,17 +4803,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-excavate-fill-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).excavateFillAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         style: {
           "display": "flex"
         }
@@ -4568,11 +4820,11 @@ const __default__ = {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
           class: "kq3d-excavate-fill-analysis-label",
           style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)({
-            width: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentLang) === 'zh' ? '90px' : '130px'
+            width: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentLang) === 'zh' ? '100px' : '130px'
           })
         }, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).altitudeHeight), 5
         /* TEXT, STYLE */
-        ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
           style: {
             "display": "flex"
           }
@@ -4710,7 +4962,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[8] || (_cache[8] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startAnalysis(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startAnalysis,
         type: "primary"
@@ -4735,19 +4987,19 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(showResult) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_4, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+      , ["title"])]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(showResult) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_4, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_5, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-excavate-fill-analysis-result-title"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
           span: 18
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_5, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).analysisResult), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_6, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).analysisResult), 1
           /* TEXT */
           )]),
           _: 1
           /* STABLE */
 
-        }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)(" <kq-col :span=\"6\" class=\"btn\">\r\n            <kq-icon @click=\"closeBtn()\">\r\n              <Close />\r\n            </kq-icon>\r\n          </kq-col> ")]),
+        }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)(" <kq-col :span=\"6\" class=\"btn\">\r\n              <kq-icon @click=\"closeBtn()\">\r\n                <Close />\r\n              </kq-icon>\r\n            </kq-col> ")]),
         _: 1
         /* STABLE */
 
@@ -4765,7 +5017,7 @@ const __default__ = {
         _: 1
         /* STABLE */
 
-      })])])])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)], 2
+      })])])])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)])], 2
       /* CLASS */
       );
     };
@@ -5346,8 +5598,8 @@ var client_icons_vue_ = __webpack_require__(348);
 var gis_utils_ = __webpack_require__(826);
 // EXTERNAL MODULE: ./src/webgl/flight/FlightViewModel.js
 var FlightViewModel = __webpack_require__(5372);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/flight/Flight.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
@@ -5408,6 +5660,11 @@ const __default__ = {
     deleteFlightPath: {
       type: Function
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -5458,9 +5715,22 @@ const __default__ = {
         color: "var(--kq-color-info)",
         "font-size": "14px"
       };
-    };
+    }; // 组件容器Ref
+
 
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -5489,7 +5759,18 @@ const __default__ = {
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
       viewModel.stop();
       document.removeEventListener("click", hideDropDownMenu);
-    }); //新建路径
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; //新建路径
+
 
     function addPath() {
       pathList.forEach(path => {
@@ -5810,17 +6091,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq-flight3d", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).flight,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [!(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(isAdd) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [!(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(isAdd) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: addPath,
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).addPath
       }, {
@@ -6481,12 +6761,15 @@ class FloodAnalysisViewModel {
 }
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/floodanalysis/FloodAnalysis.vue?vue&type=script&setup=true&lang=js
 
-const _hoisted_1 = ["src"];
-const _hoisted_2 = {
+const _hoisted_1 = {
+  class: "kq3d-flood-analysis-box"
+};
+const _hoisted_2 = ["src"];
+const _hoisted_3 = {
   class: "kq3d-flood-analysis-footer"
 };
 
@@ -6516,6 +6799,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -6528,7 +6816,8 @@ const __default__ = {
     },
     // HeaderTemp标题
     headerTempTitle: {
-      type: String
+      type: String,
+      default: "淹没分析"
     },
     // HeaderTemp图标
     headerTempIcon: {
@@ -6547,8 +6836,7 @@ const __default__ = {
   }) {
     const props = __props;
     let language = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)({});
-    let collapseValue = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)("");
-    let headerTitle = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(""); // 淹没色调图片
+    let collapseValue = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(""); // 淹没色调图片
 
     const colorImages = [{
       value: "0",
@@ -6595,8 +6883,21 @@ const __default__ = {
       floodColorImage: props.settingParams && props.settingParams.floodColorImage || "0" // 淹没纹理色带值
 
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(props.target, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -6609,23 +6910,31 @@ const __default__ = {
             maxHeight: formItem.floodMaxHeight,
             colorImage: formItem.floodColorImage
           }); //设置HeaderTemp标题
-
-          if (props.headerTempTitle) {
-            headerTitle.value = props.headerTempTitle;
-          } else {
-            if (props.isShowMode) {
-              headerTitle.value = scenceView._language.floodAnalysis;
-            } else {
-              if (formItem.floodMode === 0) {
-                headerTitle.value = scenceView._language.floodTerrain + scenceView._language.floodAnalysis1;
-              } else if (formItem.floodMode === 1) {
-                headerTitle.value = scenceView._language.floodModel + scenceView._language.floodAnalysis1;
-              }
-            }
-          }
+          // if (!props.headerTempTitle) {
+          //   if (props.isShowMode) {
+          //     props.headerTempTitle = scenceView._language.floodAnalysis;
+          //   } else {
+          //     if (formItem.floodMode === 0) {
+          //       props.headerTempTitle = scenceView._language.floodTerrain + scenceView._language.floodAnalysis1;
+          //     } else if (formItem.floodMode === 1) {
+          //       props.headerTempTitle = scenceView._language.floodModel + scenceView._language.floodAnalysis1;
+          //     }
+          //   }
+          // }
         }
       });
-    }); //获取图片路径
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; //获取图片路径
+
 
     function getImagePath(value) {
       var imagePath = "";
@@ -6727,17 +7036,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-flood-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTitle),
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-flood-analysis-tip"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).floodTips), 1
@@ -7072,7 +7380,7 @@ const __default__ = {
                         alt: ""
                       }, null, 8
                       /* PROPS */
-                      , _hoisted_1)]),
+                      , _hoisted_2)]),
                       _: 2
                       /* DYNAMIC */
 
@@ -7113,7 +7421,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[22] || (_cache[22] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startAnalysis(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startAnalysis,
         type: "primary"
@@ -7138,7 +7446,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -7491,11 +7799,14 @@ var external_xe_utils_namespaceObject = require("xe-utils");
 var external_xe_utils_default = /*#__PURE__*/__webpack_require__.n(external_xe_utils_namespaceObject);
 // EXTERNAL MODULE: ./src/webgl/gpuspatialquery/GPUSpatialQueryViewModel.js
 var GPUSpatialQueryViewModel = __webpack_require__(7775);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/gpuspatialquery/GPUSpatialQuery.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
+  class: "kq3d-gpu-spatial-query-box"
+};
+const _hoisted_2 = {
   class: "kq3d-gpu-spatial-query-footer"
 };
 
@@ -7540,6 +7851,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -7603,8 +7919,21 @@ const __default__ = {
       maxZRotate: props.settingParams && props.settingParams.maxZRotate || 90 // 绕Z轴旋转最大值
 
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -7618,7 +7947,18 @@ const __default__ = {
           });
         }
       });
-    }); // 参数切换
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 参数切换
+
 
     function paramsChanged(key) {
       switch (key) {
@@ -7696,17 +8036,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-gpu-spatial-query", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).spatialQuery,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
         "label-width": "100px",
         "label-position": "left"
       }, {
@@ -8065,7 +8404,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[20] || (_cache[20] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => query(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).gpuQuery,
         type: "primary"
@@ -8090,7 +8429,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -8219,257 +8558,94 @@ const __default__ = {
       default: 200
     },
     top: Number,
-    left: Number,
-    bottom: {
-      type: Number,
-      default: 16
-    },
-    right: {
-      type: Number,
-      default: 16
-    },
-    centerColor: {
-      type: String,
-      default: "#0000ff"
-    },
-    centerColorAlpha: {
-      type: Number,
-      default: 0.5
-    },
-    layers: Array
-  },
-
-  setup(__props, {
-    expose
-  }) {
-    const props = __props;
-    let viewModel = null; // 获取组件传参
-
-    (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
-      //父组件ScenceView初始化完成后执行
-      gis_utils_.utils.getWebMap(null, scenceView => {
-        if (scenceView) {
-          let options = {
-            show: props.show,
-            width: props.width,
-            height: props.height,
-            bottom: props.bottom,
-            right: props.right,
-            zIndex: 9999,
-            centerColor: props.centerColor,
-            centerColorAlpha: props.centerColorAlpha,
-            layers: props.layers
-          };
-          viewModel = new HawkeyeViewModel/* default */.Z(scenceView, options);
-        }
-      });
-    });
-
-    function show() {
-      viewModel && viewModel.show();
-    }
-
-    function hide() {
-      viewModel && viewModel.hide();
-    } // 销毁
-
-
-    (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
-      viewModel && viewModel.destroy();
-    });
-    expose({
-      show,
-      hide
-    });
-    return (_ctx, _cache) => {
-      return null;
-    };
-  }
-
-}));
-;// CONCATENATED MODULE: ./src/webgl/hawkeye/Hawkeye.vue?vue&type=script&setup=true&lang=js
- 
-;// CONCATENATED MODULE: ./src/webgl/hawkeye/Hawkeye.vue
-
-
-
-const __exports__ = Hawkeyevue_type_script_setup_true_lang_js;
-
-/* harmony default export */ var Hawkeye = (__exports__);
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/init.js"
-var init_js_ = __webpack_require__(5406);
-var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_);
-;// CONCATENATED MODULE: ./src/webgl/hawkeye/index.js
-
-
-
-
-Hawkeye.install = (Vue, opts) => {
-  init_js_default()(Vue, opts);
-  Vue.component(Hawkeye.name, Hawkeye);
-};
-
-
-
-/***/ }),
-
-/***/ 519:
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": function() { return /* reexport */ HeaderTemp; }
-});
-
-// EXTERNAL MODULE: external {"root":"Vue","commonjs":"vue","commonjs2":"vue","amd":"vue"}
-var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(637);
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
-var util_ = __webpack_require__(9519);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/headertemp/HeaderTemp.vue?vue&type=script&setup=true&lang=js
-
-const _hoisted_1 = {
-  class: "kq-control-header-temp"
-};
-const _hoisted_2 = {
-  class: "_title"
-};
-
-
-const __default__ = {
-  name: "Kq3dHeaderTemp"
-};
-/* harmony default export */ var HeaderTempvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
-  props: {
-    // 是否显示阴影效果
-    showShadow: {
-      type: Boolean,
-      default: true
+    left: Number,
+    bottom: {
+      type: Number,
+      default: 16
     },
-    // HeaderTemp标题
-    headerTempTitle: {
-      type: String,
-      default: ""
+    right: {
+      type: Number,
+      default: 16
     },
-    // HeaderTemp图标
-    headerTempIcon: {
-      type: Object
+    centerColor: {
+      type: String,
+      default: "#0000ff"
     },
-    // HeaderTemp是否折叠
-    isCollapse: {
-      type: Boolean,
-      default: false
+    centerColorAlpha: {
+      type: Number,
+      default: 0.5
     },
-    // HeaderTemp Title&Icon的位置
-    isRight: {
-      type: Boolean,
-      default: true
-    }
+    layers: Array
   },
 
   setup(__props, {
     expose
   }) {
     const props = __props;
-    const proxy = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.getCurrentInstance)(); // 获取组件传参
-    // 图标组件
+    let viewModel = null; // 获取组件传参
 
-    let iconBtn = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null);
-    let isCollapse = props.isCollapse;
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
-      iconBtn.value = props.headerTempIcon;
-      let dom = proxy.parent.vnode.el;
-
-      if (!props.isRight) {
-        (0,util_.addClass)(dom, ["kq-is-show", "kq-is-left"]);
-      }
-
-      if (isCollapse) {
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-hide");
-          (0,util_.removeClass)(dom, "kq-is-show");
-        }
-      } else {
-        if (props.showShadow) {
-          (0,util_.removeClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.addClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.removeClass)(dom, "kq-is-hide");
-          (0,util_.addClass)(dom, "kq-is-show");
+      //父组件ScenceView初始化完成后执行
+      gis_utils_.utils.getWebMap(null, scenceView => {
+        if (scenceView) {
+          let options = {
+            show: props.show,
+            width: props.width,
+            height: props.height,
+            bottom: props.bottom,
+            right: props.right,
+            zIndex: 9999,
+            centerColor: props.centerColor,
+            centerColorAlpha: props.centerColorAlpha,
+            layers: props.layers
+          };
+          viewModel = new HawkeyeViewModel/* default */.Z(scenceView, options);
         }
-      }
-    }); // 图标按钮点击事件
+      });
+    });
 
-    function btnClick() {
-      isCollapse = !isCollapse;
-      let dom = proxy.parent.vnode.el;
-
-      if (isCollapse) {
-        // 折叠
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-hide");
-          (0,util_.removeClass)(dom, "kq-is-show");
-        }
-      } else {
-        // 展开
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-show");
-          (0,util_.removeClass)(dom, "kq-is-hide");
-        }
-      }
+    function show() {
+      viewModel && viewModel.show();
     }
 
+    function hide() {
+      viewModel && viewModel.hide();
+    } // 销毁
+
+
+    (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
+      viewModel && viewModel.destroy();
+    });
     expose({
-      btnClick
+      show,
+      hide
     });
     return (_ctx, _cache) => {
-      const _component_kq_icon = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-icon");
-
-      return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("h4", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)(__props.headerTempTitle), 1
-      /* TEXT */
-      ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
-        class: "_btn kq-control-header-temp_btn",
-        onClick: btnClick
-      }, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
-        size: 16
-      }, {
-        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(iconBtn))))]),
-        _: 1
-        /* STABLE */
-
-      })])]);
+      return null;
     };
   }
 
 }));
-;// CONCATENATED MODULE: ./src/webgl/headertemp/HeaderTemp.vue?vue&type=script&setup=true&lang=js
+;// CONCATENATED MODULE: ./src/webgl/hawkeye/Hawkeye.vue?vue&type=script&setup=true&lang=js
  
-;// CONCATENATED MODULE: ./src/webgl/headertemp/HeaderTemp.vue
+;// CONCATENATED MODULE: ./src/webgl/hawkeye/Hawkeye.vue
 
 
 
-const __exports__ = HeaderTempvue_type_script_setup_true_lang_js;
+const __exports__ = Hawkeyevue_type_script_setup_true_lang_js;
 
-/* harmony default export */ var HeaderTemp = (__exports__);
+/* harmony default export */ var Hawkeye = (__exports__);
 // EXTERNAL MODULE: external "@kq_npm/client_common_vue/init.js"
 var init_js_ = __webpack_require__(5406);
 var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_);
-;// CONCATENATED MODULE: ./src/webgl/headertemp/index.js
+;// CONCATENATED MODULE: ./src/webgl/hawkeye/index.js
+
 
 
 
-HeaderTemp.install = (Vue, opts) => {
+Hawkeye.install = (Vue, opts) => {
   init_js_default()(Vue, opts);
-  Vue.component(HeaderTemp.name, HeaderTemp);
+  Vue.component(Hawkeye.name, Hawkeye);
 };
 
 
@@ -8835,72 +9011,75 @@ class IsolineAnalysisViewModel {
 }
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/isolineanalysis/IsolineAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-isoline-analysis-span"
+  class: "kq3d-isoline-analysis-box"
 };
 const _hoisted_2 = {
-  key: 0
+  class: "kq3d-isoline-analysis-span"
 };
 const _hoisted_3 = {
-  class: "kq3d-isoline-analysis-heightspan"
+  key: 0
 };
 const _hoisted_4 = {
-  key: 1
+  class: "kq3d-isoline-analysis-heightspan"
 };
 const _hoisted_5 = {
+  key: 1
+};
+const _hoisted_6 = {
   style: {
     "width": "15%",
     "text-align": "left"
   }
 };
 
-const _hoisted_6 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
+const _hoisted_7 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
   class: "kq3d-isoline-analysis-line"
 }, null, -1
 /* HOISTED */
 );
 
-const _hoisted_7 = {
+const _hoisted_8 = {
   style: {
     "width": "15%",
     "text-align": "right"
   }
 };
-const _hoisted_8 = ["src"];
-const _hoisted_9 = {
+const _hoisted_9 = ["src"];
+const _hoisted_10 = {
   key: 0
 };
-const _hoisted_10 = {
+const _hoisted_11 = {
   class: "kq3d-isoline-analysis-heightspan"
 };
-const _hoisted_11 = {
+const _hoisted_12 = {
   key: 1
 };
-const _hoisted_12 = {
+const _hoisted_13 = {
   style: {
     "width": "15%",
     "text-align": "left"
   }
 };
 
-const _hoisted_13 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
+const _hoisted_14 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
   class: "kq3d-isoline-analysis-line"
 }, null, -1
 /* HOISTED */
 );
 
-const _hoisted_14 = {
+const _hoisted_15 = {
   style: {
     "width": "15%",
     "text-align": "right"
   }
 };
-const _hoisted_15 = ["src"];
-const _hoisted_16 = {
+const _hoisted_16 = ["src"];
+const _hoisted_17 = {
   class: "kq3d-isoline-analysis-footer"
 };
 
@@ -8923,6 +9102,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -9046,8 +9230,21 @@ const __default__ = {
       surfaceAlpha: props.settingParams && props.settingParams.surfaceAlpha || 0.6 // 面透明度
 
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
 
       gis_utils_.utils.getWebMap(null, scenceView => {
@@ -9088,7 +9285,18 @@ const __default__ = {
           viewModel = new IsolineAnalysisViewModel(scenceView, options);
         }
       });
-    }); // 刷新自定义样式数组
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 刷新自定义样式数组
+
 
     function refactorArr(type) {
       if (!dataList || !dataList.length) return;
@@ -9279,23 +9487,22 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-isoline-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).isolineAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withDirectives)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withDirectives)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         gutter: 20
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
           span: 6
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_1, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).fillType), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).fillType), 1
           /* TEXT */
           )]),
           _: 1
@@ -9996,7 +10203,7 @@ const __default__ = {
               _: 1
               /* STABLE */
 
-            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 0 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 0 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
               style: {
                 "display": "flex"
               }
@@ -10054,7 +10261,7 @@ const __default__ = {
                     "controls-position": "right"
                   }, null, 8
                   /* PROPS */
-                  , ["modelValue", "onUpdate:modelValue"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).to), 1
+                  , ["modelValue", "onUpdate:modelValue"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_4, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).to), 1
                   /* TEXT */
                   ), index > 0 && index < (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(dataList).length - 1 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_input_number, {
                     key: 2,
@@ -10109,7 +10316,7 @@ const __default__ = {
               );
             }), 128
             /* KEYED_FRAGMENT */
-            ))])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 1 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_4, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+            ))])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 1 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_5, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
               default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
                 label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).gradientColor
               }, {
@@ -10118,9 +10325,9 @@ const __default__ = {
                     "display": "flex"
                   }
                 }, {
-                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_5, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minHeight) + "m", 1
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_6, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minHeight) + "m", 1
                   /* TEXT */
-                  ), _hoisted_6, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_7, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxHeight) + "m", 1
+                  ), _hoisted_7, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_8, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxHeight) + "m", 1
                   /* TEXT */
                   )]),
                   _: 1
@@ -10142,7 +10349,7 @@ const __default__ = {
                         alt: "无"
                       }, null, 8
                       /* PROPS */
-                      , _hoisted_8)]),
+                      , _hoisted_9)]),
                       _: 2
                       /* DYNAMIC */
 
@@ -10824,7 +11031,7 @@ const __default__ = {
                   _: 1
                   /* STABLE */
 
-                }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 0 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_9, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 0 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_10, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
                   style: {
                     "display": "flex"
                   }
@@ -10882,7 +11089,7 @@ const __default__ = {
                         "controls-position": "right"
                       }, null, 8
                       /* PROPS */
-                      , ["modelValue", "onUpdate:modelValue"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_10, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).to), 1
+                      , ["modelValue", "onUpdate:modelValue"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_11, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).to), 1
                       /* TEXT */
                       ), index > 0 && index < (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(dataList).length - 1 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_input_number, {
                         key: 2,
@@ -10937,7 +11144,7 @@ const __default__ = {
                   );
                 }), 128
                 /* KEYED_FRAGMENT */
-                ))])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 1 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_11, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+                ))])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 1 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_12, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
                   default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
                     label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).gradientColor
                   }, {
@@ -10946,9 +11153,9 @@ const __default__ = {
                         "display": "flex"
                       }
                     }, {
-                      default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_12, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minHeight) + "m", 1
+                      default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_13, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minHeight) + "m", 1
                       /* TEXT */
-                      ), _hoisted_13, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_14, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxHeight) + "m", 1
+                      ), _hoisted_14, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_15, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxHeight) + "m", 1
                       /* TEXT */
                       )]),
                       _: 1
@@ -10970,7 +11177,7 @@ const __default__ = {
                             alt: ""
                           }, null, 8
                           /* PROPS */
-                          , _hoisted_15)]),
+                          , _hoisted_16)]),
                           _: 2
                           /* DYNAMIC */
 
@@ -11023,7 +11230,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_16, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_17, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[110] || (_cache[110] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startAnalysis(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startAnalysis,
         type: "primary"
@@ -11048,7 +11255,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -11233,8 +11440,8 @@ var client_icons_vue_ = __webpack_require__(348);
 var gis_utils_ = __webpack_require__(826);
 // EXTERNAL MODULE: ./src/webgl/measure/MeasureViewModel.js
 var MeasureViewModel = __webpack_require__(193);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/measure/Measure.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
@@ -11361,6 +11568,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -11420,8 +11632,21 @@ const __default__ = {
     }, {
       label: "km²",
       value: "km²"
-    }]);
+    }]); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -11465,7 +11690,18 @@ const __default__ = {
           });
         }
       });
-    }); //加载测量模式数据
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; //加载测量模式数据
+
 
     function loadModeData() {
       modeList.push({
@@ -11615,17 +11851,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq-measure3d", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).measure,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", _hoisted_4, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).mode), 1
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", _hoisted_4, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).mode), 1
       /* TEXT */
       ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_select, {
         modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(mode),
@@ -11959,14 +12194,17 @@ var gis_utils_ = __webpack_require__(826);
 var ModelSelectViewModel = __webpack_require__(5394);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/modelselect/ModelSelect.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "modelTree"
+  class: "kq3d-model-select-box"
 };
 const _hoisted_2 = {
+  class: "modelTree"
+};
+const _hoisted_3 = {
   class: "footer-buttons"
 };
 
@@ -11983,7 +12221,7 @@ const __default__ = {
     //指定组件绑定的viewer对象的div的id
     mapTarget: String,
     modeFiled: {
-      default: 'id',
+      default: "id",
       type: String
     },
     // 外部字段别名映射
@@ -11995,6 +12233,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -12044,10 +12287,23 @@ const __default__ = {
         color: "var(--kq-color-info)",
         "font-size": "14px"
       };
-    };
+    }; // 组件容器Ref
+
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
 
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
-      //父组件ScenceView初始化完成后执行
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      }); //父组件ScenceView初始化完成后执行
+
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -12055,6 +12311,16 @@ const __default__ = {
         }
       });
     });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    };
 
     function setModeFiled(val) {
       viewModel._modeFiled = val;
@@ -12118,21 +12384,20 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-model-select", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).modelPick,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
           span: 8
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_scrollbar, {
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_scrollbar, {
             class: "scrollbarClass"
           }, {
             default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_KqTree, {
@@ -12194,7 +12459,7 @@ const __default__ = {
         _: 1
         /* STABLE */
 
-      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[0] || (_cache[0] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => pick(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).pick,
         type: "primary"
@@ -12219,7 +12484,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -12493,11 +12758,14 @@ class ParticleEffectViewModel {
   }
 
 }
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/particleeffect/ParticleEffect.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
+  class: "kq3d-particle-effect-box"
+};
+const _hoisted_2 = {
   class: "kq3d-particle-effect-footer"
 };
 
@@ -12519,6 +12787,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -12568,8 +12841,21 @@ const __default__ = {
       endScale: props.settingParams && props.settingParams.endScale || 1.0,
       gravity: props.settingParams && props.settingParams.gravity || 0.0
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
 
       gis_utils_.utils.getWebMap(null, scenceView => {
@@ -12579,6 +12865,16 @@ const __default__ = {
         }
       });
     });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    };
 
     function changeMode(mode) {
       if (formItem.mode !== mode) {
@@ -12692,17 +12988,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-particle-effect", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).particleEffect,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         gutter: 20,
         class: "rowclass"
       }, {
@@ -13267,7 +13562,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[38] || (_cache[38] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => add(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).add,
         type: "primary"
@@ -13292,7 +13587,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -13529,12 +13824,12 @@ var gis_utils_ = __webpack_require__(826);
 var PlaneClipViewModel = __webpack_require__(5673);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/planeclip/PlaneClip.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-plane-clip-span"
+  class: "kq3d-plane-clip-box"
 };
 const _hoisted_2 = {
   class: "kq3d-plane-clip-span"
@@ -13543,6 +13838,9 @@ const _hoisted_3 = {
   class: "kq3d-plane-clip-span"
 };
 const _hoisted_4 = {
+  class: "kq3d-plane-clip-span"
+};
+const _hoisted_5 = {
   class: "kq3d-plane-clip-footer"
 };
 
@@ -13564,6 +13862,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -13610,8 +13913,21 @@ const __default__ = {
       boxEnable: props.settingParams && props.settingParams.boxEnable !== undefined || false,
       clipDistance: props.settingParams && props.settingParams.clipDistance || 0
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
       //父组 件ScenceView初始化完成后执行
 
@@ -13639,7 +13955,18 @@ const __default__ = {
           }
         }
       }, 1000);
-    }); // 参数改变
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 参数改变
+
 
     function paramsChanged(key) {
       switch (key) {
@@ -13719,17 +14046,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-plane-clip", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).planeClip,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         gutter: 20,
         class: "rowClass"
       }, {
@@ -13737,7 +14063,7 @@ const __default__ = {
           span: 6,
           class: "colClass"
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_1, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipObj), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipObj), 1
           /* TEXT */
           )]),
           _: 1
@@ -13791,7 +14117,7 @@ const __default__ = {
           span: 6,
           class: "colClass"
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipStyle), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipStyle), 1
           /* TEXT */
           )]),
           _: 1
@@ -13843,7 +14169,7 @@ const __default__ = {
           span: 6,
           class: "colClass"
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipPattern), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_4, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clipPattern), 1
           /* TEXT */
           )]),
           _: 1
@@ -14026,7 +14352,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_4, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_5, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[14] || (_cache[14] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => clip(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).clip,
         type: "primary"
@@ -14051,7 +14377,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -14365,17 +14691,20 @@ var gis_utils_ = __webpack_require__(826);
 var ProfileAnalysisViewModel = __webpack_require__(6132);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/profileanalysis/ProfileAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-profile-analysis-footer"
+  class: "kq3d-profile-analysis-box"
 };
 const _hoisted_2 = {
-  class: "kq3d-profile-analysis-result"
+  class: "kq3d-profile-analysis-footer"
 };
 const _hoisted_3 = {
+  class: "kq3d-profile-analysis-result"
+};
+const _hoisted_4 = {
   id: "resultCahrt",
   class: "resultCahrt"
 };
@@ -14398,6 +14727,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -14463,8 +14797,21 @@ const __default__ = {
       // 相机高度范围最大值
       enablePerspective: props.settingParams && props.settingParams.isLabel !== undefined || true // 是否透视
 
-    });
+    }); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -14484,7 +14831,18 @@ const __default__ = {
           resultCahrtVis.value = false;
         }
       });
-    }); // 开始分析
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 开始分析
+
 
     function startAnalysis() {
       viewModel && viewModel.start();
@@ -14557,17 +14915,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-profile-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).profileAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-profile-analysis-tip"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).profileTips), 1
@@ -14841,7 +15198,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[9] || (_cache[9] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startAnalysis(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startAnalysis,
         type: "primary"
@@ -14866,9 +15223,9 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withDirectives)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, null, 512
+      , ["title"])]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withDirectives)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_4, null, 512
       /* NEED_PATCH */
-      ), [[external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.vShow, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(resultCahrtVis)]])])], 2
+      ), [[external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.vShow, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(resultCahrtVis)]])])])], 2
       /* CLASS */
       );
     };
@@ -15287,8 +15644,8 @@ var client_icons_vue_ = __webpack_require__(348);
 var gis_utils_ = __webpack_require__(826);
 // EXTERNAL MODULE: ./src/webgl/roller/RollerViewModel.js
 var RollerViewModel = __webpack_require__(6561);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/roller/Roller.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
@@ -15307,19 +15664,15 @@ const __default__ = {
 };
 /* harmony default export */ var Rollervue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
   props: {
-    //设置参数
-    top: {
-      type: Number,
-      default: 16
-    },
-    right: {
-      type: Number,
-      default: 16
-    },
     showShadow: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -15365,8 +15718,21 @@ const __default__ = {
       mode: props.settingParams && props.settingParams.mode || null
     });
     let layers = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.reactive)([]);
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -15376,7 +15742,18 @@ const __default__ = {
           viewModel = new RollerViewModel/* default */.Z(scenceView, options);
         }
       });
-    }); // 切换模式
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 切换模式
+
 
     function changeMode() {
       let mode = formItem.mode;
@@ -15424,17 +15801,15 @@ const __default__ = {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-roller", {
           'kq-box-shadow': __props.showShadow
         }]),
-        style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)('top: ' + props.top + 'px; right: ' + props.right + 'px;')
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).roller,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         style: {
           "margin-bottom": "8px"
         }
@@ -15607,8 +15982,8 @@ const __default__ = {
 
       }, 512
       /* NEED_PATCH */
-      ), [[external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.vShow, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).mode !== null]])])], 6
-      /* CLASS, STYLE */
+      ), [[external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.vShow, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).mode !== null]])])], 2
+      /* CLASS */
       );
     };
   }
@@ -15815,11 +16190,14 @@ var client_icons_vue_ = __webpack_require__(348);
 var gis_utils_ = __webpack_require__(826);
 // EXTERNAL MODULE: ./src/webgl/screenshot/ScreenshotViewModel.js
 var ScreenshotViewModel = __webpack_require__(1248);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/screenshot/Screenshot.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
+  class: "kq3d-screenshot-box"
+};
+const _hoisted_2 = {
   class: "kq3d-screenshot-footer"
 };
 
@@ -15841,6 +16219,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -15897,8 +16280,21 @@ const __default__ = {
       //倾斜摄影名称
       tilesetStyle: props.settingParams && props.settingParams.tilesetStyle || style // 倾斜摄影样式
 
-    });
+    }); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -15910,7 +16306,18 @@ const __default__ = {
           viewModel = new ScreenshotViewModel/* default */.Z(scenceView._viewer, formItem);
         }
       });
-    }); // 场景出图
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 场景出图
+
 
     function sceneFigure() {
       viewModel && viewModel.sceneFigure();
@@ -15976,17 +16383,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-screenshot", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).screenshot,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
         "label-width": "120px",
         "label-position": "left"
       }, {
@@ -16141,7 +16547,7 @@ const __default__ = {
         _: 1
         /* STABLE */
 
-      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[8] || (_cache[8] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => sceneFigure(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).screenshotTips,
         type: "primary"
@@ -16154,7 +16560,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -16446,28 +16852,31 @@ var ShadowAnalysisViewModel = __webpack_require__(4167);
 var const_image_ = __webpack_require__(9702);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/shadowanalysis/ShadowAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-shadow-analysis-span"
+  class: "kq3d-shadow-analysis-box"
 };
 const _hoisted_2 = {
   class: "kq3d-shadow-analysis-span"
 };
+const _hoisted_3 = {
+  class: "kq3d-shadow-analysis-span"
+};
 
-const _hoisted_3 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", null, "0.0", -1
+const _hoisted_4 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", null, "0.0", -1
 /* HOISTED */
 );
 
-const _hoisted_4 = ["src"];
+const _hoisted_5 = ["src"];
 
-const _hoisted_5 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", null, "1.0", -1
+const _hoisted_6 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", null, "1.0", -1
 /* HOISTED */
 );
 
-const _hoisted_6 = {
+const _hoisted_7 = {
   class: "kq3d-shadow-analysis-footer"
 };
 
@@ -16490,6 +16899,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -16603,8 +17017,21 @@ const __default__ = {
       // 透明缩放范围最小值
       maxAlphaScale: props.settingParams && props.settingParams.alphaScale || 1 // 透明缩放范围最大值
 
-    });
+    }); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       time.value = [formItem.startTime, formItem.endTime];
       currentLang.value = proxy.$i18n.locale; // 获取当前语言类型
 
@@ -16636,7 +17063,18 @@ const __default__ = {
           });
         }
       });
-    }); // 获取当前日期
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 获取当前日期
+
 
     function GetDateStr() {
       var dd = new Date();
@@ -16759,24 +17197,23 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-shadow-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).shadowAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-shadow-analysis-datetime"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
           span: 4,
           class: "colDate"
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_1, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).analyseDate), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).analyseDate), 1
           /* TEXT */
           )]),
           _: 1
@@ -16810,7 +17247,7 @@ const __default__ = {
           span: 4,
           class: "colTime"
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).time), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).time), 1
           /* TEXT */
           )]),
           _: 1
@@ -16840,7 +17277,7 @@ const __default__ = {
         _: 1
         /* STABLE */
 
-      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)(" <kq-row class=\"kq3d-shadow-analysis-datetime\">\r\n      <kq-col :span=\"6\">\r\n        <span class=\"kq3d-shadow-analysis-span\">{{ language.analysisYear }}</span>\r\n      </kq-col>\r\n      <kq-col :span=\"18\">\r\n        <kq-date-picker v-model=\"year\" align=\"right\" type=\"year\" format=\"YYYY年\"></kq-date-picker>\r\n        <kq-row :gutter=\"20\">\r\n          <kq-col :span=\"20\">\r\n            <kq-slider\r\n              v-model=\"month\"\r\n              :step=\"1\"\r\n              :min=\"formItem.1\"\r\n              :max=\"formItem.12\"\r\n              range\r\n              :show-tooltip=\"false\"\r\n              @change=\"changeMonth\"\r\n              :marks=\"monthMarks\"></kq-slider>\r\n          </kq-col>\r\n          <kq-col :span=\"4\" class=\"kq3d-shadow-analysis-timeline\">\r\n            <kq-icon @click=\"playOrPauseMonth\">\r\n              <IconVideoPlay v-if=\"!playMonth\" />\r\n              <IconVideoPause v-else />\r\n            </kq-icon>\r\n          </kq-col>\r\n        </kq-row>\r\n      </kq-col>\r\n    </kq-row> "), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)(" <kq-row class=\"kq3d-shadow-analysis-datetime\">\r\n        <kq-col :span=\"6\">\r\n          <span class=\"kq3d-shadow-analysis-span\">{{ language.analysisYear }}</span>\r\n        </kq-col>\r\n        <kq-col :span=\"18\">\r\n          <kq-date-picker v-model=\"year\" align=\"right\" type=\"year\" format=\"YYYY年\"></kq-date-picker>\r\n          <kq-row :gutter=\"20\">\r\n            <kq-col :span=\"20\">\r\n              <kq-slider\r\n                v-model=\"month\"\r\n                :step=\"1\"\r\n                :min=\"formItem.1\"\r\n                :max=\"formItem.12\"\r\n                range\r\n                :show-tooltip=\"false\"\r\n                @change=\"changeMonth\"\r\n                :marks=\"monthMarks\"></kq-slider>\r\n            </kq-col>\r\n            <kq-col :span=\"4\" class=\"kq3d-shadow-analysis-timeline\">\r\n              <kq-icon @click=\"playOrPauseMonth\">\r\n                <IconVideoPlay v-if=\"!playMonth\" />\r\n                <IconVideoPause v-else />\r\n              </kq-icon>\r\n            </kq-col>\r\n          </kq-row>\r\n        </kq-col>\r\n      </kq-row> "), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-shadow-analysis-tip"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).shadowTips), 1
@@ -17206,12 +17643,12 @@ const __default__ = {
               default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
                 label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).shadowRateLegend
               }, {
-                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [_hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("img", {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [_hoisted_4, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("img", {
                   src: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(const_image_.SHADOW_LEGEND_URL),
                   alt: ""
                 }, null, 8
                 /* PROPS */
-                , _hoisted_4), _hoisted_5]),
+                , _hoisted_5), _hoisted_6]),
                 _: 1
                 /* STABLE */
 
@@ -17221,7 +17658,7 @@ const __default__ = {
               _: 1
               /* STABLE */
 
-            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)(" <kq-row :gutter=\"20\" style=\"display: flex\">\r\n            <kq-col :span=\"12\">\r\n              <kq-checkbox v-model=\"formItem.showBuilding\">{{ language.showBuilding }}</kq-checkbox>\r\n            </kq-col>\r\n            <kq-col :span=\"12\">\r\n              <kq-checkbox v-model=\"formItem.showVoxel\">{{ language.showVoxel }}</kq-checkbox>\r\n            </kq-col>\r\n          </kq-row> ")]),
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)(" <kq-row :gutter=\"20\" style=\"display: flex\">\r\n              <kq-col :span=\"12\">\r\n                <kq-checkbox v-model=\"formItem.showBuilding\">{{ language.showBuilding }}</kq-checkbox>\r\n              </kq-col>\r\n              <kq-col :span=\"12\">\r\n                <kq-checkbox v-model=\"formItem.showVoxel\">{{ language.showVoxel }}</kq-checkbox>\r\n              </kq-col>\r\n            </kq-row> ")]),
             _: 1
             /* STABLE */
 
@@ -17237,7 +17674,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_6, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_7, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[33] || (_cache[33] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startAnalysis(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startAnalysis,
         type: "primary"
@@ -17275,7 +17712,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -17599,11 +18036,14 @@ class SightlineAnalysisViewModel {
 }
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/sightlineanalysis/SightlineAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
+  class: "kq3d-sightline-analysis-box"
+};
+const _hoisted_2 = {
   class: "kq3d-sightline-analysis-footer"
 };
 
@@ -17625,6 +18065,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -17667,9 +18112,22 @@ const __default__ = {
       highlightObstacle: props.settingParams && props.settingParams.highlightObstacle !== undefined || false,
       isLabel: props.settingParams && props.settingParams.isLabel !== undefined || true
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
-      //父组件ScenceView初始化完成后执行
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      }); //父组件ScenceView初始化完成后执行
+
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -17684,6 +18142,16 @@ const __default__ = {
         }
       });
     });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    };
 
     function paramsChanged(key) {
       switch (key) {
@@ -17756,17 +18224,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-sightline-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).sightlineAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-sightline-analysis-tip"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).sightTips), 1
@@ -17880,7 +18347,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)(addSeePoint, ["stop"]),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).seePoint,
         type: "primary"
@@ -17918,7 +18385,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["onClick", "title"])])], 2
+      , ["onClick", "title"])])])], 2
       /* CLASS */
       );
     };
@@ -18247,19 +18714,22 @@ var gis_utils_ = __webpack_require__(826);
 var SkylineAnalysisViewModel = __webpack_require__(3084);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: external "echarts"
 var external_echarts_namespaceObject = require("echarts");
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/skylineanalysis/SkylineAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-skyline-analysis-footer"
+  class: "kq3d-skyline-analysis-box"
 };
 const _hoisted_2 = {
-  class: "kq3d-skyline-analysis-result"
+  class: "kq3d-skyline-analysis-footer"
 };
 const _hoisted_3 = {
+  class: "kq3d-skyline-analysis-result"
+};
+const _hoisted_4 = {
   key: 0,
   id: "resultEcahrt",
   class: "resultEcahrt"
@@ -18285,6 +18755,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -18342,8 +18817,21 @@ const __default__ = {
       // 限高体透明度范围最大值
       skylineWidth: 2 // 天际线宽度
 
-    });
+    }); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -18357,7 +18845,18 @@ const __default__ = {
           viewModel._skylineAnalysisChartTitle = language.value["skylineAnalysisChartTitle"];
         }
       });
-    }); // 提取天际线
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 提取天际线
+
 
     function pickSkyLine() {
       resultEcahrtVis.value = true;
@@ -18442,17 +18941,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-skyline-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).skylineAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_collapse, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_collapse, {
         "model-value": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(collapseValue),
         class: "kq3d-skyline-analysis-collapse"
       }, {
@@ -18630,7 +19128,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         gutter: 20,
         class: "btnClass"
       }, {
@@ -18723,7 +19221,7 @@ const __default__ = {
         _: 1
         /* STABLE */
 
-      })]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(resultEcahrtVis) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_3)) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)])], 2
+      })]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(resultEcahrtVis) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_4)) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)])])], 2
       /* CLASS */
       );
     };
@@ -19034,39 +19532,42 @@ class SlopeAnalysisViewModel {
 }
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/slopeanalysis/SlopeAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  key: 0
+  class: "kq3d-slope-analysis-box"
 };
 const _hoisted_2 = {
-  class: "kq3d-slope-analysis-span"
+  key: 0
 };
 const _hoisted_3 = {
+  class: "kq3d-slope-analysis-span"
+};
+const _hoisted_4 = {
   key: 1
 };
 
-const _hoisted_4 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", null, "0°", -1
+const _hoisted_5 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", null, "0°", -1
 /* HOISTED */
 );
 
-const _hoisted_5 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
+const _hoisted_6 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
   class: "kq3d-slope-analysis-line"
 }, null, -1
 /* HOISTED */
 );
 
-const _hoisted_6 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", null, "90°", -1
+const _hoisted_7 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", null, "90°", -1
 /* HOISTED */
 );
 
-const _hoisted_7 = ["src"];
-const _hoisted_8 = {
+const _hoisted_8 = ["src"];
+const _hoisted_9 = {
   key: 2
 };
-const _hoisted_9 = {
+const _hoisted_10 = {
   class: "kq3d-slope-analysis-footer"
 };
 
@@ -19089,6 +19590,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -19168,8 +19674,21 @@ const __default__ = {
       maxSlope: props.settingParams && props.settingParams.maxSlope || 60,
       slopeColorAlpha: props.settingParams && props.settingParams.slopeColorAlpha || 0.3,
       slopeColorText: props.settingParams && props.settingParams.slopeColorText || "#FF0000"
-    });
+    }); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
 
       gis_utils_.utils.getWebMap(null, scenceView => {
@@ -19180,7 +19699,18 @@ const __default__ = {
           // viewModel.setColorImage(imageUrl);
         }
       });
-    }); // 刷新自定义样式数组
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 刷新自定义样式数组
+
 
     function refactorArr(type) {
       if (!dataList || !dataList.length) return;
@@ -19315,18 +19845,17 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-slope-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
+        key: 0,
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle !== 'slopeFilter' ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_row, {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).slopeAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle !== 'slopeFilter' ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_row, {
-        key: 1,
         class: "kq3d-slope-analysis-tip"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).skylineTips), 1
@@ -19390,7 +19919,7 @@ const __default__ = {
               _: 1
               /* STABLE */
 
-            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 'tableColor' ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 'tableColor' ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
               style: {
                 "display": "flex"
               }
@@ -19449,7 +19978,7 @@ const __default__ = {
                     "controls-position": "right"
                   }, null, 8
                   /* PROPS */
-                  , ["modelValue", "onUpdate:modelValue"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).to), 1
+                  , ["modelValue", "onUpdate:modelValue"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).to), 1
                   /* TEXT */
                   ), index > 0 && index < (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(dataList).length - 1 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_input_number, {
                     key: 2,
@@ -19504,7 +20033,7 @@ const __default__ = {
               );
             }), 128
             /* KEYED_FRAGMENT */
-            ))])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 'colorImage' ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+            ))])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 'colorImage' ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_4, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
               default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
                 label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).gradientColor
               }, {
@@ -19513,7 +20042,7 @@ const __default__ = {
                     "display": "flex"
                   }
                 }, {
-                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [_hoisted_4, _hoisted_5, _hoisted_6]),
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [_hoisted_5, _hoisted_6, _hoisted_7]),
                   _: 1
                   /* STABLE */
 
@@ -19533,7 +20062,7 @@ const __default__ = {
                         alt: ""
                       }, null, 8
                       /* PROPS */
-                      , _hoisted_7)]),
+                      , _hoisted_8)]),
                       _: 2
                       /* DYNAMIC */
 
@@ -19558,7 +20087,7 @@ const __default__ = {
               _: 1
               /* STABLE */
 
-            })])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 'slopeFilter' ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_8, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+            })])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).fillStyle === 'slopeFilter' ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_9, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
               default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
                 label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).minSlope
               }, {
@@ -19768,7 +20297,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_9, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_10, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[23] || (_cache[23] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startAnalysis(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startAnalysis,
         type: "primary"
@@ -19793,7 +20322,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -20222,17 +20751,20 @@ var gis_utils_ = __webpack_require__(826);
 var TerrainOperationViewModel = __webpack_require__(5925);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/terrainoperation/TerrainOperation.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-terrain-operation-analysis-span"
+  class: "kq3d-terrain-operation-analysis-box"
 };
 const _hoisted_2 = {
-  key: 0
+  class: "kq3d-terrain-operation-analysis-span"
 };
 const _hoisted_3 = {
+  key: 0
+};
+const _hoisted_4 = {
   class: "kq3d-terrain-operation-analysis-footer"
 };
 
@@ -20259,6 +20791,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -20305,8 +20842,21 @@ const __default__ = {
       maxExcavationDepth: props.settingParams && props.settingParams.maxExcavationDepth || 5000 // 地形开挖深度范围最大值
 
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
 
       gis_utils_.utils.getWebMap(null, scenceView => {
@@ -20322,7 +20872,18 @@ const __default__ = {
           });
         }
       });
-    }); // 改变样式
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 改变样式
+
 
     function changeStyle() {
       viewModel && viewModel.setTerrainStyle(formItem.terrainStyle);
@@ -20369,18 +20930,17 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-terrain-operation-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).terrainOperation,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), __props.operationMode === 0 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_row, {
-        key: 1
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [__props.operationMode === 0 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_row, {
+        key: 0
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_radio, {
           modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).terrainStyle,
@@ -20415,13 +20975,13 @@ const __default__ = {
         /* STABLE */
 
       })) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).terrainStyle === 1 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_row, {
-        key: 2,
+        key: 1,
         gutter: 10
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
           span: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentLang) === 'zh' ? 7 : 10
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_1, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).excavationDepth), 1
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).excavationDepth), 1
           /* TEXT */
           )]),
           _: 1
@@ -20477,13 +21037,13 @@ const __default__ = {
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).skylineTips), 1
         /* TEXT */
-        ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).terrainStyle === 2 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("p", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)("(" + (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).reverseDrawPolygon + ")"), 1
+        ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).terrainStyle === 2 ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("p", _hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)("(" + (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).reverseDrawPolygon + ")"), 1
         /* TEXT */
         )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)]),
         _: 1
         /* STABLE */
 
-      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_4, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[7] || (_cache[7] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startOperation(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startOperation,
         type: "primary"
@@ -20508,7 +21068,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -20623,28 +21183,26 @@ var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(
 var gis_utils_ = __webpack_require__(826);
 // EXTERNAL MODULE: ./src/webgl/underground/UndergroundViewModel.js
 var UndergroundViewModel = __webpack_require__(7656);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/underground/Underground.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-underground"
+  class: "kq3d-underground-switch"
 };
 
 
 
+
 const __default__ = {
   name: "kq3dUnderground"
 };
 /* harmony default export */ var Undergroundvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
   props: {
-    //设置参数
-    top: {
-      type: Number,
-      default: 20
-    },
-    right: {
-      type: Number,
-      default: 20
-    }
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object]
   },
   emits: ["undergroundChange"],
 
@@ -20660,8 +21218,14 @@ const __default__ = {
     let language = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)({});
     let isUndergroundMode = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(false);
     let viewer = null;
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null);
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           viewer = scenceView._viewer;
@@ -20693,14 +21257,15 @@ const __default__ = {
 
       const _component_kq_form = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-form");
 
-      return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
+      return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
+        class: "kq3d-underground",
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
         "label-width": "120px",
         "label-position": "left"
       }, {
-        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
-          class: "kq3d-underground-switch",
-          style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)('top: ' + props.top + 'px; right: ' + props.right + 'px;')
-        }, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_switch, {
+        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_switch, {
           modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(isUndergroundMode),
           "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.isRef)(isUndergroundMode) ? isUndergroundMode.value = $event : isUndergroundMode = $event),
           onChange: undergroundChange,
@@ -20713,13 +21278,13 @@ const __default__ = {
           }
         }, null, 8
         /* PROPS */
-        , ["modelValue", "active-text"])], 4
-        /* STYLE */
-        )]),
+        , ["modelValue", "active-text"])])]),
         _: 1
         /* STABLE */
 
-      })]);
+      })], 512
+      /* NEED_PATCH */
+      );
     };
   }
 
@@ -20875,11 +21440,14 @@ var gis_utils_ = __webpack_require__(826);
 var ViewshedAnalysisViewModel = __webpack_require__(9721);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/viewshedanalysis/ViewshedAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
+  class: "kq3d-viewshed-analysis-box"
+};
+const _hoisted_2 = {
   class: "kq3d-viewshed-analysis-footer"
 };
 
@@ -20901,6 +21469,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -20963,8 +21536,21 @@ const __default__ = {
       // 不可见颜色
       lineColor: props.settingParams && props.settingParams.lineColor || "#E6A23C"
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言类型
 
       gis_utils_.utils.getWebMap(null, scenceView => {
@@ -20981,6 +21567,16 @@ const __default__ = {
         }
       });
     });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    };
 
     function paramsChanged(key) {
       switch (key) {
@@ -21056,17 +21652,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-viewshed-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).viewshedAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-viewshed-analysis-tip"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).viewshedTips), 1
@@ -21312,7 +21907,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[16] || (_cache[16] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => startAnalysis(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).startAnalysis,
         type: "primary"
@@ -21337,7 +21932,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };
@@ -21559,11 +22154,14 @@ class WeatherEffectViewModel {
   }
 
 }
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/weathereffect/WeatherEffect.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
+  class: "kq3d-weather-effect-box"
+};
+const _hoisted_2 = {
   class: "kq3d-weather-effect-footer"
 };
 
@@ -21585,6 +22183,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -21632,8 +22235,21 @@ const __default__ = {
       endScale: props.settingParams && props.settingParams.endScale || 1.3,
       gravity: props.settingParams && props.settingParams.gravity || 1
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
 
       gis_utils_.utils.getWebMap(null, scenceView => {
@@ -21642,7 +22258,18 @@ const __default__ = {
           viewModel = new WeatherEffectViewModel(scenceView);
         }
       });
-    }); //切换雨雪天气特效
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; //切换雨雪天气特效
+
 
     function changeMode(mode) {
       if (formItem.mode !== mode) {
@@ -21736,17 +22363,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-weather-effect", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).weatherEffect,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         gutter: 20,
         class: "rowclass"
       }, {
@@ -21963,7 +22589,7 @@ const __default__ = {
               _: 1
               /* STABLE */
 
-            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)(" <kq-row>\r\n            <kq-form-item :label=\"language.lifeCycle\">\r\n              <kq-row style=\"display: flex\">\r\n                <kq-col :span=\"16\">\r\n                  <kq-slider v-model=\"formItem.lifeCycle\" :step=\"1\" :min=\"1\" :max=\"50\" @input=\"paramsChanged('lifeCycle')\"></kq-slider>\r\n                </kq-col>\r\n                <kq-col :span=\"8\">\r\n                  <kq-input-number\r\n                    v-model=\"formItem.lifeCycle\"\r\n                    :step=\"1\"\r\n                    :min=\"1\"\r\n                    :max=\"50\"\r\n                    controls-position=\"right\"\r\n                    @input=\"paramsChanged('lifeCycle')\">\r\n                  </kq-input-number>\r\n                </kq-col>\r\n              </kq-row>\r\n            </kq-form-item>\r\n          </kq-row> "), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)(" <kq-row>\r\n              <kq-form-item :label=\"language.lifeCycle\">\r\n                <kq-row style=\"display: flex\">\r\n                  <kq-col :span=\"16\">\r\n                    <kq-slider v-model=\"formItem.lifeCycle\" :step=\"1\" :min=\"1\" :max=\"50\" @input=\"paramsChanged('lifeCycle')\"></kq-slider>\r\n                  </kq-col>\r\n                  <kq-col :span=\"8\">\r\n                    <kq-input-number\r\n                      v-model=\"formItem.lifeCycle\"\r\n                      :step=\"1\"\r\n                      :min=\"1\"\r\n                      :max=\"50\"\r\n                      controls-position=\"right\"\r\n                      @input=\"paramsChanged('lifeCycle')\">\r\n                    </kq-input-number>\r\n                  </kq-col>\r\n                </kq-row>\r\n              </kq-form-item>\r\n            </kq-row> "), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
               class: "rowclass"
             }, {
               default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
@@ -22155,7 +22781,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: _cache[26] || (_cache[26] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => add(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).add,
         type: "primary"
@@ -22180,7 +22806,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["title"])])], 2
+      , ["title"])])])], 2
       /* CLASS */
       );
     };