@kq_npm/client3d_webgl_vue 4.5.56 → 4.5.57

package/gridoccupancyquery/index.js

@@ -87,19 +87,23 @@ const __default__ = {
 var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
   props: {
     mapTarget: String,
+    // 关联的地图目标 id
     settingParams: {
       type: Object,
       default: () => ({})
-    }
+    } // 组件配置参数
   },
   setup(__props, {
     expose: __expose
   }) {
     const {
       locale
-    } = (0, _useGlobalConfig.useLocale)();
+    } = (0, _useGlobalConfig.useLocale)(); // 当前语言包
+
     const props = __props;
-    let viewModel = null;
+    let viewModel = null; // 视图模型实例
+
+    // 组件挂载时获取场景视图并初始化视图模型
     (0, _vue.onMounted)(() => {
       _gisUtils.utils.getWebMap(props.mapTarget, scenceView => {
         if (scenceView) {
@@ -111,9 +115,13 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
         }
       });
     });
+
+    // 触发查询，启动绘制
     function startQuery() {
       viewModel && viewModel.start();
     }
+
+    // 组件卸载前销毁视图模型释放资源
     (0, _vue.onBeforeUnmount)(() => {
       viewModel && viewModel.destroy();
     });
@@ -172,19 +180,34 @@ var _message = _interopRequireDefault(__webpack_require__(71323));
 var _loading = _interopRequireDefault(__webpack_require__(90724));
 var _useGlobalConfig = __webpack_require__(22686);
 class GridOccupancyQueryViewModel {
+  // 加载 loading 实例
+
+  /** @description 构造函数，初始化视图模型
+   * @param {Object} scenceView 场景视图对象，包含 viewer、drawManager 等
+   * @param {Object} options 配置项，包含 queryUrl、calcLevel、isMulti 等
+   */
   constructor(scenceView, options) {
     this._viewer = null;
+    // Cesium Viewer 实例
     this._mapTarget = null;
+    // 地图容器 DOM id
     this._options = {};
+    // 外部传入的合并后配置项
     this._defaultOptions = {
       queryUrl: "",
+      // 网格占用查询服务地址
       calcLevel: 23,
-      isMulti: false
+      // 计算层级
+      isMulti: false // 是否支持多次绘制查询
     };
     this._drawManager = null;
+    // 绘制管理器实例
     this._language = null;
+    // 当前语言包
     this._htmlTag = null;
+    // 拖拽 HTML 标签实例
     this._clickGirdPrimitive = null;
+    // 网格几何图元实例
     this._loading = null;
     const {
       locale
@@ -194,13 +217,16 @@ class GridOccupancyQueryViewModel {
     this._viewer = scenceView._viewer;
     this._drawManager = scenceView._drawManager;
     this._mapTarget = scenceView._viewerId || null;
-    this._viewer.resolutionScale = 1;
-    this._viewer.postProcessStages.fxaa.enabled = true;
-    this._viewer.scene.logarithmicDepthBuffer = true;
+    this._viewer.resolutionScale = 1; // 设置渲染分辨率为 1
+    this._viewer.postProcessStages.fxaa.enabled = true; // 开启抗锯齿
+    this._viewer.scene.logarithmicDepthBuffer = true; // 启用对数深度缓冲，避免 z-fighting
   }
+
+  // 启动网格占用查询，进入标绘模式
   start() {
     const that = this;
     const queryUrl = this._options.queryUrl || "";
+    // 查询服务地址为空时给出提示并终止
     if (!queryUrl.trim()) {
       (0, _message.default)({
         message: that._language.value.webgl["gridOccupancyQueryUrlEmpty"] || "请配置查询服务地址",
@@ -210,33 +236,43 @@ class GridOccupancyQueryViewModel {
     }
     this.removeData();
     if (!this._drawManager) return;
+    // 调用绘制管理器进入标点绘制模式
     this._drawManager.startDraw("marker", {
       image: null
     }, (feature, {
       shape
     }) => {
+      // 仅处理本组件绘制组的图形
       if (!shape || !shape.groupName || shape.groupName !== "GridOccupancyQueryDraw") return;
       that.showGridOccupancyQuery(shape._position);
       that._drawManager.clearDrawGroup("GridOccupancyQueryDraw");
     }, "GridOccupancyQueryDraw", that._options.isMulti);
   }
+
+  /** @description 根据点击位置发起网格占用查询并渲染结果
+   * @param {Cesium.Cartesian3} position 点击位置的笛卡尔坐标
+   */
   showGridOccupancyQuery(position) {
     this.removeData();
     const that = this;
     const queryUrl = this._options.queryUrl || "";
     const level = this._options.calcLevel || 23;
+    // 将笛卡尔坐标转换为经纬度地理坐标
     const cartographic = Cesium.Cartographic.fromCartesian(position);
     const lon = Cesium.Math.toDegrees(cartographic.longitude);
     const lat = Cesium.Math.toDegrees(cartographic.latitude);
     const height = cartographic.height;
     const url = `${queryUrl}/airspaceOccupyPosition?lon=${lon}&lat=${lat}&height=${height}&level=${level}`;
     this._showLoading();
+
+    // 发起查询请求
     fetch(url, {
       method: "POST"
     }).then(response => {
       if (!response.ok) throw new Error("Network response was not ok");
       return response.json();
     }).then(data => {
+      // 请求成功且包含网格编码时渲染结果
       if (data.code === 200 && data.content && data.content.code) {
         const instanc = that.getGridInstanc(data.content.code);
         if (instanc) {
@@ -255,13 +291,21 @@ class GridOccupancyQueryViewModel {
       });
     });
   }
+
+  /** @description 渲染网格几何图元及信息浮窗
+   * @param {Cesium.GeometryInstance} instanc 网格几何实例
+   * @param {Object} content 查询返回的内容，包含 code、types 等
+   * @param {Cesium.Cartesian3} position 标绘点笛卡尔坐标
+   */
   renderGrid(instanc, content, position) {
     const that = this;
+    // 已存在图元时复用并更新几何实例
     if (that._clickGirdPrimitive) {
       that._clickGirdPrimitive.geometryInstances = instanc;
       that._clickGirdPrimitive._state = Cesium.PrimitiveState.READY;
       that._clickGirdPrimitive.updateVertex = true;
     } else {
+      // 首次渲染时创建带半透明红色材质的 Primitive
       that._clickGirdPrimitive = that._viewer.scene.primitives.add(new Cesium.Primitive({
         geometryInstances: instanc,
         appearance: new Cesium.MaterialAppearance({
@@ -286,8 +330,10 @@ class GridOccupancyQueryViewModel {
       }));
     }
     const code = content.code || "";
-    const gridcode = code.substring(0, (code.length + 1) / 2);
-    const type = (content.types || []).map(item => item.description).join(",");
+    const gridcode = code.substring(0, (code.length + 1) / 2); // 截取前半段作为网格编码
+    const type = (content.types || []).map(item => item.description).join(","); // 拼接占用类型描述
+
+    // 创建可拖拽 HTML 信息标签
     that._htmlTag = new Cesium.Kq3dDragableHtmlTag(that._viewer, {
       showLine: true,
       lineStyle: "solid",
@@ -302,6 +348,8 @@ class GridOccupancyQueryViewModel {
         <div class='attr'>${that._language.value.webgl["occupancyType"]}: ${type}</div>
       </div>`
     });
+
+    // 延迟绑定关闭按钮事件
     setTimeout(() => {
       const close = document.querySelector("#grid_info_close");
       if (close) {
@@ -311,10 +359,17 @@ class GridOccupancyQueryViewModel {
       }
     }, 500);
   }
+
+  /** @description 根据网格编码构建 Cesium 几何实例
+   * @param {String} code 网格编码字符串
+   * @returns {Cesium.GeometryInstance|null} 网格几何实例
+   */
   getGridInstanc(code) {
     const index = (code.length + 1) / 2;
+    // 调用 WASM 模块解码网格编码为边界框
     const grid = Module.decodeGeoSotGBCodeToBox(code.substring(0, index), code.substring(index));
     if (!grid) return null;
+    // 限制经纬度范围在合法区间内
     grid.minx = Math.max(grid.minx, -180);
     grid.maxx = Math.min(grid.maxx, 180);
     grid.miny = Math.max(grid.miny, -90);
@@ -323,6 +378,7 @@ class GridOccupancyQueryViewModel {
     const minLat = Math.min(grid.miny, grid.maxy);
     const maxLon = Math.max(grid.minx, grid.maxx);
     const maxLat = Math.max(grid.miny, grid.maxy);
+    // 构建拉伸矩形几何体
     const rectangle = new Cesium.RectangleGeometry({
       ellipsoid: Cesium.Ellipsoid.WGS84,
       rectangle: Cesium.Rectangle.fromDegrees(minLon, minLat, maxLon, maxLat),
@@ -333,6 +389,8 @@ class GridOccupancyQueryViewModel {
       geometry: rectangle
     });
   }
+
+  // 显示加载中遮罩
   _showLoading() {
     this._loading = _loading.default.service({
       lock: true,
@@ -341,12 +399,16 @@ class GridOccupancyQueryViewModel {
       target: this._mapTarget ? document.getElementById(this._mapTarget) : null
     });
   }
+
+  // 关闭加载中遮罩
   _hideLoading() {
     if (this._loading) {
       this._loading.close();
       this._loading = null;
     }
   }
+
+  // 移除已渲染的网格图元与 HTML 标签数据
   removeData() {
     if (this._htmlTag) {
       this._htmlTag.destroy();
@@ -358,12 +420,16 @@ class GridOccupancyQueryViewModel {
       this._clickGirdPrimitive.updateVertex = true;
     }
   }
+
+  // 清空数据并停止绘制
   clear() {
     this.removeData();
     this._hideLoading();
     this._drawManager?.stopDraw();
     this._drawManager?.clearDrawGroup("GridOccupancyQueryDraw");
   }
+
+  // 销毁视图模型，释放资源
   destroy() {
     this.clear();
   }
@@ -443,11 +509,11 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.kq_npm_client_leaflet_vue = exports.kq_npm_client_common_vue = exports.kq_npm_client3d_webgl_vue = void 0;
-let kq_npm_client_common_vue = exports.kq_npm_client_common_vue = window.kq_npm_client_common_vue = window.kq_npm_client_common_vue || {};
+const kq_npm_client_common_vue = exports.kq_npm_client_common_vue = window.kq_npm_client_common_vue = window.kq_npm_client_common_vue || {};
 __webpack_require__.g.kq_npm_client_common_vue = kq_npm_client_common_vue;
-let kq_npm_client_leaflet_vue = exports.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue || {};
+const kq_npm_client_leaflet_vue = exports.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue = window.kq_npm_client_leaflet_vue || {};
 __webpack_require__.g.kq_npm_client_leaflet_vue = kq_npm_client_leaflet_vue;
-let kq_npm_client3d_webgl_vue = exports.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue || {};
+const kq_npm_client3d_webgl_vue = exports.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue = window.kq_npm_client3d_webgl_vue || {};
 __webpack_require__.g.kq_npm_client3d_webgl_vue = kq_npm_client3d_webgl_vue;
 
 /***/ })

package/hawkeye/index.js

@@ -43,12 +43,20 @@ exports["default"] = void 0;
 class HawkeyeViewModel {
   //鹰眼三维对象
 
+  /** @description 构造函数，初始化鹰眼对象
+   * @param {Object} scenceView 场景视图对象，包含 viewer 等
+   * @param {Object} options 鹰眼配置项，包含 show、width、height、centerColor 等
+   */
   constructor(scenceView, options) {
     this._overviewMap = null;
     options.viewer = scenceView._viewer;
     options.centerRectColor = Cesium.Color.fromCssColorString(options.centerColor || "#0000ff").withAlpha(options.centerColorAlpha || 0.5);
     this.init(options);
   }
+
+  /** @description 初始化鹰眼地图对象
+   * @param {Object} options 鹰眼配置项
+   */
   init(options) {
     // if(!options.layers) {
     // let layers = [];
@@ -73,7 +81,9 @@ class HawkeyeViewModel {
     this._overviewMap.show = false;
   }
 
-  // 设置图层
+  /** @description 设置图层
+   * @param {Array} layers 图层数组
+   */
   setLayers(layers) {
     if (Array.isArray(layers)) {
       this._overviewMap._viewer.imageryLayers.removeAll();
@@ -188,7 +198,7 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
   setup(__props, {
     expose: __expose
   }) {
-    let viewModel = null;
+    let viewModel = null; // 鹰眼视图模型实例
 
     // 获取组件传参
     const props = __props;
@@ -211,12 +221,20 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
         }
       });
     });
+
+    // 显示鹰眼
     function show() {
       viewModel && viewModel.show();
     }
+
+    // 隐藏鹰眼
     function hide() {
       viewModel && viewModel.hide();
     }
+
+    /** @description 设置鹰眼图层
+     * @param {Array} layers 图层数组
+     */
     function setLayers(layers) {
       viewModel && viewModel.setLayers(layers);
     }

package/headertemp/index.js

@@ -62,21 +62,25 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
   setup(__props, {
     expose: __expose
   }) {
-    const proxy = (0, _vue.getCurrentInstance)();
+    const proxy = (0, _vue.getCurrentInstance)(); // 当前组件实例代理
 
     // 获取组件传参
     const props = __props;
 
     // 图标组件
     let iconBtn = (0, _vue.ref)(null);
-    let isCollapse = props.isCollapse;
+    let isCollapse = props.isCollapse; // 当前折叠状态
+
+    // 挂载时初始化图标及父节点样式
     (0, _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"]);
@@ -85,6 +89,7 @@ var _default = exports.A = /*@__PURE__*/Object.assign(__default__, {
           (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"]);