路由跳转三维

lixuliang

2024-04-26 09f448bc9dec772dafaeb04f0c60a0d722035226

路由跳转三维

 src/App.vue

@@ -1,7 +1,8 @@
<template>
  <div id="app">
    <router-view />

    <keep-alive>
      <router-view />
    </keep-alive>
    <!-- <viewer></viewer> -->
  </div>
</template>

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -152,7 +152,15 @@
          src: require("@/assets/img/layer/yxdt.png"),
        },
      ],
      sMapModelList: [],
      sMapModelList: [
        {
          id: "swmx",
          name: "三维模型",
          active: false,
          type: "san",
          src: require("@/assets/img/layer/swmx.png"),
        },
      ],
      areaTypeList: [
        {
          id: "规划范围",
@@ -242,32 +250,32 @@
      window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = max;
      window.Viewer.scene.screenSpaceCameraController.enableTilt = enableTilt;
    },
    handleMapClick(result, index) {
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curMapModelIndex == index) {
        clearLayerByTypeId(result.id);
        this.curMapModelIndex = -1;
      } else {
        this.curMapModelIndex = index;
        if (result.type == "er") {
          clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        } else {
          clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        }
        // clearLayerByTypeIdArr(['ewdt', 'yxdt', '3Dcs', 'swmx']);
        _GLOBAL.layers[result.id] = [];
        children.forEach((item) => {
          let itemLayer = loadLayer(item);
          _GLOBAL.layers[result.id].push(itemLayer);
          console.log(_GLOBAL.layers[result.id]);
        });
      }
    },
    // handleMapClick(result, index) {
    //   const val = layers.filter((res) => {
    //     if (res.name == result.name) {
    //       return res;
    //     }
    //   });
    //   const children = val[0].children;
    //   if (this.curMapModelIndex == index) {
    //     clearLayerByTypeId(result.id);
    //     this.curMapModelIndex = -1;
    //   } else {
    //     this.curMapModelIndex = index;
    //     if (result.type == "er") {
    //       clearLayerByTypeIdArr(["ewdt", "yxdt"]);
    //     } else {
    //       clearLayerByTypeIdArr(["3Dcs", "swmx"]);
    //     }
    //     // clearLayerByTypeIdArr(['ewdt', 'yxdt', '3Dcs', 'swmx']);
    //     _GLOBAL.layers[result.id] = [];
    //     children.forEach((item) => {
    //       let itemLayer = loadLayer(item);
    //       _GLOBAL.layers[result.id].push(itemLayer);
    //       console.log(_GLOBAL.layers[result.id]);
    //     });
    //   }
    // },
    // äºŒç»´åº•å›¾é€‰æ‹©
    handleEMapClick(result, index) {
      if (this.curEMapModelIndex == index) return;
@@ -290,17 +298,23 @@
          break;
      }
    },
    // è·³è½¬åˆ°ä¸‰ç»´
    show3d() {
      store.setLayerPanelShow(false);
      this.$router.push("/viewer3D");
    },
    // ä¸‰ç»´æ¨¡åž‹é€‰æ‹©
    handleSMapClick(result, index) {
      // è®¾ç½®ç›¸æœº
      if (result.name == "3D城市") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 2;
        this.changeLayerView(45000, true);
      } else if (result.name == "三维模型") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 2;
        this.changeLayerView(80000, true);
      }
      // // è®¾ç½®ç›¸æœº
      // if (result.name == "3D城市") {
      //   window.Viewer.scene.globe.maximumScreenSpaceError = 2;
      //   this.changeLayerView(45000, true);
      // } else if (result.name == "三维模型") {
      //   window.Viewer.scene.globe.maximumScreenSpaceError = 2;
      //   this.changeLayerView(80000, true);
      // }
      // åˆ‡æ¢å›¾å±‚
      this.show3d();
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
@@ -311,16 +325,16 @@
        // clearLayerByTypeId(result.id);
        // this.curSMapModelIndex = -1;
      } else {
        this.curEMapModelIndex = -1;
        this.curSMapModelIndex = index;
        clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        _GLOBAL.layers[result.id] = [];
        children.forEach((item) => {
          let itemLayer = loadLayer(item);
          _GLOBAL.layers[result.id].push(itemLayer);
          console.log(_GLOBAL.layers[result.id]);
        });
        // this.curEMapModelIndex = -1;
        // this.curSMapModelIndex = index;
        // clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        // clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        // _GLOBAL.layers[result.id] = [];
        // children.forEach((item) => {
        //   let itemLayer = loadLayer(item);
        //   _GLOBAL.layers[result.id].push(itemLayer);
        //   console.log(_GLOBAL.layers[result.id]);
        // });
      }
    },
    // ä¸“题图选择

 src/components/viewer3d.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,156 @@
<template>
  <div class="panel">
    <div v-show="flag" class="colseBox" @click="backTo2D()">
      <img class="colseBtn" src="@/assets/closeinput1.png" />
    </div>
    <div id="sdkContainer"></div>
  </div>
</template>
<script>
import {
  leftClick,
  loadLayer,
  clearLayerByTypeId,
  clearLayerByTypeIdArr,
} from "@/utils/map.js";
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store.js";
import { layers } from "../../static/json/layer";

export default {
  name: "viewer",
  data() {
    return {
      state: store.tDCloseBtn,
      flag: true,
    };
  },
  watch: {
    "state.show": function (val) {
      this.flag = val;
    },
  },
  mounted() {
    this.$nextTick(function () {
      console.log(store.tDCloseBtn);
      let that = this;
      let option = {
        // licenseServer: "http://183.162.245.49:18080",
        // StaticFileBaseUrl: "../../Mobile/static/CimSDK/",
        // url: "./static/img/cesium/earth.jpg",
        toolbar: false,
        // fullscreenButton: true,
        navigationOption: {
          enableCompass: false,
          enableZoomControls: false,
          enableDistanceLegend: false,
          enableCompassOuterRing: false,
        },
      };
      //EPSG4326
      // Cesium.ExpandBySmartEarth.Ellipsoid.z = 6356752.3142451793;
      window.sgworld = new SmartEarth.SGWorld(
        "sdkContainer",
        // Cesium,
        option,
        // null,
        function () {
          sgworld.Navigate.jumpTo({
            destination: Cesium.Cartesian3.fromDegrees(
              116.52217697339846,
              39.75979421847914,
              17045.47005612415
            ),
          });
          setTimeout(() => {
            sgworld.Navigate.flyToPointsInterest({
              destination: Cesium.Cartesian3.fromDegrees(
                116.502368,
                39.791361,
                225.59
              ),
              orientation: {
                heading: Cesium.Math.toRadians(328.5),
                pitch: Cesium.Math.toRadians(-27.5),
                roll: Cesium.Math.toRadians(0.0),
              },
              duration: 5,
            });
            leftClick();
          }, 2000);
        },
        setTimeout(() => {
          that.handleSMapClick(
            {
              id: "swmx",
              name: "三维模型",
              active: false,
              type: "san",
              src: require("@/assets/img/layer/swmx.png"),
            },
            1
          );
        }, 1000)
      );
      window.Viewer = sgworld._Viewer;
      Viewer.shadows = false;
      Viewer.scene.fxaa = false;
      Viewer.scene.postProcessStages.fxaa.enabled = false;
      window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
      window.Viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; //相机的高度的最小值
      // window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 38000; //相机高度的最大值
    });
  },
  methods: {
    backTo2D() {
      this.$router.push("/home");
    },
    // ä¸‰ç»´æ¨¡åž‹é€‰æ‹©
    handleSMapClick(result, index) {
      // // è®¾ç½®ç›¸æœº
      // if (result.name == "3D城市") {
      //   window.Viewer.scene.globe.maximumScreenSpaceError = 2;
      //   window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 45000;
      //   window.Viewer.scene.screenSpaceCameraController.enableTilt = true;
      // } else if (result.name == "三维模型") {
      //   window.Viewer.scene.globe.maximumScreenSpaceError = 2;
      //   window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 80000;
      //   window.Viewer.scene.screenSpaceCameraController.enableTilt = true;
      // }
      // åˆ‡æ¢å›¾å±‚
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      clearLayerByTypeIdArr(["3Dcs", "swmx"]);
      _GLOBAL.layers[result.id] = [];
      children.forEach((item) => {
        let itemLayer = loadLayer(item);
        _GLOBAL.layers[result.id].push(itemLayer);
        console.log(_GLOBAL.layers[result.id]);
      });
    },
  },
};
</script>
<style scoped>
.panel,
#sdkContainer {
  width: 100%;
  height: 100%;
  background: black;
  position: absolute !important;
}

.colseBox {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  right: 0.2rem;
}
.colseBox img {
  width: 35px;
}
</style>

 src/router/index.js

@@ -3,6 +3,7 @@
import index from '@/components/viewer'
import index2 from '@/components/viewer2'
import index3 from '@/components/viewer2-bak'
import viewer3d from '@/components/viewer3d'
import login from '@/components/login'
Vue.use(Router)

@@ -33,6 +34,11 @@
    name: 'index3',
    component: index3
  },
  {
    path: '/viewer3d',
    name: 'viewer3d',
    component: viewer3d
  },

];
const router = new Router({

 src/utils/map.js

@@ -437,12 +437,15 @@
            window.clickPOI = sgworld.Navigate.getMouseDegrees(event);
            // console.log(window.clickPOI);
            if (window.clickPOI) {
                // éšè—åº•éƒ¨å›¾å±‚面版
                store.setLayerPanelShow(false);
                // éšè—å³ä¸Šè§’菜单面板
                store.setMenuListShow(false);
                // éšè—åº•éƒ¨æ¼«æ¸¸é¢æ¿
                store.setRoamPanelShow(false);
                // // éšè—ä¸‰ç»´ç•Œé¢å…³é—­æŒ‰é’®
                // let flag = store.tDCloseBtn.show
                // store.set3DCloseBtnShow(!flag);
                // // éšè—åº•éƒ¨å›¾å±‚面版
                // store.setLayerPanelShow(false);
                // // éšè—å³ä¸Šè§’菜单面板
                // store.setMenuListShow(false);
                // // éšè—åº•éƒ¨æ¼«æ¸¸é¢æ¿
                // store.setRoamPanelShow(false);

            }
            // åœŸåœ°ç®¡ç†
@@ -882,7 +885,6 @@
                // return;
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    } catch (e) { }
}


 src/utils/store.js

@@ -48,6 +48,13 @@
    setLayerPanelShow(val) {
        this.layerPanel.show = val;
    },
    /**三维关闭按钮 */
    tDCloseBtn: {
        show: true
    },
    set3DCloseBtnShow(val) {
        this.tDCloseBtn.show = val;
    },
    /**漫游面板 */
    roamPanel: {
        show: false

 static/json/layer.js

@@ -196,71 +196,72 @@
    },
    {
        name: '三维模型',
        children: [{
            "id": "C0698021",
            "sourceType": "arcgis",
            "name": "航拍影像",
            "urls": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            // "alpha": 1,
            "zIndex": 1,
            // "Level": "0,26",
            // "checked": false,
            // "rename": false
        },
        {
            "id": "hexinqu0609",
            "name": "核心区建筑物",
            "sourceType": "b3dm",
            "urls": "https://skyzt.bda.gov.cn/gisserver/c3dserver/hxq0609/tileset.json",
            "effects": false,
            "effectsMaxHeight": 150,
            "backFaceCulling": true,
            "maximumScreenSpaceError": 16,
            "maximumMemoryUsage": 200,
            "heading": 0,
            "roll": 0,
            "pitch": 0,
            "near": 0,
            "far": 999999999,
            "checked": false,
            "rename": false
        },
        {
            "id": "2253dhexin01",
            "name": "225实景三维核心区地面",
            "sourceType": "b3dm",
            "urls": "https://skyzt.bda.gov.cn/gisserver/c3dserver/hexinqudimian/tileset.json",
            "effects": false,
            "effectsMaxHeight": 150,
            "backFaceCulling": true,
            "maximumScreenSpaceError": 16,
            "maximumMemoryUsage": 200,
            "heading": 0,
            "roll": 0,
            "pitch": 0,
            "near": 0,
            "far": 999999999,
            "checked": false,
            "rename": false
        },
        {
            "id": "2253dfeihexin",
            "name": "225实景三维非核心区",
            "sourceType": "b3dm",
            "urls": "https://skyzt.bda.gov.cn/gisserver/c3dserver/fhx/tileset.json",
            "effects": false,
            "effectsMaxHeight": 150,
            "backFaceCulling": true,
            "maximumScreenSpaceError": 16,
            "maximumMemoryUsage": 200,
            "heading": 0,
            "roll": 0,
            "pitch": 0,
            "near": 0,
            "far": 999999999,
            "checked": false,
            "rename": false
        }
        children: [
            // {
            //     "id": "C0698021",
            //     "sourceType": "arcgis",
            //     "name": "航拍影像",
            //     "urls": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            //     // "alpha": 1,
            //     "zIndex": 1,
            //     // "Level": "0,26",
            //     // "checked": false,
            //     // "rename": false
            // },
            {
                "id": "hexinqu0609",
                "name": "核心区建筑物",
                "sourceType": "b3dm",
                "urls": "https://skyzt.bda.gov.cn/gisserver/c3dserver/hxq0609/tileset.json",
                "effects": false,
                "effectsMaxHeight": 150,
                "backFaceCulling": true,
                "maximumScreenSpaceError": 16,
                "maximumMemoryUsage": 200,
                "heading": 0,
                "roll": 0,
                "pitch": 0,
                "near": 0,
                "far": 999999999,
                "checked": false,
                "rename": false
            },
            {
                "id": "2253dhexin01",
                "name": "225实景三维核心区地面",
                "sourceType": "b3dm",
                "urls": "https://skyzt.bda.gov.cn/gisserver/c3dserver/hexinqudimian/tileset.json",
                "effects": false,
                "effectsMaxHeight": 150,
                "backFaceCulling": true,
                "maximumScreenSpaceError": 16,
                "maximumMemoryUsage": 200,
                "heading": 0,
                "roll": 0,
                "pitch": 0,
                "near": 0,
                "far": 999999999,
                "checked": false,
                "rename": false
            },
            {
                "id": "2253dfeihexin",
                "name": "225实景三维非核心区",
                "sourceType": "b3dm",
                "urls": "https://skyzt.bda.gov.cn/gisserver/c3dserver/fhx/tileset.json",
                "effects": false,
                "effectsMaxHeight": 150,
                "backFaceCulling": true,
                "maximumScreenSpaceError": 16,
                "maximumMemoryUsage": 200,
                "heading": 0,
                "roll": 0,
                "pitch": 0,
                "near": 0,
                "far": 999999999,
                "checked": false,
                "rename": false
            }
        ]
    },
    {