@kq_npm/client3d_webgl_vue 0.0.1-beta

package/scenceview/style/css.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./scenceview.css");

package/scenceview/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./scenceview.css");

package/scenceview/style/scenceview.css

@@ -0,0 +1 @@
+:root{--kq-box-padding:16px;--kq-header-bg-color:var(--kq-color-primary);--kq-header-border-color:var(--kq-color-primary)}.kq-scence-view,.kq-scence-view .view-container{width:100%;height:100%;margin:0;padding:0;overflow:hidden}.kq-scence-view .view-container canvas{outline:0}.kq-scence-view .view-container .view-left-tools{position:absolute;left:16px;top:16px;width:32px;z-index:9999;color:#fff}.kq-scence-view .view-container .view-left-tools .kq-button{height:32px;width:32px}.kq-scence-view .view-container .view-left-tools .kq-button .kq-icon path{fill:var(--kq-text-color-regular)}.kq-scence-view .view-container .view-left-tools .kq-button+.kq-button{margin-left:0;margin-top:16px}.kq-scence-view .view-container .view-left-tools .compass{-webkit-clip-path:circle(50%);clip-path:circle(50%)}

package/screenshot/index.js

@@ -0,0 +1,551 @@
+/******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	!function() {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = function(module) {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				function() { return module['default']; } :
+/******/ 				function() { return module; };
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	!function() {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = function(exports, definition) {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	!function() {
+/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	!function() {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = function(exports) {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "ScreenshotViewModel": function() { return /* reexport */ ScreenshotViewModel; },
+  "default": function() { return /* reexport */ Screenshot; }
+});
+
+;// CONCATENATED MODULE: external {"root":"Vue","commonjs":"vue","commonjs2":"vue","amd":"vue"}
+var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject = require("vue");
+;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/_utils/gis-utils"
+var gis_utils_namespaceObject = require("@zpc_npm/vue-iclient-common/_utils/gis-utils");
+;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+;// CONCATENATED MODULE: ./src/webgl/screenshot/ScreenshotViewModel.js
+
+//Box裁剪逻辑类
+class ScreenshotViewModel {
+  constructor(viewer, options) {
+    _defineProperty(this, "_viewer", null);
+
+    _defineProperty(this, "_options", null);
+
+    _defineProperty(this, "_cameraToImage", null);
+
+    this._options = {
+      width: options.imgWidth,
+      height: options.imgHeight,
+      imageType: options.imgFormat,
+      fixedRatio: options.lockAspectRatio,
+      //锁定宽高比
+      style: options.tilesetStyle,
+      //倾斜样式
+      tilesetName: options.tilesetName //倾斜名称
+
+    };
+    this._viewer = viewer;
+    this._viewer.enabledFXAA = true; //声明场景出图类
+
+    this._cameraToImage = new Cesium.Kq3dCanvasToImage(viewer._container.id, {
+      viewer: viewer,
+      canvas: viewer.scene.canvas
+    });
+    let that = this;
+    setTimeout(() => {
+      let tileset = this.findLayerByName(this._options.tilesetName);
+
+      if (tileset) {
+        if (tileset instanceof Array && tileset.length > 0) {
+          tileset[0].readyPromise.then(function (tileset) {
+            tileset.style = new Cesium.Cesium3DTileStyle(that._options.style);
+          });
+        } else if (tileset instanceof Object) {
+          tileset.readyPromise.then(function (tileset) {
+            tileset.style = new Cesium.Cesium3DTileStyle(that._options.style);
+          });
+        }
+      }
+    }, 800);
+  } // 查找所有3dtiles模型对象
+
+
+  findLayers() {
+    let tilesets = [];
+    const primitives = this._viewer.scene.primitives._primitives;
+
+    for (let m = 0; m < primitives.length; m++) {
+      if (primitives[m] instanceof Cesium.Cesium3DTileset) {
+        tilesets.push({
+          guid: primitives[m].guid,
+          name: primitives[m].name ? primitives[m].name : primitives[m].guid
+        });
+      }
+    }
+
+    return tilesets;
+  } // 出图
+
+
+  sceneFigure() {
+    this.saveAsimages();
+  } // 返回base64
+
+
+  saveAsimages() {
+    //设置宽、高、图片类型
+    var options = {
+      width: this._options.width,
+      //图片宽度
+      height: this._options.height,
+      //图片高度
+      type: this._options.imageType //图片类型
+
+    }; //返回图片
+
+    var img = this._cameraToImage.saveAsimages(this._viewer.scene.canvas, options);
+
+    return img;
+  } // 返回base64
+
+
+  toDataURL() {
+    var base64 = this._cameraToImage.toDataURL({
+      width: this._options.width,
+      height: this._options.height,
+      type: Cesium.Kq3dImageFormatter.JPG
+    });
+
+    return base64;
+  } //根据id获取tileset对象
+
+
+  findLayerByName(name) {
+    const primitives = this._viewer.scene.primitives._primitives;
+    const tileset = primitives.find(function (item) {
+      return item.name === name;
+    });
+    return tileset;
+  } //根据宽度计算高度
+
+
+  calcWidthByWindowRatio(width) {
+    var r = this._viewer.scene.canvas.width / this._viewer.scene.canvas.height;
+    return parseInt(width * r);
+  } //根据高度计算宽度
+
+
+  calcHeightByWindowRatio(height) {
+    var r = this._viewer.scene.canvas.width / this._viewer.scene.canvas.height;
+    return parseInt(height / r);
+  } // 设置图片宽度
+
+
+  setImgAspectRatio(val) {
+    this._options.fixedRatio = val;
+  } // 设置图片宽度
+
+
+  setImgWidth(val) {
+    this._options.width = val;
+  } // 设置图片高度
+
+
+  setImgHeight(val) {
+    this._options.height = val;
+  } // 设置图片类型
+
+
+  setImgType(val) {
+    this._options.imageType = val;
+  } // 注销
+
+
+  destroy() {
+    if (this._cameraToImage) this._cameraToImage = null;
+  }
+
+}
+;// 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"
+};
+const _hoisted_2 = {
+  class: "kq3d-screenshot-footer"
+};
+
+
+ // 场景宽度
+
+const __default__ = {
+  name: "Kq3dScreenShot"
+};
+/* harmony default export */ var Screenshotvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
+  props: {
+    // 设置参数
+    settingParams: {
+      type: Object
+    }
+  },
+
+  setup(__props, {
+    expose
+  }) {
+    const props = __props;
+    let imgWidthMax = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.ref)(800); // 场景高度
+
+    let imgHeightMax = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.ref)(800);
+    let language = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.ref)({}); // 分析类
+
+    let viewModel = null; // 获取组件传参
+    //设置样式
+
+    var style = {
+      color: {
+        conditions: [["${height} >= 250", "rgb(255, 0, 0)"], ["${height} >= 200", "rgb(255, 255, 0)"], ["${height} >= 150", "rgb(255, 255, 255)"], ["${height} >= 100", "rgb(0, 0, 255)"], ["${height} >= 80", "rgb(0, 255, 255)"], ["${height} >= 50", "rgb(255, 0, 255)"], ["${height} >= 20", "rgb(0, 255, 0)"], ["true", "rgb(125527, 255, 255)"]]
+      }
+    };
+    let formItem = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.reactive)({
+      lockAspectRatio: props.settingParams && props.settingParams.lockAspectRatio || true,
+      // 锁定宽高比
+      imgWidth: props.settingParams && props.settingParams.imgWidth || 0,
+      // 图片宽度
+      imgHeight: props.settingParams && props.settingParams.imgHeight || 0,
+      // 图片高度
+      imgFormat: props.settingParams && props.settingParams.imgFormat || "JPG",
+      // 图片格式
+      tilesetName: props.settingParams && props.settingParams.tilesetName || "ShangHai-White",
+      //倾斜摄影名称
+      tilesetStyle: props.settingParams && props.settingParams.tilesetStyle || style // 倾斜摄影样式
+
+    });
+    (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.onMounted)(() => {
+      gis_utils_namespaceObject.utils.getWebMap(null, scenceView => {
+        if (scenceView) {
+          language.value = scenceView._language;
+          var canvas = scenceView._viewer.scene.canvas;
+          imgWidthMax.value = canvas.width;
+          imgHeightMax.value = canvas.height;
+          formItem.imgWidth = canvas.width;
+          formItem.imgHeight = canvas.height;
+          viewModel = new ScreenshotViewModel(scenceView._viewer, formItem);
+        }
+      });
+    }); // 场景出图
+
+    function sceneFigure() {
+      viewModel && viewModel.sceneFigure();
+    } // 参数联动
+
+
+    function paramsChanged(key) {
+      if (!viewModel) return;
+
+      switch (key) {
+        case "lockAspectRatio":
+          viewModel.setImgAspectRatio(formItem.lockAspectRatio);
+          break;
+
+        case "imgWidth":
+          viewModel.setImgWidth(formItem.imgWidth);
+          formItem.imgHeight = formItem.lockAspectRatio ? viewModel.calcHeightByWindowRatio(formItem.imgWidth) : Number(formItem.imgWidth);
+          viewModel.setImgHeight(formItem.imgHeight);
+          break;
+
+        case "imgHeight":
+          viewModel.setImgHeight(formItem.imgHeight);
+          formItem.imgWidth = formItem.lockAspectRatio ? viewModel.calcWidthByWindowRatio(formItem.imgHeight) : Number(formItem.imgHeight);
+          viewModel.setImgWidth(formItem.imgWidth);
+          break;
+
+        case "imgFormat":
+          viewModel.setImgType(formItem.imgFormat);
+          break;
+
+        default:
+          break;
+      }
+    } // 销毁
+
+
+    (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.onBeforeUnmount)(() => {
+      viewModel && viewModel.destroy();
+    });
+    expose({
+      paramsChanged,
+      sceneFigure
+    });
+    return (_ctx, _cache) => {
+      const _component_kq_checkbox = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-checkbox");
+
+      const _component_kq_row = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-row");
+
+      const _component_kq_input_number = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-input-number");
+
+      const _component_kq_col = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-col");
+
+      const _component_kq_form_item = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-form-item");
+
+      const _component_kq_option = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-option");
+
+      const _component_kq_select = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-select");
+
+      const _component_kq_form = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-form");
+
+      const _component_kq_button = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.resolveComponent)("kq-button");
+
+      return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createElementBlock)("section", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_form, {
+        "label-width": "120px",
+        "label-position": "left"
+      }, {
+        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_row, null, {
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_checkbox, {
+            modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(formItem).lockAspectRatio,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(formItem).lockAspectRatio = $event),
+            onChange: _cache[1] || (_cache[1] = $event => paramsChanged('lockAspectRatio'))
+          }, {
+            default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createTextVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(language).lockAspectRatio), 1
+            /* TEXT */
+            )]),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["modelValue"])]),
+          _: 1
+          /* STABLE */
+
+        }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_row, null, {
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_form_item, {
+            label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(language).imgWidth + '(px)'
+          }, {
+            default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_row, {
+              style: {
+                "display": "flex"
+              }
+            }, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_col, {
+                span: 24
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_input_number, {
+                  modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(formItem).imgWidth,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(formItem).imgWidth = $event),
+                  step: 1,
+                  min: 200,
+                  max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(imgWidthMax),
+                  "controls-position": "right",
+                  onInput: _cache[3] || (_cache[3] = $event => paramsChanged('imgWidth'))
+                }, null, 8
+                /* PROPS */
+                , ["modelValue", "max"])]),
+                _: 1
+                /* STABLE */
+
+              })]),
+              _: 1
+              /* STABLE */
+
+            })]),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["label"])]),
+          _: 1
+          /* STABLE */
+
+        }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_row, null, {
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_form_item, {
+            label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(language).imgHeight + '(px)'
+          }, {
+            default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_row, {
+              style: {
+                "display": "flex"
+              }
+            }, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_col, {
+                span: 24
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_input_number, {
+                  modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(formItem).imgHeight,
+                  "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(formItem).imgHeight = $event),
+                  step: 1,
+                  min: 100,
+                  max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(imgHeightMax),
+                  "controls-position": "right",
+                  onInput: _cache[5] || (_cache[5] = $event => paramsChanged('imgHeight'))
+                }, null, 8
+                /* PROPS */
+                , ["modelValue", "max"])]),
+                _: 1
+                /* STABLE */
+
+              })]),
+              _: 1
+              /* STABLE */
+
+            })]),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["label"])]),
+          _: 1
+          /* STABLE */
+
+        }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_row, null, {
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_form_item, {
+            label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(language).imgFormat
+          }, {
+            default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_row, {
+              style: {
+                "display": "flex"
+              }
+            }, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_select, {
+                modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(formItem).imgFormat,
+                "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(formItem).imgFormat = $event),
+                onChange: _cache[7] || (_cache[7] = $event => paramsChanged('imgFormat')),
+                style: {
+                  "width": "100%"
+                }
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_option, {
+                  label: "JPG",
+                  value: "jpg"
+                }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_option, {
+                  label: "PNG",
+                  value: "png"
+                }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_option, {
+                  label: "BMP",
+                  value: "bmp"
+                }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_option, {
+                  label: "GIF",
+                  value: "gif"
+                }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_option, {
+                  label: "JPEG",
+                  value: "jpeg"
+                })]),
+                _: 1
+                /* STABLE */
+
+              }, 8
+              /* PROPS */
+              , ["modelValue"])]),
+              _: 1
+              /* STABLE */
+
+            })]),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["label"])]),
+          _: 1
+          /* STABLE */
+
+        })]),
+        _: 1
+        /* STABLE */
+
+      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createVNode)(_component_kq_button, {
+        onClick: _cache[8] || (_cache[8] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withModifiers)($event => sceneFigure(), ["stop"])),
+        title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(language).screenshotTips,
+        type: "primary"
+      }, {
+        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.createTextVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_namespaceObject.unref)(language).screenshotTips), 1
+        /* TEXT */
+        )]),
+        _: 1
+        /* STABLE */
+
+      }, 8
+      /* PROPS */
+      , ["title"])])]);
+    };
+  }
+
+}));
+;// CONCATENATED MODULE: ./src/webgl/screenshot/Screenshot.vue?vue&type=script&setup=true&lang=js
+ 
+;// CONCATENATED MODULE: ./src/webgl/screenshot/Screenshot.vue
+
+
+
+const __exports__ = Screenshotvue_type_script_setup_true_lang_js;
+
+/* harmony default export */ var Screenshot = (__exports__);
+;// CONCATENATED MODULE: external "@zpc_npm/vue-iclient-common/init.js"
+var init_js_namespaceObject = require("@zpc_npm/vue-iclient-common/init.js");
+var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_namespaceObject);
+;// CONCATENATED MODULE: ./src/webgl/screenshot/index.js
+
+
+
+
+Screenshot.install = (Vue, opts) => {
+  init_js_default()(Vue, opts);
+  Vue.component(Screenshot.name, Screenshot);
+};
+
+
+module.exports = __webpack_exports__;
+/******/ })()
+;

package/screenshot/style/css.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./screenshot.css");

package/screenshot/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./screenshot.css");

package/screenshot/style/screenshot.css

@@ -0,0 +1 @@
+:root{--kq-box-padding:16px;--kq-header-bg-color:var(--kq-color-primary);--kq-header-border-color:var(--kq-color-primary)}.kq3d-screenshot{z-index:999;width:200px;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-screenshot.shadow{-webkit-box-shadow:var(--kq-box-shadow);box-shadow:var(--kq-box-shadow)}.kq3d-screenshot .kq3d-screenshot-tip{color:var(--kq-text-color-regular);font-size:13px}.kq3d-screenshot .kq3d-screenshot-tip p{margin:5px 0}.kq3d-screenshot .kq-form-item{margin-bottom:0}.kq3d-screenshot .kq-form-item__label{padding:0}.kq3d-screenshot .kq-form-item__content{text-align:end;display:block}.kq3d-screenshot .kq-row{margin-bottom:5px;display:block}.kq3d-screenshot .kq-input-number{width:80px}.kq3d-screenshot .kq-input-number .kq-input-number__decrease,.kq3d-screenshot .kq-input-number .kq-input-number__increase{width:20px}.kq3d-screenshot .kq-input-number .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-screenshot .kq3d-screenshot-footer{float:right;padding-top:16px}