@kq_npm/client3d_webgl_vue 3.1.1-beta → 3.1.3-beta

package/modelselect/index.js

@@ -16,6 +16,7 @@ class ModelSelectViewModel {
   //屏幕空间事件处理程序三维对象
   //拾取状态
   //高亮三维对象
+  //高亮颜色
   constructor(scenceView, pickCallFunc) {
     (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_viewer", null);
 
@@ -25,7 +26,7 @@ class ModelSelectViewModel {
 
     (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_highlight", null);
 
-    (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_modeFiled", 'id');
+    (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_highlightColor", "#FF0000");
 
     this._viewer = scenceView._viewer;
     this._drawManager = scenceView._drawManager;
@@ -34,32 +35,42 @@ class ModelSelectViewModel {
 
     this._handler.setInputAction(function (movement) {
       if (that._isPick) {
-        let pickedObject = that._viewer.scene.pick(movement.position); //console.log(pickedObject);
+        that.clearHighlight();
+
+        let pickedObject = that._viewer.scene.pick(movement.position); // console.log(pickedObject);
 
 
         if (pickedObject) {
           if (pickedObject instanceof Cesium.Cesium3DTileFeature) {
-            let properties = pickedObject.getPropertyNames() || [];
-            console.log(properties);
-
-            if (properties.indexOf(that._modeFiled) > -1) {
-              let id = pickedObject.getProperty(that._modeFiled); // that.clear();
-
-              that._highlight = new Cesium.Kq3dHighlight({
-                viewer: that._viewer,
-                tileset: pickedObject.tileset,
-                attrName: that._modeFiled,
-                attrValue: [id],
-                color: [Cesium.Color.RED]
-              });
-              let attrs = {};
-              properties.forEach(prop => {
-                attrs[prop] = pickedObject.getProperty(prop);
-              });
-              pickCallFunc && pickCallFunc(pickedObject.tileset.name || "LayerName", attrs);
-            } else {
-              console.log("Feature has no id attribute!");
-            }
+            let properties = pickedObject.getPropertyNames() || []; // console.log(properties);
+
+            that._highlight = {
+              object: pickedObject.pickId.object,
+              color: pickedObject.pickId.object.color
+            };
+            pickedObject.pickId.object.color = Cesium.Color.fromCssColorString(that._highlightColor);
+            let attrs = {};
+            properties.forEach(prop => {
+              attrs[prop] = pickedObject.getProperty(prop);
+            });
+            pickCallFunc && pickCallFunc(pickedObject.tileset.name || "LayerName", attrs); // if (properties.indexOf(that._modeFiled) > -1) {
+            //   let id = pickedObject.getProperty(that._modeFiled);
+            //   // that.clear();
+            //   that._highlight = new Cesium.Kq3dHighlight({
+            //     viewer: that._viewer,
+            //     tileset: pickedObject.tileset,
+            //     attrName: that._modeFiled,
+            //     attrValue: [id],
+            //     color: [Cesium.Color.RED]
+            //   });
+            //   let attrs = {};
+            //   properties.forEach(prop => {
+            //     attrs[prop] = pickedObject.getProperty(prop);
+            //   });
+            //   pickCallFunc && pickCallFunc(pickedObject.tileset.name || "LayerName", attrs);
+            // } else {
+            //   console.log("Feature has no id attribute!");
+            // }
           }
         }
       }
@@ -88,12 +99,21 @@ class ModelSelectViewModel {
     } else {
       throw "请添加模型后拾取!";
     }
+  }
+
+  clearHighlight() {
+    if (this._highlight) {
+      this._highlight.object.color = this._highlight.color;
+    }
+
+    this._highlight = null;
   } //清除
 
 
   clear() {
-    this._highlight && this._highlight.remove();
-    this._highlight = null;
+    this.clearHighlight(); // this._highlight && this._highlight.remove();
+    // this._highlight = null;
+
     this.setCursor("default");
     this._isPick = false;
   } //销毁
@@ -262,16 +282,21 @@ const _hoisted_1 = {
   class: "kq3d-model-select-box"
 };
 const _hoisted_2 = {
-  class: "modelTree"
+  class: "title"
 };
-const _hoisted_3 = {
+
+const _hoisted_3 = /*#__PURE__*/(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", null, "所属图层名称：", -1
+/* HOISTED */
+);
+
+const _hoisted_4 = {
   class: "footer-buttons"
 };
 
 
 
 
- // 树绑定字段
+ // tree数据源
 
 const __default__ = {
   name: "Kq3dModelSelect"
@@ -280,14 +305,15 @@ const __default__ = {
   props: {
     //指定组件绑定的viewer对象的div的id
     mapTarget: String,
-    modeFiled: {
-      default: "id",
-      type: String
-    },
     // 外部字段别名映射
     aliasNameReflection: {
       type: Function
     },
+    // 高亮颜色
+    highlightColor: {
+      type: String,
+      default: "#FF0000"
+    },
     // 是否显示阴影效果
     showShadow: {
       type: Boolean,
@@ -328,12 +354,7 @@ const __default__ = {
     expose
   }) {
     const props = __props;
-    const defaultProps = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.reactive)({
-      children: "children",
-      label: "label"
-    }); // tree数据源
-
-    let treeData = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)([]); // 属性值
+    let layerNameTitle = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(""); // 属性值
 
     let tableData = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)([]); //语言
 
@@ -368,6 +389,7 @@ const __default__ = {
         if (scenceView) {
           language.value = scenceView._language;
           viewModel = new ModelSelectViewModel/* default */.Z(scenceView, pickCallFunc);
+          viewModel._highlightColor = props.highlightColor;
         }
       });
     });
@@ -382,36 +404,45 @@ const __default__ = {
       }
     };
 
-    function setModeFiled(val) {
-      viewModel._modeFiled = val;
-    }
-
     function pick() {
       viewModel && viewModel.pick();
     }
 
     function pickCallFunc(layerName, properties) {
-      let newTreeData = [{
-        label: layerName,
-        children: [{
-          label: properties.id || "Model1"
-        }]
-      }];
-      treeData.value = newTreeData;
+      layerNameTitle.value = layerName;
       let propertiesData = [];
 
-      for (let key in properties) {
-        propertiesData.push({
-          field: key,
-          value: properties[key]
+      if (props.aliasNameReflection) {
+        let arrKeys = [];
+
+        for (let key in properties) {
+          arrKeys.push(key);
+        }
+
+        props.aliasNameReflection(arrKeys, item => {
+          console.log(item);
+
+          for (let key in properties) {
+            propertiesData.push({
+              field: item[key] ? item[key] : key,
+              value: properties[key]
+            });
+          }
         });
+      } else {
+        for (let key in properties) {
+          propertiesData.push({
+            field: key,
+            value: properties[key]
+          });
+        }
       }
 
       tableData.value = propertiesData;
     }
 
     function clear() {
-      treeData.value = [];
+      layerNameTitle.value = "";
       tableData.value = [];
       viewModel && viewModel.clear();
     } // 销毁
@@ -423,22 +454,15 @@ const __default__ = {
     expose({
       pick,
       clear,
-      pickCallFunc,
-      setModeFiled
+      pickCallFunc
     });
     return (_ctx, _cache) => {
-      const _component_KqTree = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("KqTree");
-
-      const _component_kq_scrollbar = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-scrollbar");
-
-      const _component_kq_col = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-col");
+      const _component_kq_row = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-row");
 
       const _component_kq_table_column = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-table-column");
 
       const _component_kq_table = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-table");
 
-      const _component_kq_row = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-row");
-
       const _component_kq_button = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-button");
 
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
@@ -454,72 +478,51 @@ const __default__ = {
       }, 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_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, {
-              data: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(treeData),
-              props: defaultProps,
-              "expand-on-click-node": false,
-              "default-expand-all": "",
-              "highlight-current": "",
-              "node-key": "id"
-            }, null, 8
-            /* PROPS */
-            , ["data", "props"])]),
-            _: 1
-            /* STABLE */
-
-          })])]),
-          _: 1
-          /* STABLE */
+        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, [_hoisted_3, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(layerNameTitle)), 1
+        /* TEXT */
+        )])]),
+        _: 1
+        /* STABLE */
 
-        }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
-          span: 16
+      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        class: "modelTable"
+      }, {
+        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_table, {
+          border: "",
+          stripe: "",
+          data: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(tableData),
+          style: {
+            "width": "100%",
+            "height": "100%"
+          },
+          "cell-style": {
+            padding: '8px 0'
+          },
+          "header-cell-style": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headClass)
         }, {
-          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_table, {
-            border: "",
-            stripe: "",
-            data: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(tableData),
-            style: {
-              "width": "100%",
-              "height": "100%"
-            },
-            "cell-style": {
-              padding: '8px 0'
-            },
-            "header-cell-style": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headClass)
-          }, {
-            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_table_column, {
-              label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).fieldName,
-              prop: "field",
-              align: "center"
-            }, null, 8
-            /* PROPS */
-            , ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
-              label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).fieldValue,
-              prop: "value",
-              align: "center"
-            }, null, 8
-            /* PROPS */
-            , ["label"])]),
-            _: 1
-            /* STABLE */
-
-          }, 8
+          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_table_column, {
+            label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).fieldName,
+            prop: "field",
+            align: "center"
+          }, null, 8
+          /* PROPS */
+          , ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
+            label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).fieldValue,
+            prop: "value",
+            align: "center"
+          }, null, 8
           /* PROPS */
-          , ["data", "header-cell-style"])]),
+          , ["label"])]),
           _: 1
           /* STABLE */
 
-        })]),
+        }, 8
+        /* PROPS */
+        , ["data", "header-cell-style"])]),
         _: 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[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"

package/modelselect/style/modelselect.css

@@ -1 +1 @@
-.kq3d-model-select{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-model-select .kq3d-model-select-box{width:400px}.kq3d-model-select .kq-row{height:305px}.kq3d-model-select .kq-col{height:100%}.kq3d-model-select .modelTree{width:calc(100% - var(--kq-border-width) - 12px);height:100%;border-radius:var(--kq-border-radius-base);border:var(--kq-border-width) var(--kq-border-style) var(--kq-border-color);background-color:var(--kq-bg-color);pointer-events:auto;margin-right:12px}.kq3d-model-select .modelTree .scrollbarClass{height:calc(100% - var(--kq-box-padding) - 28px)}.kq3d-model-select .kq-row{margin-bottom:10px}.kq3d-model-select .footer-buttons{float:right;padding-top:5px}
+.kq3d-model-select{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-model-select .kq3d-model-select-box{height:calc(100% - 35px)}.kq3d-model-select .kq3d-model-select-box .title span{font-weight:700;color:var(--kq-text-color-primary)}.kq3d-model-select .modelTable{width:100%;height:calc(100% - 70px);background-color:var(--kq-bg-color);pointer-events:auto}.kq3d-model-select .kq-row{margin-bottom:8px}.kq3d-model-select .footer-buttons{text-align:right}

package/package.json

@@ -1 +1 @@
-{"name":"@kq_npm/client3d_webgl_vue","description":"KQGIS Client3D for Vue.js","version":"3.1.1-beta","homepage":"","keywords":["KQGIS","webGL","Vue"],"browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"author":"KQWEB GROUP","license":"Apache-2.0","dependencies":{"colorcolor":"^1.1.1","echarts":"^5.3.3","js-cookie":"^3.0.1","omit.js":"^2.0.2","save":"^2.5.0","tinycolor2":"^1.4.2","vue-i18n":"9.2.0-beta.36","xlsx":"^0.18.5","css-vars-ponyfill":"^2.4.8","html2canvas":"^1.4.1","xe-utils":"^3.5.4"}}
+{"name":"@kq_npm/client3d_webgl_vue","description":"KQGIS Client3D for Vue.js","version":"3.1.3-beta","homepage":"","keywords":["KQGIS","webGL","Vue"],"browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"author":"KQWEB GROUP","license":"Apache-2.0","dependencies":{"colorcolor":"^1.1.1","echarts":"^5.3.3","js-cookie":"^3.0.1","omit.js":"^2.0.2","save":"^2.5.0","tinycolor2":"^1.4.2","vue-i18n":"9.2.0-beta.36","xlsx":"^0.18.5","css-vars-ponyfill":"^2.4.8","html2canvas":"^1.4.1","xe-utils":"^3.5.4"}}