From 09f448bc9dec772dafaeb04f0c60a0d722035226 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期五, 26 四月 2024 13:53:25 +0800
Subject: [PATCH] 路由跳转三维
---
src/utils/map.js | 16 +
static/json/layer.js | 131 ++++++++--------
src/components/sideMenu/layerMenu/layerPanel2.vue | 104 +++++++-----
src/utils/store.js | 7
src/components/viewer3d.vue | 156 +++++++++++++++++++
src/App.vue | 5
src/router/index.js | 6
7 files changed, 306 insertions(+), 119 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index b3e8192..edb465e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,8 @@
<template>
<div id="app">
- <router-view />
-
+ <keep-alive>
+ <router-view />
+ </keep-alive>
<!-- <viewer></viewer> -->
</div>
</template>
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index 86cc3b0..274089c 100644
--- a/src/components/sideMenu/layerMenu/layerPanel2.vue
+++ b/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]);
+ // });
}
},
// 涓撻鍥鹃�夋嫨
diff --git a/src/components/viewer3d.vue b/src/components/viewer3d.vue
new file mode 100644
index 0000000..863807e
--- /dev/null
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index 5885cff..5c48b4a 100644
--- a/src/router/index.js
+++ b/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({
diff --git a/src/utils/map.js b/src/utils/map.js
index 4224b84..7d68ecb 100644
--- a/src/utils/map.js
+++ b/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) { }
}
diff --git a/src/utils/store.js b/src/utils/store.js
index b5fcfde..5034651 100644
--- a/src/utils/store.js
+++ b/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
diff --git a/static/json/layer.js b/static/json/layer.js
index eb8c80f..3051c11 100644
--- a/static/json/layer.js
+++ b/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
+ }
]
},
{
--
Gitblit v1.9.3