三维截取功能修改

584911253@qq.com

2023-03-15 6db44719b442b88a3cd1bb71ae74a778b3c4dabc

三维截取功能修改

 src/components/mapsdk.vue

@@ -448,6 +448,24 @@

        </el-card>
      </div>
      <!--三维截面分析弹窗-->
      <div
          class="modelClipPop"
          v-if="$store.state.propertiesFlag == '3'"
      >
        <div class="slide-bg">
          <el-slider class="slide" @change="valveChange()" :min="-300" :max="300" v-model="valueX"></el-slider>
          <span>左右截面</span>
        </div>
        <div class="slide-bg">
          <el-slider class="slide" @change="valveChange()" :min="-300" :max="300" v-model="valueY"></el-slider>
          <span>前后截面</span>
        </div>
        <div class="slide-bg">
          <el-slider class="slide" @change="valveChange()" :min="-300" :max="300" v-model="valueZ"></el-slider>
          <span>上下截面</span>
        </div>
      </div>

      <!--附件列表弹窗-->
      <el-dialog
@@ -659,6 +677,9 @@
      },
      showAttribute: false,
      attributeList: [],
      valueZ:0,
      valueX:0,
      valueY:0
    };
  },
  mounted() {
@@ -685,6 +706,10 @@
    });
    //模型捕捉
    this.catchmodel()

    window.localStorage.setItem('slider_x',this.valueX);
    window.localStorage.setItem('slider_y',this.valueY);
    window.localStorage.setItem('slider_z',this.valueZ);
  },
  methods: {

@@ -1495,6 +1520,11 @@
        this.attributeList = list;
      }
    },
    valveChange(){
      window.localStorage.setItem('slider_x',this.valueX);
      window.localStorage.setItem('slider_y',this.valueY);
      window.localStorage.setItem('slider_z',this.valueZ);
    }
  },
  destroyed() {
    this.showAttribute = false
@@ -1551,6 +1581,25 @@
        padding: 10px 20px;
      }
    }
    .modelClipPop{
      width: 350px;
      z-index: 40;
      position: absolute;
      left: 2%;
      top: 3%;
      background: rgba(255,255,255,0.85);
      border: 1px solid rgba(32, 160, 255, 0.6);
      .slide-bg{
        padding:10px;
        display: flex;
        align-items: center;
        .slide{
          width: 250px;
          margin-left: 5px;
          margin-right: 15px;
        }
      }
    }
    .pathAnalysisBox{
      width: 412px;
      height: 370px;

 src/views/Synthesis/LeftMenu.vue

@@ -678,7 +678,6 @@
          label: '其他模型'
        }],
      modelClip: false,
      clippingPlanes: null,
      showPickUp: false,
    };
  },
@@ -691,9 +690,13 @@
        // window.model = null;
      }
      sgworld.Analysis.clearCurtainContrast();
      this.showPickUp = false;
      if (this.isMenuFlag == "d") {
        this.clearAllAnalsy();
      }

      this.$store.state.propertiesFlag = '';
      Viewer.entities.removeAll();

      if (this.isMenuFlag != val) {
        if (res.id != "b9") {
@@ -1395,14 +1398,14 @@
    setIquery(res) {
      switch (res) {
        case "e2":
          Viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
          this.showPickUp = false;
          this.$store.state.mapMenuBoolean = !this.$store.state.mapMenuBoolean;
          this.$store.state.mapMenuBoxFlag = "1";
          break;
        case "e1":
          Viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
          this.$store.state.mapMenuBoolean = !this.$store.state.mapMenuBoolean;
          this.$store.state.mapMenuBoxFlag = "2";
          this.showPickUp = false;
          break;
        //拾取功能
        case "e3":
@@ -1413,7 +1416,9 @@
            Viewer.screenSpaceEventHandler.setInputAction(function (event) {
              let p = sgworld.Navigate.getMouseDegrees(event);
              console.log(p);
              that.getPickUpData(p);
              if (that.showPickUp){
                that.getPickUpData(p);
              }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
          } else {
            this.$refs.queryinfo.closeAll();
@@ -1551,6 +1556,7 @@
          var that = this;
          that.modelClip = !that.modelClip;
          if (that.modelClip) {
            that.$store.state.propertiesFlag = '3';
            if (window.model) {
              that.modelClipping();
            }
@@ -1575,6 +1581,7 @@
            }
          }
          else {
            that.$store.state.propertiesFlag = '';
            Viewer.entities.removeAll();
          }
          // window.model = sgworld.Creator.create3DTilesets(
@@ -1755,89 +1762,247 @@
      let targetY = 0.0;
      let planeEntities = [];
      let selectedPlane;
      // let clippingPlanes = new Cesium.ClippingPlaneCollection({
      //   planes: [ // ClippingPlane对象数组集合
      //     new Cesium.ClippingPlane( // 裁切面
      //       new Cesium.Cartesian3(0.0, 0.0, -1.0), // 法线方向
      //       0// 原点到平面的最短距离，设置0就好
      //     ),
      //   ],
      //   enabled: true,
      //   edgeWidth: 1.0, // 模型被裁切部分的截面线宽
      // });
      let clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: [ // ClippingPlane对象数组集合
          new Cesium.ClippingPlane( // 裁切面
            new Cesium.Cartesian3(0.0, 0.0, -1.0), // 法线方向
            0// 原点到平面的最短距离，设置0就好
          ),
          //前后切割
          new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 1, 0), 0), //后
          new Cesium.ClippingPlane(new Cesium.Cartesian3(0, -1, 0), 0),  //前
          // 左右切割
          new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0), 0), //左
          new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0), 0),  //右
          // 上下切割
          new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0.0, -1), 0),  //上→下
          // new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0.0, 1), 0),  //下→上、
        ],
        enabled: true,
        edgeWidth: 1.0, // 模型被裁切部分的截面线宽
        unionClippingRegions: true, //true 才能多个切割
      });
      let boundingSphere = window.model.boundingSphere;
      // 创建一个坐标轴，便于测试
      var transform = Cesium.Transforms.eastNorthUpToFixedFrame(boundingSphere.center);
      var modelMatrixPrimitive = Viewer.scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
        // modelMatrix: transform,
        length: 140.0
      }));

      // // 创建添加裁剪平面
      // for (let i = 0; i < clippingPlanes.length; ++i) {
      //   const plane = clippingPlanes.get(i);
      //   const planeEntity = Viewer.entities.add({
      //     position: boundingSphere.center,
      //     plane: {
      //       dimensions: new Cesium.Cartesian2(
      //         boundingSphere.radius * 1.5,
      //         boundingSphere.radius * 1.5
      //       ),//切面的长和宽
      //       material: Cesium.Color.WHITE.withAlpha(0.1),
      //       plane: new Cesium.CallbackProperty(
      //         // 添加绑定事件，不断调用
      //         createPlaneUpdateFunction(plane),
      //         false
      //       ),
      //       outline: true,
      //       outlineColor: Cesium.Color.WHITE,
      //     },
      //   });
      //   planeEntities.push(planeEntity);
      // }
      // 创建添加裁剪平面
      let m_box;
      for (let i = 0; i < clippingPlanes.length; ++i) {
        const plane = clippingPlanes.get(i);
        const planeEntity = Viewer.entities.add({
          position: boundingSphere.center,
        let plane = clippingPlanes.get(i);
        let getPlaneType = getType4Plane(plane);
        let planeEntity = Viewer.entities.add({ //添加平面实体 直观裁切面
          id: 'ClipPlane' + i,
          position: boundingSphere.center,// 根据3dtiles同步调整裁切面高度
          plane: {
            dimensions: new Cesium.Cartesian2(
              boundingSphere.radius * 1.5,
              boundingSphere.radius * 1.5
            ),
            material: Cesium.Color.WHITE.withAlpha(0.1),
            plane: new Cesium.CallbackProperty(
              // 添加绑定事件，不断调用
              createPlaneUpdateFunction(plane),
              false
            ),
            outline: true,
            dimensions: new Cesium.Cartesian2(80, 80),//切面的长和宽
            plane: new Cesium.CallbackProperty(createPlaneUpdateFunction_box(plane, getPlaneType, boundingSphere.center), false),
            material: Cesium.Color.WHITE.withAlpha(0.01),
            outline: false,
            outlineColor: Cesium.Color.WHITE,
          },
          }
        });
        planeEntities.push(planeEntity);
        if (!m_box) {
          m_box = Viewer.entities.add({
            id: 'ClopBox',
            modelMatrixPrimitive:modelMatrixPrimitive,
            position: boundingSphere.center,
            box: {
              dimensions: new Cesium.Cartesian3(boundingSphere.radius * 1.2, boundingSphere.radius * 1.2, 40),
              material: Cesium.Color.WHITE.withAlpha(0.3),
            }
          })
        }
      }
      this.clippingPlanes = clippingPlanes;
      window.model.clippingPlanes = clippingPlanes;

      // Select plane when mouse down
      // 绑定上移动事件
      const downHandler = new Cesium.ScreenSpaceEventHandler(
        Viewer.scene.canvas
      );
      downHandler.setInputAction(function (movement) {
        const pickedObject = scene.pick(movement.position);
        if (
          Cesium.defined(pickedObject) &&
          Cesium.defined(pickedObject.id.plane)
        ) {
          selectedPlane = pickedObject.id.plane;
          selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.05);
          selectedPlane.outlineColor = Cesium.Color.WHITE;
          scene.screenSpaceCameraController.enableInputs = false;
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      // const downHandler = new Cesium.ScreenSpaceEventHandler(
      //   Viewer.scene.canvas
      // );
      // downHandler.setInputAction(function (movement) {
      //   const pickedObject = scene.pick(movement.position);
      //   if (
      //     Cesium.defined(pickedObject) &&
      //     Cesium.defined(pickedObject.id.plane)
      //   ) {
      //     selectedPlane = pickedObject.id.plane;
      //     selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.05);
      //     selectedPlane.outlineColor = Cesium.Color.WHITE;
      //     scene.screenSpaceCameraController.enableInputs = false;
      //   }
      // }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

      // Release plane on mouse up
      // 绑定下移动事件
      const upHandler = new Cesium.ScreenSpaceEventHandler(
        Viewer.scene.canvas
      );
      upHandler.setInputAction(function () {
        if (Cesium.defined(selectedPlane)) {
          selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.1);
          selectedPlane.outlineColor = Cesium.Color.WHITE;
          selectedPlane = undefined;
        }
        scene.screenSpaceCameraController.enableInputs = true;
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
      // const upHandler = new Cesium.ScreenSpaceEventHandler(
      //   Viewer.scene.canvas
      // );
      // upHandler.setInputAction(function () {
      //   if (Cesium.defined(selectedPlane)) {
      //     selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.1);
      //     selectedPlane.outlineColor = Cesium.Color.WHITE;
      //     selectedPlane = undefined;
      //   }
      //   scene.screenSpaceCameraController.enableInputs = true;
      // }, Cesium.ScreenSpaceEventType.LEFT_UP);
      // Update plane on mouse move
      const moveHandler = new Cesium.ScreenSpaceEventHandler(
        Viewer.scene.canvas
      );
      moveHandler.setInputAction(function (movement) {
        if (Cesium.defined(selectedPlane)) {
          const deltaY = movement.startPosition.y - movement.endPosition.y;
          targetY += deltaY;
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      // const moveHandler = new Cesium.ScreenSpaceEventHandler(
      //   Viewer.scene.canvas
      // );
      // moveHandler.setInputAction(function (movement) {
      //   if (Cesium.defined(selectedPlane)) {
      //     const deltaY = movement.startPosition.y - movement.endPosition.y;
      //     targetY += deltaY;
      //     console.log("targetY----",targetY)
      //   }
      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      function createPlaneUpdateFunction(plane) {
        return function () {
          plane.distance = targetY;
          return plane;
        };
      }
      //获取切面的type // 上、下、左、右、前、后
      function getType4Plane(plane) {
        var m_type;
        var normal = plane._normal;
        var x = normal.x;
        var y = normal.y;
        var z = normal.z;
        if (x == 1 && y == 0 && z == 0) {
          m_type = 'left';
        }
        else if (x == -1 && y == 0 && z == 0) {
          m_type = 'right';
        }
        else if (x == 0 && y == 1 && z == 0) {
          m_type = 'behind';
        }
        else if (x == 0 && y == -1 && z == 0) {
          m_type = 'front';
        }
        else if (x == 0 && y == 0 && z == -1) {
          m_type = 'top';
        }
        return m_type;
      }
      function createPlaneUpdateFunction_box(plane, type, origin) {
        return function () {
          var num_x = window.localStorage.getItem('slider_x') / 100000;
          var num_y = window.localStorage.getItem('slider_y') / 100000;
          var num_z = window.localStorage.getItem('slider_z')/1.5;//读取滑动条值
          var origin_degree = cartesian3ToDegrees(origin);
          var target_degree_x = [origin_degree[0] + num_x, origin_degree[1], +origin_degree[2]];
          var target_degree_y = [origin_degree[0], origin_degree[1] + num_y, +origin_degree[2]];
          var target_degree_z = [origin_degree[0], origin_degree[1], +origin_degree[2] + num_z];
          var m_dis_x = Cesium.Cartesian3.distance(origin, Cesium.Cartesian3.fromDegrees(target_degree_x[0], target_degree_x[1], target_degree_x[2]));
          var m_dis_y = Cesium.Cartesian3.distance(origin, Cesium.Cartesian3.fromDegrees(target_degree_y[0], target_degree_y[1], target_degree_y[2]));
          var m_dis_z = Cesium.Cartesian3.distance(origin, Cesium.Cartesian3.fromDegrees(target_degree_z[0], target_degree_z[1], target_degree_z[2]));
          createPlanePos(origin_degree, num_x, num_y, num_z);
          let distance = 140;
          if (type == 'left') {
            if (num_x < 0) {
              plane.distance = distance - (-m_dis_x);
              return plane;
            } else {
              plane.distance = distance - m_dis_x
              return plane;
            }
          }
          else if (type == 'behind') {
            if (num_y < 0) {
              plane.distance = distance - (-m_dis_y);
              return plane;
            } else {
              plane.distance = distance - m_dis_y;
              return plane;
            }
          }
          else if (type == 'right') {
            if (num_x < 0) {
              plane.distance = distance - m_dis_x;
              return plane;
            } else {
              plane.distance = distance - (-m_dis_x);
              return plane;
            }
          }
          else if (type == 'front') {
            if (num_y < 0) {
              plane.distance = distance - m_dis_y;
              return plane;
            } else {
              plane.distance = distance - (-m_dis_y);
              return plane;
            }
          }
          else if (type == 'top') {
            if (num_z < 0) {
              plane.distance =  m_dis_z;
              // console.log('num_z=========',num_z)
              // console.log('m_dis_z=========',m_dis_z)
              // plane.distance = distance - m_dis_z;
              return plane;
            } else {
              // plane.distance = 100;
              plane.distance = distance - (-m_dis_z);
              return plane;
            }
          }
          return plane;
        };
      }

      function createPlanePos(origin, x, y, z) {
        var clipbox=Viewer.entities.getById('ClopBox');
        if (clipbox) {
          clipbox.position=new Cesium.CallbackProperty(function () {
            return Cesium.Cartesian3.fromDegrees(origin[0] + x, origin[1] + y, +origin[2] + z);//实时返回当前盒子的位置
          }, false);
        }
      }
      function cartesian3ToDegrees(cartesian3) {
        var ellipsoid = Viewer.scene.globe.ellipsoid;
        var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var alt = cartographic.height;
        var pos = [lng, lat, alt];
        return pos;
      }

    },

    //关闭管道信息弹窗
@@ -2070,6 +2235,7 @@
      var std = data.result;
      var that = this;
      var checkKey = [];
      let checkedLayers = [];
      var val = std.filter((str) => {
        if (str.type == 1) {
          return str;
@@ -2078,11 +2244,15 @@
          if (str.isShow == 1) {
            checkKey.push(str.id);
            that.setAddLayers(str);
            if (str.serveType == "WMS" && str.url){
              checkedLayers.push(str);
            }
          }
          return str;
        }
      });

      //存储选中图层
      sessionStorage.setItem("checkedLayers",JSON.stringify(checkedLayers));
      var res = this.setTreeData(val);

      for (var i in res) {