+3d 2.5d

liuyg

2021-12-31 e40ee62d3e9b71ffe3432d32a53a00c4097b5708

+3d  2.5d

 src/components/mobileCortrol/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="m-left-control">
    <div class="m-l-inbut zoom-in" @click="zoomIn">
    <div class="m-l-inbut zoom-in" @click="zoomIn()">
      <i class="el-icon-refresh"></i>
    </div>
    <div
@@ -8,7 +8,7 @@
      :class="{ active: dimension == '2D' }"
      @click="zoomIn('2D')"
    >
      2D
      3D
    </div>
    <div
      class="m-l-inbut zoom-in m-l-inbut-3d"
@@ -48,7 +48,9 @@
      //   noOpen: true,
      // });
      if (val) {
        this.$store.dispatch("MSET_DIMENSIONS", val);
        if (this.dimension != val) {
          this.$store.dispatch("MSET_DIMENSIONS", val);
        }
        return;
      }
      this.startPointFn();
@@ -58,6 +60,11 @@
</script>

<style scoped lang='scss'>
@property --color {
  syntax: "<color>";
  inherits: false;
  initial-value: 25%;
}
.m-left-control {
  position: fixed;
  left: 20px;
@@ -81,18 +88,33 @@
    position: relative;
    top: 60px;
    font-size: 16px;
    &:hover {
      background-color: rgb(21, 136, 230);
      box-shadow: -2px -2px 3px rgb(3, 74, 136) inset;
    }
    // &:hover {
    //   background-color: rgb(21, 136, 230);
    //   box-shadow: -2px -2px 3px rgb(3, 74, 136) inset;
    // }
  }
  .m-l-inbut-3d {
    @extend .m-l-inbut-2d;
    top: 55px;
  }

  .active {
    background-color: rgb(72, 157, 226);
    box-shadow: -2px -2px 3px rgb(16, 93, 161) inset;
    // background-color: rgb(92, 181, 255);
    box-shadow: -4px -4px 10px rgb(13, 98, 167) inset;
    // color: rgb(0, 0, 0);
    // box-shadow: -4px -4px 10px rgb(13, 98, 167) inset;

    // position: relative;
    // &::before {
    //   top: 1px;
    //   left: 1px;
    //   position: absolute;
    //   content: "";
    //   width: 100%;
    //   height: 100%;
    //   box-shadow: -2px -2px 15px rgb(4, 95, 170) inset;
    //   // border: 1px solid rgb(14, 54, 87);
    // }
  }
}
</style>

 src/components/mobileGoTo/index.vue

@@ -1,7 +1,9 @@
<template>
  <div v-show="openmobileGoTo" class="mobileGoTo">
    <el-input v-model="lnt"></el-input>
    <el-input v-model="lat"></el-input>
    <el-input v-model="height"></el-input>
    <el-input v-model="heading"></el-input>
    <el-input v-model="pitch"></el-input>
    <el-input v-model="roll"></el-input>
    <!-- <el-input v-model="alt"></el-input> -->
    <el-button type="primary" @click="submitForm('')">跳转</el-button>
  </div>
@@ -18,6 +20,8 @@
      "query",
      "MobileWindowChangeData",
      "ccDataState",
      "perspectiveControls",
      "perspectiveControl",
    ]),
  },
  data() {
@@ -25,6 +29,10 @@
      lnt: "121.53772514948211",
      lat: "31.23938286341316",
      alt: "90.648862227",
      height: 800,
      heading: 0,
      pitch: -45,
      roll: 0,
    };
  },
  watch: {
@@ -36,21 +44,34 @@
      this.lnt = this.query.lntLat[0];
      this.lat = this.query.lntLat[1];
    },
    perspectiveControls() {
      this.height = this.perspectiveControl.height;
      this.heading = this.perspectiveControl.heading;
      this.pitch = this.perspectiveControl.pitch;
      this.roll = this.perspectiveControl.roll;
    },
  },
  methods: {
    submitForm() {
      if (this.lnt && this.lat) {
        let that = this;
        // 定制化窗体
        let position = {};
        let lntLat = [that.lnt, that.lat];
        // let position = {};
        // let lntLat = [that.lnt, that.lat];
        // let d = {
        //   position,
        //   lntLat,
        //   query: { position, lntLat },
        //   useJWD: true, //仅使用经纬度
        // };
        // that.$store.dispatch("setMobileWindows", d);
        let d = {
          position,
          lntLat,
          query: { position, lntLat },
          useJWD: true, //仅使用经纬度
          height: this.height,
          heading: this.heading,
          pitch: this.pitch,
          roll: this.roll,
        };
        that.$store.dispatch("setMobileWindows", d);
        that.$store.dispatch("MSET_GOTOCC", d);
      }
    },
  },

 src/components/mobilemap/index.vue

@@ -47,6 +47,7 @@
      "popupsDom",
      "MobileWindowsHideFixed",
      "dimension",
      "dimensionData",
    ]),
  },
  watch: {
@@ -200,35 +201,40 @@
        // console.log(height);
      });

      // viewer.on(that.DC.SceneEventType.CAMERA_MOVE_END, (e) => {
      viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, (e) => {
        //相机移动最后参数
        //控制高度
        const height = Math.ceil(viewer.camera.positionCartographic.height);
        let orientation = {
          heading: that.DC.Namespace.Cesium.Math.toRadians(0), // 方向
          pitch: that.DC.Namespace.Cesium.Math.toRadians(
            that.dimension == "2D" ? -90 : that.dimension == "2.5D" ? -45 : -45
          ), // 倾斜角度
          roll: 0,
        let conBack = (height) => {
          viewer.camera.setView({
            destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
              viewer.camera.positionCartographic.longitude,
              viewer.camera.positionCartographic.latitude,
              height
            ),
            orientation: {
              heading: that.DC.Namespace.Cesium.Math.toRadians(
                that.dimensionData.heading
              ), // 方向
              pitch: that.DC.Namespace.Cesium.Math.toRadians(
                that.dimensionData.pitch
              ), // 倾斜角度
              roll: that.dimensionData.roll,
            },
          });
        };
        if (height < 300) {
          viewer.camera.setView({
            destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
              viewer.camera.positionCartographic.longitude,
              viewer.camera.positionCartographic.latitude,
              300
            ),
            orientation: orientation,
          });
        // if (height < 300) {
        //   conBack(300);
        // }
        // if (height > 2000) {
        //   conBack(2000);
        // }
        if (height < 500) {
          conBack(500);
        }
        if (height > 2000) {
          viewer.camera.setView({
            destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
              viewer.camera.positionCartographic.longitude,
              viewer.camera.positionCartographic.latitude,
              2000
            ),
            orientation: orientation,
          });
        if (height > 6000) {
          conBack(6000);
        }
      });

@@ -276,15 +282,16 @@
      //白模型↑

      //精细模型↓
      // const tilesetLayer = new that.DC.TilesetLayer("tilesetLayer");
      // viewer.addLayer(tilesetLayer);
      // const tileset = new that.DC.Tileset(
      //   "http://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
      //   {
      //     luminanceAtZenith: 0.5,
      //   }
      // );
      // tilesetLayer.addOverlay(tileset);
      const tilesetLayer = new that.DC.TilesetLayer("tilesetLayer");
      viewer.addLayer(tilesetLayer);
      const tileset = new that.DC.Tileset(
        "http://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
        {
          luminanceAtZenith: 0.5,
        }
      );
      tilesetLayer.addOverlay(tileset);
      // tilesetLayer.show = false;
      //精细模型↑

      // 2.5D贴图↓
@@ -325,6 +332,19 @@
      // 2.5D贴图↑
      let startPoint;
      if (false) {
        startPoint = () => {
          viewer.flyTo(tileset);
          // that.$store.dispatch("mapFlyTo", {
          //   //飞入
          //   lntLat: [115.87988885, 28.72502592, 2100],
          //   // lntLat: [115.87186406, 28.74449337, 1200],
          //   // lntLat: [121.50492752204283, 31.21567802276832, 2530],
          //   heading: 0,
          //   pitch: -45,
          //   roll: 0,
          //   noOpen: true,
          // });
        };
        setTimeout((res) => {
          //转圈
          that.$store.dispatch("mapFlyTo", {
@@ -344,26 +364,14 @@
              //   roll: 0,
              //   noOpen: true,
              // });
              startPoint = () => {
                that.$store.dispatch("mapFlyTo", {
                  //飞入
                  lntLat: [115.87988885, 28.72502592, 2100],
                  // lntLat: [115.87186406, 28.74449337, 1200],
                  // lntLat: [121.50492752204283, 31.21567802276832, 2530],
                  heading: 0,
                  pitch: -45,
                  roll: 0,
                  noOpen: true,
                });
              };

              startPoint();
            },
          });
          // viewer.flyTo(tileset);
        }, 2500);
      } else {
        startPoint = (val) => {
          console.log(val);
        startPoint = () => {
          // viewer.zoomToPosition(
          //   new DC.Position(115.86798885, 28.72502592, 2100, 0, -45)
          // );
@@ -377,16 +385,18 @@
            ),
            orientation: {
              // 指向
              heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
              heading: that.DC.Namespace.Cesium.Math.toRadians(
                that.dimensionData.heading
              ),
              // 视角
              pitch: that.DC.Namespace.Cesium.Math.toRadians(
                val == "2D" ? -90 : val == "2.5D" ? -45 : -45
                that.dimensionData.pitch
              ),
              roll: 0.0,
              roll: that.dimensionData.roll,
            },
          });
        };
        startPoint(that.dimension);
        startPoint();
      }
      //传递默认位置
      that.$store.commit("MSET_MORENWEIZHI", startPoint);
@@ -474,11 +484,25 @@
      viewer.distanceLegend.enable = false;
      if (true) {
        // viewer.scene.screenSpaceCameraController.enableZoom = false; //控制视角缩放
        viewer.scene.screenSpaceCameraController.enableTilt = false; //控制视角旋转
        // viewer.scene.screenSpaceCameraController.enableTilt = false; //控制视角旋转
        // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200; //最小缩放
        // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1900; //最大缩放
        // 2D和哥伦布视图
        // 控制视角平移：scene.screenSpaceCameraController.enableTranslate = true;
        // 最小
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500;
        // 最大
        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000;
        // 设置相机缩小时的速率
        viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000;
        // 设置相机放大时的速率
        viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
        // 视角平移
        viewer.scene.screenSpaceCameraController.enableRotate = true;
        // 视角缩放
        viewer.scene.screenSpaceCameraController.enableZoom = true;
        // 视角旋转
        viewer.scene.screenSpaceCameraController.enableTilt = false;
      }
    }


 src/store/getters.js

@@ -17,6 +17,7 @@
    MobileWindowChangeDataFixed: state => state.mobile.MobileWindowChangeDataFixed, // 固定窗口
    startPointFn: state => state.mobile.startPointFn,// 默认起始点位置
    dimension: state => state.mobile.dimension,// 维度
    dimensionData: state => state.mobile.dimensionData,// 维度镜头数据
    perspectiveControl: state => state.mobile.perspectiveControl,///视角控制：高度、角度  ()=>{}
}


 src/store/modules/mobile.js

@@ -30,8 +30,14 @@
        },
        //默认起始点函数
        startPointFn: '',
        dimension: "2D",// 维度
        dimension: "2.5D",// 维度
        dimensionData: {// 维度镜头数据
            heading: 0,
            pitch: -90,
            roll: 0
        },
        perspectiveControl: '',//视角控制：高度、角度  ()=>{}
        perspectiveControls: '',//视角控制：高度、角度  ()=>{}
    },
    mutations: {
        MSET_VIEWER(state, viewer) {
@@ -96,11 +102,25 @@
        //切换2D和2.5D
        MSET_DIMENSION(state, data) {
            state.dimension = data;
            if (data == "2D") {
                state.dimensionData = {// 维度镜头数据
                    heading: 0,
                    pitch: -90,
                    roll: 0
                };
            } else if (data == "2.5D") {
                state.dimensionData = {// 维度镜头数据
                    heading: 0,
                    pitch: -90,
                    roll: 0
                };
            }
        },
        //切换控制
        MSET_PERSPECTIVECONTROL(state, data) {
            state.perspectiveControl = data;
        }
            state.perspectiveControls = !state.perspectiveControls;
        },
    },
    actions: {
        MSET_CREADE({ state, commit, dispatch }) {
@@ -111,12 +131,12 @@
            // 关闭前一个弹窗？
            dispatch("closeMobileWindowsDom");
            let clas, Flys;

            const nowHeight = Math.ceil(state.mviewer.camera.positionCartographic.height);
            if (state.dimension == "2D") {
                Flys = [
                    +data.lntLat[0] + 0.01197,
                    +data.lntLat[1] - 0.0001,
                    330,
                    nowHeight,
                ]
                clas = [
                    data.from == "PopupOurOnce" ? +data.lntLat[0] : +data.lntLat[0],
@@ -190,7 +210,7 @@
                // 330,
                ...Flys,
                0,
                state.dimension == "2D" ? -90 : state.dimension == "2.5D" ? -45 : -45
                state.dimensionData.pitch
            );
            dispatch("mapFlyTo", {//飞入
                lntLat: [Position.lng, Position.lat, Position.alt],
@@ -332,6 +352,41 @@
        },
        MSET_DIMENSIONS({ state, commit, dispatch }, val) {
            commit("MSET_DIMENSION", val);
            //控制高度
            const height = Math.ceil(state.mviewer.camera.positionCartographic.height);
            state.mviewer.camera.setView({
                destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    state.mviewer.camera.positionCartographic.longitude,
                    state.mviewer.camera.positionCartographic.latitude,
                    height
                ),
                orientation: {
                    heading: global.DC.Namespace.Cesium.Math.toRadians(state.dimensionData.heading), // 方向
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(
                        state.dimensionData.pitch
                    ), // 倾斜角度
                    roll: state.dimensionData.roll,
                },
            });
        },
        MSET_GOTOCC({ state, commit, dispatch }, val) {
            // commit("MSET_DIMENSION", val);
            //控制高度
            // const height = Math.ceil(state.mviewer.camera.positionCartographic.height);
            state.mviewer.camera.setView({
                destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    state.mviewer.camera.positionCartographic.longitude,
                    state.mviewer.camera.positionCartographic.latitude,
                    val.height
                ),
                orientation: {
                    heading: global.DC.Namespace.Cesium.Math.toRadians(val.heading), // 方向
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(
                        val.pitch
                    ), // 倾斜角度
                    roll: val.roll,
                },
            });
        }
    }
}