@mapgis/webclient-vue-cesium 16.0.13 → 16.0.14

package/docs/api/sceneeffect/pathroaming.md

@@ -43,7 +43,8 @@
   "interpolationAlgorithm": "LagrangePolynomialApproximation",
   "isLoop": true,
   "showPath": true,
-  "showInfo": true
+  "showInfo": true,
+  "modelUrl": ""
 }
 ```
 
@@ -61,6 +62,7 @@
   | isLoop                 | Boolean | 是否循环。 默认 true                                                                                                                                                                                                                                                                                                                                      |
   | showPath               | Boolean | 是否显示路径。默认 true                                                                                                                                                                                                                                                                                                                                   |
   | showInfo               | Boolean | 是否显示提示信息。默认 true                                                                                                                                                                                                                                                                                                                               |
+  | modelUrl               | String  | 模型资源路径。默认"",可通过配置界面设置                                                                                                                                                                                                                                                                                                                   |
 
 ### `models`
 
@@ -187,7 +189,8 @@ export default {
         interpolationAlgorithm: "LagrangePolynomialApproximation",
         isLoop: true,
         showPath: true,
-        showInfo: true
+        showInfo: true,
+        modelUrl: ""
       },
       models: [
         {
@@ -278,7 +281,8 @@ export default {
         interpolationAlgorithm: "LagrangePolynomialApproximation",
         isLoop: true,
         showPath: true,
-        showInfo: true
+        showInfo: true,
+        modelUrl: ""
       },
       models: [
         {

package/docs/api/sceneeffect/sceneroaming.md

@@ -35,7 +35,8 @@
   "interpolationAlgorithm": "LagrangePolynomialApproximation",
   "isLoop": true,
   "showPath": true,
-  "showInfo": true
+  "showInfo": true,
+  "modelUrl": ""
 }
 ```
 
@@ -54,6 +55,7 @@
   |                        |
   | showPath               | Boolean | 是否显示路径。默认 true                                                                                                                                                                                                                                                                                                                                   |
   | showInfo               | Boolean | 是否显示提示信息。默认 true                                                                                                                                                                                                                                                                                                                               |
+  | modelUrl               | String  | 模型资源路径。默认"",可通过配置界面设置                                                                                                                                                                                                                                                                                                                   |
 
 ### `models`
 
@@ -174,7 +176,8 @@ export default {
         interpolationAlgorithm: "LagrangePolynomialApproximation",
         isLoop: true,
         showPath: true,
-        showInfo: true
+        showInfo: true,
+        modelUrl: ""
       },
       models: [
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapgis/webclient-vue-cesium",
-  "version": "16.0.13",
+  "version": "16.0.14",
   "description": "mapgis webclient-vue-cesium",
   "main": "dist-libs/webclient-vue-cesium.umd.min.js",
   "module1": "src/main.js",
@@ -30,7 +30,7 @@
     "@mapgis/webclient-es6-service": "16.0.3",
     "@mapgis/webclient-plot": "^16.0.0",
     "@mapgis/webclient-store": "^10.5.5",
-    "@mapgis/webclient-vue-ui": "16.0.8",
+    "@mapgis/webclient-vue-ui": "16.0.9",
     "@turf/turf": "^5.1.6",
     "@vuepress/plugin-active-header-links": "^1.7.1",
     "@vuepress/plugin-nprogress": "^1.7.1",

package/src/components/Layer/Graphic/GraphicLayer.vue

@@ -697,6 +697,9 @@ export default {
           break;
         }
       }
+    },
+    $_stopDrawAll() {
+      this.$refs.graphicLayer.$_stopDrawAll();
     }
   }
 };

package/src/components/Layer/Graphic/GraphicSingleLayer.vue

@@ -1334,8 +1334,10 @@ export default {
       }
       //设置当前绘制图标类型为鼠标选中
       this.currentIconType = "mouse";
+
+      let graphicJSON = this.$_getJsonById(json.id);
       //获取设置面板显示参数
-      this.editPanelValues = this.$_getEditPanelValuesFromJSON(json);
+      this.editPanelValues = this.$_getEditPanelValuesFromJSON(graphicJSON);
       this.editPanelValues.showOutline = false;
       let graphic = this.$_getGraphicByID(json.id);
       if (graphic && graphic.heading) {
@@ -1346,10 +1348,8 @@ export default {
           roll: roll ? Math.PI / roll : 0
         };
       }
-      let graphicJSON = this.$_getJsonById(json.id);
-      this.$refs.editPanel.$_setEditPanelValues(
-        this.$_getEditPanelValuesFromJSON(graphicJSON)
-      );
+      this.$refs.editPanel.$_setEditPanelValues(this.editPanelValues);
+
       //定义视角高度
       const { style } = graphic;
       const { offsetHeight, extrudedHeight, radiusX, width, radius } = style;
@@ -1497,12 +1497,14 @@ export default {
           );
           break;
         case "model":
+          position = graphic.positions[0];
           let Cartesian3 = new Cesium.Cartesian3(
-            json.positions[0],
-            json.positions[1],
-            json.positions[2]
+            position.x,
+            position.y,
+            position.z
           );
           center = this.$_cartesian3ToLongLat(Cartesian3);
+          this.destinationHeight += center.alt;
           destination = Cesium.Cartesian3.fromDegrees(
             center.lng,
             center.lat,
@@ -2038,37 +2040,35 @@ export default {
       const { Cesium, viewer } = this;
       const vm = this;
       if (
-        !this.transformEditor ||
-        this.transformEditor.id !== this.editPanelValues.id
+        !window.transformEditor ||
+        window.transformEditor.id !== this.editPanelValues.id
       ) {
-        //创建平移编辑器
-        this.transformEditor = new Cesium.ModelEditor({
-          container: viewer.container,
-          scene: viewer.scene,
-          transform: graphic.modelMatrix,
-          boundingSphere: graphic.boundingSphere,
-          getViewModel: function(e) {
-            if (graphic.type === "model") {
-              const { heading, pitch, roll } = e.headingPitchRoll;
-
-              vm.editPanelValues.orientation = {
-                heading: heading ? Math.PI / heading : 0,
-                pitch: pitch ? Math.PI / pitch : 0,
-                roll: roll ? Math.PI / roll : 0
-              };
-              vm.editPanelValues.positions = vm.$_cartesian3ToLongLat(
-                e.position
-              );
-              vm.$refs.editPanel.$_setEditPanelValues(vm.editPanelValues);
-            }
+        const { vueIndex, vueKey } = this;
+        let graphicLayer = this.$_getGraphicLayer(vueIndex, vueKey);
+        let getViewModel = function(e) {
+          if (graphic.type === "model") {
+            const { heading, pitch, roll } = e.headingPitchRoll;
+            vm.editPanelValues.orientation = {
+              heading: heading ? Math.PI / heading : 0,
+              pitch: pitch ? Math.PI / pitch : 0,
+              roll: roll ? Math.PI / roll : 0
+            };
+            vm.editPanelValues.positions = vm.$_cartesian3ToLongLat(e.position);
+            vm.$refs.editPanel.isUpdatePanel = false;
+            vm.$refs.editPanel.$_setEditPanelValues(vm.editPanelValues);
           }
-        });
-        this.transformEditor.id = this.editPanelValues.id;
+        };
+        //获取平移编辑器
+        window.transformEditor = graphicLayer.getTransformEditor(
+          graphic,
+          getViewModel
+        );
+        window.transformEditor.id = this.editPanelValues.id;
       } else {
-        this.transformEditor.transform = graphic.modelMatrix;
-        this.transformEditor.boundingSphere = graphic.boundingSphere;
+        window.transformEditor.transform = graphic.modelMatrix;
+        window.transformEditor.boundingSphere = graphic.boundingSphere;
       }
-      return this.transformEditor;
+      return window.transformEditor;
     },
     /**
      * 定位到模型
@@ -2089,7 +2089,8 @@ export default {
         json.positions[2]
       );
       const center = this.$_cartesian3ToLongLat(Cartesian3);
-      const destinationHeight = Number(graphic.boundingSphere.radius * 4);
+      const destinationHeight =
+        Number(graphic.boundingSphere.radius * 4) + center.alt;
       const destination = Cesium.Cartesian3.fromDegrees(
         center.lng,
         center.lat,

package/src/components/Layer/M3D/Scene.vue

@@ -1145,19 +1145,19 @@ export default {
         }
       }
     },
+    // 动态单体化下该方法执行后会导致模型大面积高亮，参考禅道bug2356
     restoreHighlight() {
-      const { g3dLayerIndex, viewer } = this;
-
-      if (!(typeof g3dLayerIndex === "number") || g3dLayerIndex < 0) return;
-      let g3dLayer = viewer.scene.layers.getLayer(g3dLayerIndex);
-      let m3ds = g3dLayer.getM3DLayerIndexes();
-      m3ds.forEach(index => {
-        let m3d = g3dLayer.getLayer(index);
-        if (m3d) {
-          m3d.reset(); //该函数目前底层MapGISM3DSet.reset无效 后期记得修改
-          m3d.pickedOid = undefined;
-        }
-      });
+      // const { g3dLayerIndex, viewer } = this;
+      // if (!(typeof g3dLayerIndex === "number") || g3dLayerIndex < 0) return;
+      // let g3dLayer = viewer.scene.layers.getLayer(g3dLayerIndex);
+      // let m3ds = g3dLayer.getM3DLayerIndexes();
+      // m3ds.forEach(index => {
+      //   let m3d = g3dLayer.getLayer(index);
+      //   if (m3d) {
+      //     m3d.reset(); //该函数目前底层MapGISM3DSet.reset无效 后期记得修改
+      //     m3d.pickedOid = undefined;
+      //   }
+      // });
     },
     handleDynamicQuery() {
       this.featurevisible = false;

package/src/components/SceneEffect/PathRoaming/PathRoaming.vue

@@ -172,7 +172,8 @@ export default {
           interpolationAlgorithm: "LagrangePolynomialApproximation",
           isLoop: true,
           showPath: true,
-          showInfo: true
+          showInfo: true,
+          modelUrl: ""
         };
       }
     },
@@ -200,7 +201,9 @@ export default {
     models: {
       handler() {
         if (this.models.length > 0 && this.models[0].value) {
-          this.modelUrl = this.models[0].value;
+          if (this.modelUrl === "" || !this.models.includes(this.modelUrl)) {
+            this.modelUrl = this.models[0].value;
+          }
         } else {
           this.modelUrl = "";
         }
@@ -211,6 +214,11 @@ export default {
     setting: {
       handler() {
         this.settingCopy = JSON.parse(JSON.stringify(this.setting));
+        // 确保this.settingCopy.modelUrl非空
+        this.modelUrl =
+          this.settingCopy.modelUrl && this.settingCopy.modelUrl !== ""
+            ? this.settingCopy.modelUrl
+            : "";
       },
       immediate: true
     }
@@ -412,6 +420,7 @@ export default {
     },
     onModelChange(value) {
       window.SceneWanderManager.animation._modelUrl = value;
+      this.settingCopy.modelUrl = value;
     }
   }
 };

package/src/components/SceneEffect/SceneRoaming.vue

@@ -52,8 +52,40 @@
                 }
               "
             >
-              <template slot="position" slot-scope="text">
-                <div class="path-position" :title="text">{{ text }}</div>
+              <!-- <template slot="position" slot-scope="text, record">
+                <mapgis-ui-input
+                  v-if="record.editable"
+                  :value="text"
+                  @change="
+                    e => handleChange(e.target.value, record.number, record)
+                  "
+                />
+                <div v-else class="path-position" :title="text">{{ text }}</div>
+              </template> -->
+              <template
+                v-for="item in ['x', 'y', 'z']"
+                :slot="item"
+                slot-scope="text, record"
+              >
+                <mapgis-ui-input
+                  v-if="record.editable"
+                  :key="item"
+                  :value="text"
+                  @change="
+                    e => handleChange(e.target.value, record.number, item)
+                  "
+                />
+                <div v-else :key="item" class="path-position" :title="text">
+                  {{ text }}
+                </div>
+              </template>
+              <template slot="operation" slot-scope="text, record">
+                <span v-if="record.editable"
+                  ><a @click="savePosition(record.number)">保存</a></span
+                >
+                <span v-else
+                  ><a @click="editPosition(record.number)">编辑</a></span
+                >
               </template>
             </mapgis-ui-table>
             <mapgis-ui-empty
@@ -138,7 +170,8 @@ export default {
           interpolationAlgorithm: "LagrangePolynomialApproximation",
           isLoop: true,
           showPath: true,
-          showInfo: true
+          showInfo: true,
+          modelUrl: ""
         };
       }
     },
@@ -157,10 +190,15 @@ export default {
     pathTotal() {
       return `${this.pathsCopy.length}条路线`;
     },
-    positions() {
-      return this.addedPositions.map((position, index) => {
-        return { number: index + 1, ...position };
-      });
+    positions: {
+      get() {
+        return this.addedPositions.map((position, index) => {
+          return { number: index + 1, ...position };
+        });
+      },
+      set(val) {
+        this.addedPositions = [...val];
+      }
     }
   },
   watch: {
@@ -193,22 +231,29 @@ export default {
           dataIndex: "x",
           align: "center",
           ellipsis: true,
-          scopedSlots: { customRender: "position" }
+          scopedSlots: { customRender: "x" }
         },
         {
           title: "纬度",
           dataIndex: "y",
           align: "center",
           ellipsis: true,
-          scopedSlots: { customRender: "position" }
+          scopedSlots: { customRender: "y" }
         },
         {
           title: "高度",
           dataIndex: "z",
           align: "center",
           ellipsis: true,
-          scopedSlots: { customRender: "position" },
+          scopedSlots: { customRender: "z" },
           width: 60
+        },
+        {
+          title: "操作",
+          dataIndex: "operation",
+          align: "center",
+          ellipsis: true,
+          scopedSlots: { customRender: "operation" }
         }
       ],
       pathsCopy: [],
@@ -216,7 +261,8 @@ export default {
       polyline: undefined,
       emptyImage: MapgisUiEmpty.PRESENTED_IMAGE_SIMPLE,
       emptyDescription: "暂无数据",
-      lastClickLineId: undefined
+      lastClickLineId: undefined,
+      pointArr: [] // 存放新增路线时保存的点位信息
     };
   },
   created() {},
@@ -261,7 +307,7 @@ export default {
 
       this.draw.startDrawingMarker({
         material,
-        addDefaultMark: true,
+        addDefaultMark: false,
         callback: coord => {
           // 获取当前坐标系标准
           const ellipsoid = vm.viewer.scene.globe.ellipsoid;
@@ -299,6 +345,9 @@ export default {
               }
             });
           }
+
+          // 绘制点 根据linePoints的内容进行绘制点
+          vm.drawPoint(true);
         }
       });
     },
@@ -351,7 +400,8 @@ export default {
           interpolationAlgorithm,
           isLoop,
           showPath,
-          showInfo
+          showInfo,
+          modelUrl: ""
         }
       };
       this.pathsCopy.push(path);
@@ -406,6 +456,14 @@ export default {
         this.polyline = undefined;
       }
     },
+    removePoint() {
+      if (this.pointArr && this.pointArr.length > 0) {
+        this.pointArr.forEach(item => {
+          this.viewer.entities.remove(item);
+        });
+        this.pointArr = [];
+      }
+    },
     showRoad() {
       this.removeRoad();
       this.polyline = this.viewer.entities.add({
@@ -421,8 +479,53 @@ export default {
       });
       this.viewer.flyTo(this.polyline);
     },
+    drawPoint(flag) {
+      // flag为true表示不需要重新绘制全部点（正常绘制路线），反之则为修改路线的点位，需要重新绘制点位
+      if (flag) {
+        // 取linePoints最后三位
+        const drawArr = [
+          this.linePoints[this.linePoints.length - 3],
+          this.linePoints[this.linePoints.length - 2],
+          this.linePoints[this.linePoints.length - 1]
+        ];
+        const point = this.viewer.entities.add({
+          position: this.Cesium.Cartesian3.fromDegrees(
+            drawArr[0],
+            drawArr[1],
+            drawArr[2]
+          ),
+          point: {
+            pixelSize: 10,
+            color: this.Cesium.Color.RED
+          }
+        });
+        this.pointArr.push(point);
+      } else {
+        this.removePoint();
+        for (let i = 0; i < this.linePoints.length - 1; i += 3) {
+          const drawArr = [
+            this.linePoints[i],
+            this.linePoints[i + 1],
+            this.linePoints[i + 2]
+          ];
+          const point = this.viewer.entities.add({
+            position: this.Cesium.Cartesian3.fromDegrees(
+              drawArr[0],
+              drawArr[1],
+              drawArr[2]
+            ),
+            point: {
+              pixelSize: 10,
+              color: this.Cesium.Color.RED
+            }
+          });
+          this.pointArr.push(point);
+        }
+      }
+    },
     _stopAdded() {
       this.removeRoad();
+      this.removePoint();
       if (this.draw) {
         this.draw.stopDrawing();
       }
@@ -439,6 +542,54 @@ export default {
     },
     _savePaths() {
       this.$emit("save-paths", this.pathsCopy);
+    },
+    savePosition(index) {
+      const newData = [...this.positions];
+      const target = newData.find(item => index === item.number);
+      if (target) {
+        delete target.editable;
+        this.positions = newData;
+      }
+      this.resizeRoaming();
+    },
+    editPosition(index) {
+      const newData = [...this.positions];
+      const currentKey = newData.find(item => item.number === index);
+      currentKey.editable = true;
+      this.positions = newData;
+    },
+    handleChange(value, index, column) {
+      const newData = [...this.positions];
+      const target = newData.find(item => index === item.number);
+      if (target) {
+        target[column] = value;
+        this.positions = newData;
+      }
+    },
+    // 重新绘制路线
+    resizeRoaming() {
+      this.linePoints = [];
+      this.addedPositions.forEach(item => {
+        this.linePoints.push(item.x);
+        this.linePoints.push(item.y);
+        this.linePoints.push(item.z);
+      });
+      if (this.addedPositions.length > 1) {
+        this.removeRoad();
+
+        this.polyline = this.viewer.entities.add({
+          name: "scence-roaming",
+          polyline: {
+            positions: this.Cesium.Cartesian3.fromDegreesArrayHeights(
+              this.linePoints
+            ),
+            width: 2,
+            material: this.Cesium.Color.RED,
+            clampToGround: false
+          }
+        });
+      }
+      this.drawPoint();
     }
   }
 };