aaa

package-lock.json

@@ -23,6 +23,7 @@
         "ink-docstrap": "^1.3.2",
         "mars3d": "^3.4.22",
         "proj4": "^2.8.0",
+        "screenfull": "^6.0.2",
         "uuid": "^9.0.0",
         "video.js": "^7.20.3",
         "videojs-flash": "^2.2.1",
@@ -5723,6 +5724,17 @@
         "object-assign": "^4.1.1"
       }
     },
+    "node_modules/screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -11368,6 +11380,11 @@
         "object-assign": "^4.1.1"
       }
     },
+    "screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw=="
+    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",

package.json

@@ -24,6 +24,7 @@
     "ink-docstrap": "^1.3.2",
     "mars3d": "^3.4.22",
     "proj4": "^2.8.0",
+    "screenfull": "^6.0.2",
     "uuid": "^9.0.0",
     "video.js": "^7.20.3",
     "videojs-flash": "^2.2.1",

src/components/CrMap.vue

@@ -3179,7 +3179,7 @@
 			setMapSpin() {
 				crMap.SketchViewModel.sketchTools('point', {
 					onComplete(cPoint, gPoint) {
-						crMap.setMapSpinByPoint(cPoint);
+						crMap.setMapSpinByPoint(cPoint,{height:1000});
 
 						// let aroundPoint = new jt3d.AroundPoint(crMap._viewer, 0.1, cPoint);	
 						//  aroundPoint.start();

src/jtMap3d/Widgets/StatusBar.js

@@ -116,7 +116,12 @@ class StatusBar {
 			'lk-status-bar',
 			document.getElementById(this._viewer._container.id)
 		)
+
+		var canvas = this._viewer.canvas; // 获取画布
 		this._domContainer.innerHTML = this.statusDom
+		this._domContainer.style.width = canvas.width + "px";
+		console.log('画布', canvas.width)
+
 	}
 	removeStatusBar() {
 		this.initScale(this._viewer, false)
@@ -280,7 +285,7 @@ class StatusBar {
 				}
 			}
 		}
-		
+
 		/* 返回结果 */
 		return {
 			lng: lng,

src/jtMap3d/Widgets/base.js

@@ -2,7 +2,7 @@
 // import * as Cesium from 'Cesium';
 
 //状态栏
-// import StatusBar from "./StatusBar.js";
+import StatusBar from "./StatusBar.js";
 
 import '../Assets/styles/base.css';
 
@@ -60,7 +60,7 @@ class jtMap3d {
 		//默认天空盒子
 		this._defaultSkyBox = this._viewer.scene.skyBox;
 
-		// this.statusBar = new StatusBar(this._viewer);
+		this.statusBar = new StatusBar(this._viewer);
 
 		console.log(Cesium.buildModuleUrl.getCesiumBaseUrl());
 	}
@@ -463,8 +463,8 @@ Object.assign(jtMap3d.prototype, /** @lends jtMap3d.prototype */ {
 
 		// 给定相机距离点多少距离飞行
 		var distance = viewer.camera.positionCartographic.height;
-		if (options.pitch) {
-			pitch = options.height;
+		if (options.height) {
+			distance = options.height;
 		}
 
 		// 起始时间

src/main.js

@@ -12,12 +12,12 @@ import ViewUIPlus from 'view-ui-plus'
 import 'view-ui-plus/dist/styles/viewuiplus.css'
 
 //全局引入ElementPlus，无需按需引入
-// import ElementPlus from 'element-plus';
+import ElementPlus from 'element-plus';
 // import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 //按需导入Element Plus组件
-import {
-	components
-} from "@/plugins/elementPlus";
+// import {
+// 	components
+// } from "@/plugins/elementPlus";
 // 引入elementUI 样式
 import 'element-plus/dist/index.css';
 
@@ -35,12 +35,12 @@ let app = createApp(App);
 app.use(router);
 
 app.use(ViewUIPlus);
+app.use(ElementPlus);
 
-// app.use(ElementPlus);
 // 按需导入Element Plus组件
-components.forEach((component) => {
-	app.component(component.name, component);
-});
+// components.forEach((component) => {
+// 	app.component(component.name, component);
+// });
 
 //
 // for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/router/index.js

@@ -17,27 +17,17 @@ const router = createRouter({
 						keepAlive: true // 需要缓存
 					}
 				},
+				{
+					path: "transiton",
+					name: "transiton",
+					component: () => import("../views/transiton/index.vue"),
+					meta: {
+						keepAlive: true // 需要缓存
+					}
+				},
 			],
 		},
 	],
-	
-	// routes: [
-	// 	{
-	// 		path: "/",
-	// 		name: "home",
-	// 		component: () => import("../views/map3d/index.vue"),
-	// 		children: [
-	// 			{
-	// 				path: "map3d",
-	// 				name: "map3d",
-	// 				component: () => import("../views/map3d/index.vue"),
-	// 				meta: {
-	// 					keepAlive: true // 需要缓存
-	// 				}
-	// 			},
-	// 		],
-	// 	},
-	// ],
 });
 
 export default router;

src/views/main/components/header.vue

@@ -0,0 +1,310 @@
+<script setup>
+	/**
+	 * element-plus字体
+	 */
+	import {
+		ArrowDown
+	}
+	from '@element-plus/icons-vue';
+
+	/* 
+	 *全屏方法引入
+	 */
+	import screenfull from "screenfull";
+</script>
+<template>
+	<div class="header">
+		<!-- logo标题 -->
+		<div style="line-height: 70rem;font-size: 20px;padding-left:10rem;color:#fff;">{{appName}}</div>
+		<!-- 导航菜单 -->
+		<div>
+			<el-menu :default-active="activeIndex" mode="horizontal" ellipsis="false" background-color="rgb(16,96,210)" text-color="#fff" active-text-color="#fff">
+				<el-menu-item index="0">
+					<router-link to="/map3d">三维地图</router-link>
+				</el-menu-item>
+				<el-menu-item index="1">
+					<router-link to="/transiton">动画效果</router-link>
+				</el-menu-item>
+			</el-menu>
+		</div>
+		<!-- 用户信息 -->
+		<div style="color:#fff;">
+			<ul>
+				<li @click="fullscreen()">
+					<i :class="isfullscreen == '全屏'? 'iconfont icon-quanping': 'iconfont icon-cancel-full-screen'"></i>
+					{{ isfullscreen }}
+				</li>
+				<li>
+					<el-dropdown size="medium">
+						<div class="avatar-wrapper">
+
+							<el-avatar shape="circle" style="width: 30rem;height:30rem;">
+								<img src="@/assets/images/logo.ico" />
+							</el-avatar>
+							<span style="font-size: 16rem;">{{ userName }}</span>
+							<el-icon>
+								<ArrowDown />
+							</el-icon>
+						</div>
+
+						<template #dropdown>
+							<span slot="slot" class="text"></span>
+							<el-dropdown-menu>
+								<el-dropdown-item command="logout" divided @click="logout">退出登录</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+<script>
+	let store = undefined
+	export default {
+		/* 数据 */
+		data() {
+			return {
+				appName: '金田智慧产业应用事业部基础框架SDK',
+				userName: '管理员',
+				activeIndex: "0",
+				isfullscreen: '全屏', //控制是否全屏
+			}
+		},
+
+		/* 方法 */
+		methods: {
+
+			//全屏或退出全屏事件
+			fullscreen() {
+				screenfull.toggle();
+				if (!screenfull.isEnabled) {
+					this.$Message.error("该浏览器不支持全屏功能");
+				}
+				if (this.isfullscreen == '全屏') {
+					this.isfullscreen = '退出全屏'
+				} else {
+					this.isfullscreen = '全屏'
+				}
+			},
+
+			//全屏
+			fullele() {
+				return (
+					document.fullscreenElement ||
+					document.webkitFullscreenElement ||
+					document.msFullscreenElement ||
+					document.mozFullScreenElement ||
+					null
+				);
+			},
+
+			//判断是否全屏
+			isFullScreen() {
+				return !!(document.webkitIsFullScreen || this.fullele());
+			},
+
+			// 全屏事件
+			handleFullScreen() {
+				let element = document.documentElement;
+				// 判断是否已经是全屏
+				// 如果是全屏，退出
+				if (this.isfullscreen) {
+					if (document.exitFullscreen) {
+						document.exitFullscreen();
+					} else if (document.webkitCancelFullScreen) {
+						document.webkitCancelFullScreen();
+					} else if (document.mozCancelFullScreen) {
+						document.mozCancelFullScreen();
+					} else if (document.msExitFullscreen) {
+						document.msExitFullscreen();
+					}
+					console.log('已还原！');
+				} else { // 否则，进入全屏
+					if (element.requestFullscreen) {
+						element.requestFullscreen();
+					} else if (element.webkitRequestFullScreen) {
+						element.webkitRequestFullScreen();
+					} else if (element.mozRequestFullScreen) {
+						element.mozRequestFullScreen();
+					} else if (element.msRequestFullscreen) {
+						// IE11
+						element.msRequestFullscreen();
+					}
+					console.log('已全屏！');
+				}
+				// 改变当前全屏状态
+				this.isfullscreen = !this.isfullscreen;
+			}
+		},
+
+		mounted() {
+
+			let that = this
+			window.addEventListener('resize', function() {
+				if (!that.isFullScreen()) {
+					// 非全屏状态
+					//业务逻辑
+					that.isfullscreen = '全屏'
+				}
+			});
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$fontColor: #fff;
+	$fullsize: calc(100% - 0rem);
+	$header-title-bg: rgba(16, 96, 210, 0.3) 0rem no-repeat;
+	$header-title: url(@/assets/images/header/header-1.webp) 0rem no-repeat;
+	$header-bg: rgba(16, 96, 210, 0.3) 0rem no-repeat;
+	$header-bg-color: linear-gradient(100deg,
+		rgb(16, 96, 210) 30%,
+		rgb(16, 106, 250) 70%);
+
+	::v-deep .el-popper__arrow::before {
+		background: rgba(5, 45, 115, 0.8) !important;
+	}
+
+	.text::before {
+		position: absolute;
+		width: 0rem;
+		height: 0rem;
+		left: calc(50% - 5rem);
+		top: -5rem;
+		content: "";
+		transform: rotate(45deg);
+		z-index: 10;
+		box-sizing: border-box;
+		border-bottom: 5rem solid transparent;
+		border-right: 5rem solid transparent;
+		border-top: 5rem solid rgba(5, 45, 115, 0.8);
+		border-left: 5rem solid rgba(5, 45, 115, 0.8);
+		// background: rgba(5, 45, 115, .8) !important;
+	}
+
+	.el-dropdown-menu {
+		background-color: rgba(5, 45, 115, 0.8) !important;
+	}
+
+	::v-deep .el-dropdown-menu__item {
+		color: #fff !important;
+	}
+
+	::v-deep .el-dropdown-menu__item--divided {
+		border: 0 !important;
+	}
+
+	::v-deep .el-dropdown-menu__item:hover {
+		color: rgb(255, 255, 255) !important;
+		background-color: rgba(255, 255, 255, 0.3) !important;
+	}
+
+	//routerlink下划线
+	a {
+		text-decoration: none;
+		color: #000;
+	}
+
+	.header {
+		display: flex;
+		width: $fullsize;
+		height: 70rem;
+		// background: $header-title, $header-title-bg, $header-bg, $header-bg-color;
+		background-color: rgba(5, 45, 115, 0.3) !important;
+		background-size: 470rem 70rem, 700rem 70rem, 100% 70rem, 100% 70rem;
+		background-repeat: no-repeat;
+		user-select: none;
+		position: absolute;
+		z-index: 999;
+
+		&>div:nth-child(1) {
+			width: 470rem;
+			height: $fullsize;
+		}
+
+		&>div:nth-child(2) {
+			width: calc(100% - 590rem);
+			height: calc(100% - 0rem);
+			padding-left: 100rem;
+
+			& ul li {
+				font-weight: bolder;
+				font-size: 15rem;
+
+				&:hover {
+					color: rgb(110, 210, 255) !important;
+					transform: scale(1.03);
+				}
+
+				& i {
+					padding-right: 5rem;
+				}
+			}
+
+			.el-menu {
+				border: 0;
+				height: 70rem;
+				background-color: transparent;
+
+				.el-menu-item {
+					background-color: transparent;
+					transition: all 0.5s;
+				}
+			}
+		}
+
+		&>div:nth-child(3) {
+			position: absolute;
+			height: 70rem;
+			right: 0rem;
+
+			& ul {
+				margin: 0rem;
+				color: rgb(255, 255, 255);
+				display: block;
+				overflow: hidden;
+				white-space: nowrap; //处理块元素中的空白符和换行符的，这个属性保证图片不换行
+
+				& li {
+					list-style: none;
+					display: inline-block; //使li对象显示为一行
+					padding: 0rem 15rem;
+					height: 70rem;
+					line-height: 70rem;
+					cursor: pointer;
+					color: rgb(255, 255, 255);
+
+					&:hover {
+						color: rgb(110, 210, 255);
+						transition: all 0.5s;
+					}
+
+					& i {
+						padding-right: 10rem;
+					}
+				}
+			}
+		}
+	}
+
+	.el-avatar>img {
+		width: 30rem;
+		height: 30rem;
+	}
+
+	.avatar-wrapper {
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		cursor: pointer;
+		color: $fontColor;
+		height: 70rem;
+		line-height: 70rem;
+
+		.el-avatar {
+			--el-avatar-bg-color: #ffffff;
+			margin: 0rem 10rem !important;
+		}
+	}
+</style>

src/views/main/index.vue

@@ -1,65 +1,38 @@
 <script setup>
-	import {
-		RouterView
-	} from "vue-router";
-	import {
-		ref,
-		defineComponent
-	} from "vue";
-	import {
-		Location,
-		DataAnalysis
-	} from "@element-plus/icons-vue";
-
-	import CrMap from '@/views/map3d/index.vue';
+	import JtHeader from './components/header.vue';
 </script>
-
 <template>
-	<el-container style="width: 100%; height: 100%">
-		<el-aside width="aotu" style="height: 100%">
-			<el-menu default-active="1-1" class="el-menu-vertical-demo" :collapse="false" :unique-opened="true">
-				<el-sub-menu index="1">
-					<template #title>
-						<el-icon>
-							<location />
-						</el-icon>
-						<span>地图展示</span>
-					</template>
-					<el-menu-item-group>
-						<el-menu-item index="1-1" @click="displayClick('地图')">地图</el-menu-item>
-						<el-menu-item index="1-2" @click="displayClick('编辑')">编辑</el-menu-item>
-					</el-menu-item-group>
-				</el-sub-menu>
-				<el-sub-menu index="2">
-					<template #title>
-						<el-icon>
-							<DataAnalysis />
-						</el-icon>
-						<span>空间分析</span>
-					</template>
-					<el-menu-item-group>
-						<el-menu-item index="2-1" @click="analyzeClick('测量工具')">测量工具</el-menu-item>
-						<el-menu-item index="2-2" @click="analyzeClick('透视分析')">透视分析</el-menu-item>
-						<el-menu-item index="2-3" @click="analyzeClick('淹没分析')">淹没分析</el-menu-item>
-						<el-menu-item index="2-4" @click="analyzeClick('可视域分析')">可视域分析</el-menu-item>
-						<el-menu-item index="2-5" @click="analyzeClick('视频融合')">视频融合</el-menu-item>
-					</el-menu-item-group>
-				</el-sub-menu>
-			</el-menu>
-		</el-aside>
-		<el-main style="height: 100%; padding: 0">
-			<CrMap />
-		</el-main>
-	</el-container>
+	<!-- 顶栏容器 -->
+	<JtHeader />
 
+	<!-- 控制路由页面是否缓存 -->
+	<router-view v-slot="{ Component }">
+		<keep-alive>
+			<component :is=" Component" v-if="$route.meta.keepAlive" />
+		</keep-alive>
+		<component :is="Component" v-if="!$route.meta.keepAlive" />
+	</router-view>
 </template>
 
-<style scoped>
-	.el-menu-vertical-demo:not(.el-menu--collapse) {
-		width: 200px;
-	}
+<script>
+	export default {
+		name: 'MainView',
+
+		/* 数据 */
+		data() {
+			return {}
+		},
 
-	.el-menu-vertical-demo {
-		height: 100%;
+		/* 方法 */
+		methods: {
+	
+		},
+		mounted() {
+
+		}
 	}
+</script>
+
+<style lang="scss" scoped>
+	
 </style>

src/views/map3d/components/layers.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/map3d/components/map3d.vue

@@ -0,0 +1,270 @@
+<script setup>
+
+</script>
+<template>
+	<div id="cesiumContainer" class="jt-map"></div>
+	<!-- <div id="cesiumContainer2" class="mapview" style="display: none;"></div> -->
+</template>
+<script>
+	import * as jt3dSDK from '@/jtMap3d/index.js';
+	import jt3dNavigation from "cesium-navigation-es6";
+
+	let jt3d = undefined;
+
+	export default {
+
+		/* 数据 */
+		data() {
+			return {
+
+			}
+		},
+
+		/* 方法 */
+		methods: {
+			/**
+			 * 初始化
+			 */
+			init(el) {
+				//初始化大球
+				this.initMap3d(el);
+
+
+				//设置默认视图
+				this.setView(jt3d);
+
+				// 初始化项目区域范围视角
+				this.fullMap(jt3d);
+
+				//加载天空盒子
+				this.addSkybox(jt3d);
+				
+				// 比例尺、指南针
+				this.initNavigation();
+
+				//单击事件
+				// this.clickEntity(jt3d);
+
+				//调用父组件的方法，onload是在父组件的的动态组件component上面的方法,并将jt3d传过去
+				this.$emit("onload", jt3d);
+				// console.log('this.$parent',this.$parent)
+				// this.$parent.jtMap3DOnload(jt3d);
+
+			},
+
+			/**
+			 * 单击事件
+			 */
+			clickEntity() {
+
+				let _self = this;
+
+				if (jt3d.handlerLeftClick) {
+					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
+				}
+
+				jt3d.handlerLeftClick = new Cesium.ScreenSpaceEventHandler(
+					jt3d._viewer.scene.canvas
+				);
+				//注册大球单机事件
+				jt3d.handlerLeftClick.setInputAction(function(e) {
+					var pick = jt3d._viewer.scene.pick(e.position); //拾取当前的entity对象
+					var cartesian = jt3d._viewer.scene.pickPosition(e.position); //获取当前点坐标
+					if (Cesium.defined(cartesian)) {
+						//将笛卡尔坐标转换为地理坐标
+						let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+						//将弧度转为度的十进制度表示
+						let lng = Cesium.Math.toDegrees(cartographic.longitude);
+						let lat = Cesium.Math.toDegrees(cartographic.latitude);
+						let alt = cartographic.height; //高度
+
+						_self.$parent.$refs._refQueryGraphics.initQuery({
+							spatialType: '点',
+							coordinate: lng + " " + lat,
+							buffer: ''
+						});
+					}
+				}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+			},
+
+			/**
+			 * 创建大球
+			 */
+			initMap3d(el) {
+
+				jt3d = new jt3dSDK.jtMap3d({
+					container: el,
+				});
+				jt3d.statusBar.show = true;
+				window.viewer = jt3d._viewer;
+
+				// this.statusBar = new jt3dSDK.StatusBar(window.viewer);
+				// this.statusBar.show = true;
+			},
+
+			/**
+			 * 设置默认视图-初始化中国区域范围视角
+			 */
+			setView(jt3d) {
+				// jt3d.flytoChina();
+
+				//初始化中国区域范围视角
+				jt3d.setViewChina();
+
+				// jt3d.setView({
+				// 	longitude: 103.84, //经度
+				// 	latitude: 31.15, // 维度
+				// 	height: 24000000, // 高度
+				// 	heading: 0, // 偏航
+				// 	pitch: -90, // 俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
+				// 	roll: 0.0 // 翻滚
+				// });
+			},
+
+			/**
+			 * 全图-飞行到项目区域范围视角
+			 */
+			fullMap(jt3d) {
+				// 初始化项目区域范围视角
+				let optionsS = {
+					west: 121.563298,
+					south: 37.284514,
+					east: 121.565298,
+					north: 37.286514,
+					isRemove: false, //定位完成后是否删除
+					duration: 3, //飞行时间
+					heading: 0,
+					pitch: -90,
+					range: 115000
+				};
+
+				let optionsE = {
+					west: 121.563298,
+					south: 37.284514,
+					east: 121.565298,
+					north: 37.286514,
+					isRemove: true, //定位完成后是否删除
+					duration: 3, //飞行时间
+					heading: 0,
+					pitch: -60,
+					range: 115000
+				};
+
+				var fullMapPromise = jt3d.fullMap(optionsS);
+				fullMapPromise.then(function(flyPromise) {
+					jt3d.fullMap(optionsE);
+				});
+			},
+
+			/**
+			 * 设置天空盒子
+			 */
+			addSkybox(jt3d) {
+				//设置天空盒子,默认蓝天
+
+				this.SceneEffects = new jt3dSDK.SceneEffects.SkyBox(window.viewer);
+				this.SceneEffects.setGroundSkyBox();
+			},
+			
+			/**
+			 * 比例尺、指南针
+			 * @param {Object} options 具有以下属性:
+			 * @param {Number} options.longitude 经度，以度为单位
+			 * @param {Number} options.latitude 纬度，以度为单位
+			 * @param {Number} [options.height=0.0] 椭球的高度，以米为单位
+			 * @param {Number} [options.heading=0.0] 指向，默认值0.0（北）
+			 * @param {Number} [options.pitch=-90] 视角，默认值-90(向下看)。俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
+			 * @param {Number} [options.roll=0.0] 翻滚
+			 * @param {Number} [options.enableCompass=true] 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
+			 * @param {Number} [options.enableZoomControls=true] 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
+			 * @param {Number} [options.enableDistanceLegend=true] 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
+			 * @param {Number} [options.enableCompassOuterRing=true] 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
+			 */
+			initNavigation() {
+				let options = {};
+				// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
+				options.defaultResetView = Cesium.Rectangle.fromDegrees(121.13766, 36.99670, 121.94984, 37.55286);
+				// options.defaultResetView = Cesium.Cartographic(103.84,31.15,24000000);
+				// options.defaultResetView = Cesium.Cartographic.fromDegrees(jtMap3dBase.Math.toRadians(103.84), Cesium.Math.toRadians(31.15), 24000000);
+				options.orientation = {
+					heading: Cesium.Math.toRadians(0),
+					pitch: Cesium.Math.toRadians(-90),
+					roll: 0,
+				}
+			
+				//相机延时
+				options.duration = 4 //默认为3s
+			
+				// 用于启用或禁用罗盘。
+				options.enableCompass = true;
+				// 用于启用或禁用指南针外环。
+				options.enableCompassOuterRing = true;
+				// 用于启用或禁用缩放控件。
+				options.enableZoomControls = true;
+				// 用于启用或禁用距离图例。
+				options.enableDistanceLegend = false;
+			
+				//修改重置视图的tooltip
+				options.resetTooltip = "重置视图";
+				//修改放大按钮的tooltip
+				options.zoomInTooltip = "放大";
+				//修改缩小按钮的tooltip
+				options.zoomOutTooltip = "缩小";
+			
+				//如需自定义罗盘控件，请看下面的自定义罗盘控件
+				new jt3dNavigation(window.viewer, options);
+			},
+			
+			/**
+			 * 地图绕点自旋
+			 */
+			setMapSpin() {
+				//移除左键单击事件
+				if (jt3d.handlerLeftClick) {
+					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+				}
+			
+				let SketchViewModel = new jt3dSDK.SketchViewModel(window.viewer, {
+					isClear: true,
+					isDrawPoint: false, //是否标记参考点
+					isRetainDrawPoint: false, //绘制完成是否保留绘制点
+					iconType: 'blue',
+				}, );
+			
+				SketchViewModel.sketchTools('point', {
+					onComplete(cPoint, gPoint) {
+						jt3d.setMapSpinByPoint(cPoint, {
+							// height: 100000
+						});
+					},
+					onError(message) {}
+				});
+			},
+			
+			/**
+			 * 地图指北
+			 */
+			setMapNorth() {
+				jt3d.setMapNorth();
+				jt3d.isSpan = false;
+			},
+			
+		},
+
+		mounted() {
+			this.init("cesiumContainer");
+			let mapView1 = document.getElementById("cesiumContainer");
+			var canvas = window.viewer.canvas; // 获取画布
+			console.log('画布', canvas.width)
+		}
+	};
+</script>
+
+<style scoped>
+	#cesiumContainer {
+		height: 100vh;
+		margin: 0;
+		padding: 0;
+		border: 0px solid red;
+	}
+</style>

src/views/map3d/index.vue

@@ -1,179 +1,119 @@
+<script setup>
+	/**
+	 * 通过provide/inject可以轻松实现跨级访问父组件的数据
+	 * provide和inject是成对出现的
+	 * 必须放在setup内
+	 * 简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量
+	 * provide 和 inject 绑定并不是可响应的。这是刻意为之的。
+	 * 代码执行顺序data->provide->created->mounted
+	 */
+	import {
+		provide
+	} from "vue";
+	provide("getMapInstance", () => {
+		return jt3d;
+	});
+
+	import {
+		Location,
+		DataAnalysis
+	} from "@element-plus/icons-vue";
+
+	import jtMap3d from './components/map3d.vue';
+</script>
+
 <template>
-	<div id="cesiumContainer" class="jt-map"></div>
-	<!-- <div id="cesiumContainer2" class="mapview" style="display: none;"></div> -->
+	<jtMap3d @onload="jtMap3DOnload" ref="refMap3d" />
+	 <div class="view">
+	<el-menu default-active="1-1" class="el-menu-vertical-demo" :collapse="false" :unique-opened="true">
+		<el-sub-menu index="1">
+			<template #title>
+				<el-icon>
+					<location />
+				</el-icon>
+				<span>地图展示</span>
+			</template>
+			<el-menu-item-group>
+				<el-menu-item index="1-1" @click="displayClick('地图')">地图</el-menu-item>
+				<el-menu-item index="1-1" @click="displayClick('地图')">地图</el-menu-item>
+				<el-menu-item index="1-2" @click="displayClick('编辑')">编辑</el-menu-item>
+			</el-menu-item-group>
+		</el-sub-menu>
+		<el-sub-menu index="2">
+			<template #title>
+				<el-icon>
+					<DataAnalysis />
+				</el-icon>
+				<span>空间分析</span>
+			</template>
+			<el-menu-item-group>
+				<el-menu-item index="2-1" @click="analyzeClick('测量工具')">测量工具</el-menu-item>
+				<el-menu-item index="2-2" @click="analyzeClick('透视分析')">透视分析</el-menu-item>
+				<el-menu-item index="2-3" @click="analyzeClick('淹没分析')">淹没分析</el-menu-item>
+				<el-menu-item index="2-4" @click="analyzeClick('可视域分析')">可视域分析</el-menu-item>
+				<el-menu-item index="2-5" @click="analyzeClick('视频融合')">视频融合</el-menu-item>
+			</el-menu-item-group>
+		</el-sub-menu>
+		<el-sub-menu index="3">
+			<template #title>
+				<el-icon>
+					<location />
+				</el-icon>
+				<span>基本功能</span>
+			</template>
+			<el-menu-item-group>
+				<el-menu-item index="3-1" @click="setMapSpin">绕点自旋</el-menu-item>
+				<el-menu-item index="3-2" @click="setMapNorth">地图指北</el-menu-item>
+			</el-menu-item-group>
+		</el-sub-menu>
+	</el-menu>
+</div>
 </template>
 <script>
 	import * as jt3dSDK from '@/jtMap3d/index.js';
-
 	let jt3d = undefined;
-	
+
 	export default {
 
 		/* 数据 */
 		data() {
 			return {
-
+				isMap3dLoaded: false, //保证地图加载完成，在加载子路由
 			}
 		},
 
 		/* 方法 */
 		methods: {
-			/**
-			 * 初始化
-			 */
-			init(el) {
-				//初始化大球
-				this.initMap3d(el);
-
-
-				//设置默认视图
-				this.setView(this.jt3d);
-
-				// 初始化项目区域范围视角
-				this.fullMap(this.jt3d);
-
-				//加载天空盒子
-				// this.addSkybox(this.jt3d);
-
-				//单击事件
-				// this.clickEntity(this.jt3d);
-
-			},
-
-			/**
-			 * 单击事件
-			 */
-			clickEntity() {
-
-				let _self = this;
-
-				if (jt3d.handlerLeftClick) {
-					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
-				}
-
-				jt3d.handlerLeftClick = new Cesium.ScreenSpaceEventHandler(
-					jt3d._viewer.scene.canvas
-				);
-				//注册大球单机事件
-				jt3d.handlerLeftClick.setInputAction(function(e) {
-					var pick = jt3d._viewer.scene.pick(e.position); //拾取当前的entity对象
-					var cartesian = jt3d._viewer.scene.pickPosition(e.position); //获取当前点坐标
-					if (Cesium.defined(cartesian)) {
-						//将笛卡尔坐标转换为地理坐标
-						let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-						//将弧度转为度的十进制度表示
-						let lng = Cesium.Math.toDegrees(cartographic.longitude);
-						let lat = Cesium.Math.toDegrees(cartographic.latitude);
-						let alt = cartographic.height; //高度
-
-						_self.$parent.$refs._refQueryGraphics.initQuery({
-							spatialType: '点',
-							coordinate: lng + " " + lat,
-							buffer: ''
-						});
-					}
-				}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+			//大球加载
+			jtMap3DOnload(map) {
+				jt3d = map;
+				this.isMap3dLoaded = true;
 			},
 
-			/**
-			 * 创建大球
-			 */
-			initMap3d(el) {
-
-				let aa = new jt3dSDK.jtMap3d({
-					container: el,
-				});
-
-				// this.jt3d = new jt3dSDK.jtMap3d({
-				// 	container: el,
-				// });
-
-				debugger
-
-				this.jt3d = aa
-
-				// jt3d.statusBar.show = true;
-				window.viewer = this.jt3d._viewer;
-
-				this.statusBar = new jt3dSDK.StatusBar(window.viewer);
-				this.statusBar.show = true;
+			//地图自旋
+			setMapSpin() {
+				this.$refs.refMap3d.setMapSpin();
 			},
 
-			/**
-			 * 设置默认视图-初始化中国区域范围视角
-			 */
-			setView(jt3d) {
-				// jt3d.flytoChina();
-
-				//初始化中国区域范围视角
-				jt3d.setViewChina();
-
-				// jt3d.setView({
-				// 	longitude: 103.84, //经度
-				// 	latitude: 31.15, // 维度
-				// 	height: 24000000, // 高度
-				// 	heading: 0, // 偏航
-				// 	pitch: -90, // 俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
-				// 	roll: 0.0 // 翻滚
-				// });
-			},
-
-			/**
-			 * 全图-飞行到项目区域范围视角
-			 */
-			fullMap(jt3d) {
-				// 初始化项目区域范围视角
-				let optionsS = {
-					west: 121.563298,
-					south: 37.284514,
-					east: 121.565298,
-					north: 37.286514,
-					isRemove: false, //定位完成后是否删除
-					duration: 3, //飞行时间
-					heading: 0,
-					pitch: -90,
-					range: 115000
-				};
-
-				let optionsE = {
-					west: 121.563298,
-					south: 37.284514,
-					east: 121.565298,
-					north: 37.286514,
-					isRemove: true, //定位完成后是否删除
-					duration: 3, //飞行时间
-					heading: 0,
-					pitch: -60,
-					range: 115000
-				};
-
-				var fullMapPromise = jt3d.fullMap(optionsS);
-				fullMapPromise.then(function(flyPromise) {
-					jt3d.fullMap(optionsE);
-				});
-			},
-
-			/**
-			 * 设置天空盒子
-			 */
-			addSkybox(jt3d) {
-				//设置天空盒子,默认蓝天
-				jt3d.SceneEffects.SkyBox.setGroundSkyBox();
-			},
+			//地图指北
+			setMapNorth() {
+				this.$refs.refMap3d.setMapNorth();
+			}
 		},
 
 		mounted() {
-			this.init("cesiumContainer");
-			// cons
+
 		}
 	};
 </script>
 
 <style scoped>
-	#cesiumContainer {
-		height: 100vh;
-		margin: 0;
-		padding: 0;
-		border: 1px solid red;
+	.view {
+	    position: relative;
+	    height: calc(100% - 70px);
+	    width: 300px;
+	    background: gainsboro;
+	    overflow: hidden;
+		top:70px;
 	}
 </style>

src/views/transiton/index.vue

@@ -0,0 +1,220 @@
+<template>
+    <div style="top:70px">
+        <button @click="play('topToTop')">从顶部滑入、顶部滑出</button>
+        <button @click="play('topToBottom')">从顶部滑入、底部滑出</button>
+        <button @click="play('bottomToTop')">从底部滑入、顶部滑出</button>
+        <button @click="play('bottomToBottom')">从底部滑入、底部滑出</button>
+        <button @click="play('leftToRight')">从左侧滑入、右侧滑出</button>
+        <button @click="play('leftToLeft')">从左侧滑入、左侧滑出</button>
+        <button @click="play('rightToLeft')">从右侧滑入、左侧滑出</button>
+        <button @click="play('rightToRight')">从右侧滑入、左侧滑出</button>
+        <div class="view">
+            <transition :name="transName">
+                <div v-show="show" class="block">Element</div>
+            </transition>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                transName: '',
+                show: true,
+            }
+        },
+        methods: {
+            play(name) {
+                this.transName = name;
+                this.show = !this.show;
+            }
+        }
+    }
+</script>
+<style>
+    .view {
+        position: relative;
+        height: 300px;
+        width: 300px;
+        background: gainsboro;
+        overflow: hidden;
+    }
+ 
+    .block {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        text-align: center;
+        color: white;
+        line-height: 300px;
+        background: red;
+    }
+ 
+    /*滑入——从顶部*/
+    @keyframes slideIn_top {
+        0% {
+            top: -100%;
+        }
+ 
+        100% {
+            top: 0;
+        }
+    }
+ 
+    /*滑入——从底部*/
+    @keyframes slideIn_bottom {
+        0% {
+            top: 100%;
+        }
+ 
+        100% {
+            top: 0;
+        }
+    }
+ 
+    /*滑入——从左侧*/
+    @keyframes slideIn_left {
+        0% {
+            left: -100%;
+        }
+ 
+        100% {
+            left: 0;
+        }
+    }
+ 
+    /*滑入——从右侧*/
+    @keyframes slideIn_right {
+        0% {
+            left: 100%;
+        }
+ 
+        100% {
+            left: 0;
+        }
+    }
+ 
+    /*滑出——从顶部*/
+    @keyframes slideOut_top {
+        0% {
+            top: 0;
+        }
+ 
+        100% {
+            top: -100%
+        }
+    }
+ 
+    /*滑出——从底部*/
+    @keyframes slideOut_bottom {
+        0% {
+            top: 0;
+        }
+ 
+        100% {
+            top: 100%
+        }
+    }
+ 
+    /*滑出——从左侧*/
+    @keyframes slideOut_left {
+        0% {
+            left: 0;
+        }
+ 
+        100% {
+            left: -100%
+        }
+    }
+ 
+    /*滑出——从右侧*/
+    @keyframes slideOut_right {
+        0% {
+            left: 0;
+        }
+ 
+        100% {
+            left: 100%
+        }
+    }
+ 
+    
+    /*(滑入)——从顶部滑入,从顶部滑出*/
+    .topToTop-enter-active {
+        animation: slideIn_top 1s;
+    }
+    /*(滑出)——从顶部滑入,从顶部滑出*/
+    .topToTop-leave-active {
+        animation: slideOut_top 1s;
+    }
+ 
+ 
+    /*(滑入)——从顶部滑入,从底部滑出*/
+    .topToBottom-enter-active {
+        animation: slideIn_top 1s;
+    }
+    /*(滑出)——从顶部滑入,从底部滑出*/
+    .topToBottom-leave-active {
+        animation: slideOut_bottom 1s;
+    }
+ 
+ 
+    /*(滑入)——从底部滑入,从顶部滑出*/
+    .bottomToTop-enter-active {
+        animation: slideIn_bottom 1s;
+    }
+    /*(滑出)——从底部滑入,从顶部滑出*/
+    .bottomToTop-leave-active {
+        animation: slideOut_top 1s;
+    }
+ 
+ 
+    /*(滑入)——从底部滑入,从底部滑出*/
+    .bottomToBottom-enter-active {
+        animation: slideIn_bottom 1s;
+    }
+    /*(滑出)——从底部滑入,从底部滑出*/
+    .bottomToBottom-leave-active {
+        animation: slideOut_bottom 1s;
+    }
+ 
+ 
+    /*(滑入)——从左侧滑入,从右侧滑出*/
+    .leftToRight-enter-active {
+        animation: slideIn_left 1s;
+    }
+    /*(滑出)——从左侧滑入,从右侧滑出*/
+    .leftToRight-leave-active {
+        animation: slideOut_right 1s;
+    }
+ 
+ 
+    /*(滑入)——从左侧滑入,从左侧滑出*/
+    .leftToLeft-enter-active {
+        animation: slideIn_left 1s;
+    }
+    /*(滑出)——从左侧滑入,从左侧滑出*/
+    .leftToLeft-leave-active {
+        animation: slideOut_left 1s;
+    }
+ 
+ 
+    /*(滑入)——从右侧滑入,从左侧滑出*/
+    .rightToLeft-enter-active {
+        animation: slideIn_right 1s;
+    }
+    /*(滑出)——从右侧滑入,从左侧滑出*/
+    .rightToLeft-leave-active {
+        animation: slideOut_left 1s;
+    }
+ 
+ 
+    /*(滑入)——从右侧滑入,从右侧滑出*/
+    .rightToRight-enter-active {
+        animation: slideIn_right 1s;
+    }
+    /*(滑出)——从右侧滑入,从右侧滑出*/
+    .rightToRight-leave-active {
+        animation: slideOut_right 1s;
+    }
+</style>