新建 比例尺、指南针组件，使其异步加载cesium-navigation-es6

src/views/Map3d/components/navigation.vue

@@ -0,0 +1,278 @@
+<script setup>
+
+	import jt3dNavigation from 'cesium-navigation-es6';
+
+	import {
+		inject
+	} from "vue";
+	const getMapInstance = inject("getMapInstance");
+	jt3d = getMapInstance();
+</script>
+
+<template>
+	
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		props: {
+
+		},
+
+		/**
+		 * 数据
+		 */
+		data() {
+			return {
+		
+			}
+		},
+
+		/**
+		 * 方法
+		 */
+		methods: {
+			/**
+			 * 比例尺、指南针
+			 */
+			initNavigation(jt3d) {
+				let options = {};
+				// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
+				options.defaultResetView = Cesium.Rectangle.fromDegrees(121.13766, 36.99670, 121.94984, 37.55286);
+				// options.defaultResetView = Cesium.Cartographic.fromDegrees(103.84,31.15,24000);
+				// options.defaultResetView = Cesium.Cartographic.fromDegrees(Cesium.Math.toRadians(103.84),Cesium.Math.toRadians(31.15),Cesium.Math.toRadians(24000));
+				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(jt3d._viewer, options);
+			},
+
+		},
+
+		mounted() {
+			//比例尺、指南针
+			this.initNavigation(jt3d);
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$jt3d-text-color:#fff;
+	$jt3d-content-color:#fff;
+
+	$jt3d-select-bg:red;
+
+	.query-keyword {
+		position: absolute;
+		top: 80rem;
+		width: 200rem;
+		left: 10rem;
+		border: 1rem solid rgb(0 44 126 / 100%);
+
+		.el-input {
+			--el-input-bg-color: rgb(0 44 126 / 50%);
+			--el-input-border-color: rgb(0 44 126 / 50%);
+			--el-input-placeholder-color: #fff;
+
+			--el-fill-color-blank: rgb(0 44 126 / 80%);
+			--el-text-color-regular: #fff;
+			--el-color-primary: #fff --el-border-radius-base:0rem;
+			--el-border-radius-base: 0rem;
+
+			.el-button {
+				background-color: rgb(0 44 126 / 100%);
+				color: #fff;
+			}
+		}
+
+		.autocomplete {
+			--el-fill-color-blank: rgb(0 44 126 / 0%);
+		}
+	}
+
+	.autocomplete ul {
+		font-family: sans-serif;
+		position: absolute;
+		list-style: none;
+		background: rgb(0 44 126 / 30%);
+		margin: 0;
+		width: 80%;
+		margin-top: 1rem;
+		margin-left: -1rem;
+		border: 1rem solid rgb(0 44 126 / 100%);
+	}
+
+	.autocomplete ul li {
+		text-decoration: none;
+		display: block;
+		background: rgb(0 44 126 / 30%);
+		color: #fff;
+		padding: 5rem;
+		margin-left: -40rem;
+		text-align: left;
+	}
+
+	.autocomplete ul li:hover,
+	.autocomplete ul li.focus-list {
+		color: white;
+		background: #2F9AF7;
+	}
+
+	.query-result {
+		position: absolute;
+		border-top: none;
+		padding-bottom: 0rem;
+		width: 100%;
+		z-index: 100;
+		border: 1rem solid rgb(0 44 126 / 100%);
+		background: rgb(0 44 126 / 30%);
+		margin-left: -1rem;
+
+		--el-fill-color-blank: rgb(0 44 126 / 0%);
+		--color: #fff;
+		--el-color-primary: #fff;
+
+		.query-result__item {
+			height: 80rem;
+			padding: 0 10rem;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			margin-left: -40rem;
+			text-align: left;
+
+			&:hover {
+				// background-color: var(--mars-select-bg);
+			}
+
+			.query-result__context {
+				flex-grow: 1;
+				width: 90%;
+
+				.query-result-text {
+					font-size: 16rem;
+					width: 200rem;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					// color: var($jt3d-text-color);
+					color: $jt3d-text-color;
+
+					.query-result-text_num {
+						width: 20rem;
+						height: 20rem;
+						margin-right: 5rem;
+						display: inline-block;
+						text-align: center;
+						background: rgb(0 44 126 / 100%);
+					}
+				}
+
+				.query-result-sub {
+					font-size: 14rem;
+					width: 200rem;
+					margin-left: 19rem;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					// color: var($jt3d-content-color);
+					color: $jt3d-content-color;
+				}
+			}
+
+			.query-result__more {
+				font-size: 14rem;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				// color: var($jt3d-content-color);
+				color: $jt3d-content-color;
+			}
+		}
+
+		.query-result__page {
+			display: flex;
+			justify-content: space-between;
+			padding: 5rem;
+
+			.query-result-allcount {
+				font-size: 14rem;
+				// color: var($jt3d-text-color);
+				color: $jt3d-text-color;
+			}
+		}
+	}
+	
+	/* 四个边角样式 */
+	// .borderstyle {
+	// 	position: relative;
+	// 	width: 100%;
+	// 	height: 490rem;
+	// 	padding: 10rem;
+	// 	border: 1rem solid #008aff70 !important;
+	// 	background-color: rgba(5, 45, 115, 0.7) !important;
+	// 	box-shadow: 0 4rem 15rem 1rem #02213bb3;
+	
+
+		.angle-border {
+			position: absolute;
+			width: 12rem;
+			height: 12rem;
+		}
+	
+		.angle-border-blue {
+			position: absolute;
+			width: 70rem;
+			height: 30rem;
+		}
+	
+		.left-top-border {
+			top: -2rem;
+			left: -2rem;
+			border-left: 2rem solid #008affdd;
+			border-top: 2rem solid #008affdd;
+		}
+	
+		.right-top-border {
+			top: -2rem;
+			right: -2rem;
+			border-right: 2rem solid #008affdd;
+			border-top: 2rem solid #008affdd;
+		}
+	
+		.left-bottom-border {
+			bottom: -2rem;
+			left: -2rem;
+			border-bottom: 2rem solid #FFFFFF;
+			border-left: 2rem solid #FFFFFF;
+		}
+	
+		.right-bottom-border {
+			bottom: -2rem;
+			right: -2rem;
+			border-right: 2rem solid #FFFFFF;
+			border-bottom: 2rem solid #FFFFFF;
+		}
+	// }
+</style>

src/views/Map3d/components/query-keyword.vue

@@ -9,7 +9,6 @@
 	/**
 	 * element-plus字体
 	 */
-	import jt3dNavigation from 'cesium-navigation-es6';
 	import {
 		Search,
 		DArrowRight
@@ -95,43 +94,6 @@
 		 * 方法
 		 */
 		methods: {
-			/**
-			 * 比例尺、指南针
-			 */
-			initNavigation(jt3d) {
-				let options = {};
-				// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
-				options.defaultResetView = Cesium.Rectangle.fromDegrees(121.13766, 36.99670, 121.94984, 37.55286);
-				// options.defaultResetView = Cesium.Cartographic.fromDegrees(103.84,31.15,24000);
-				// options.defaultResetView = Cesium.Cartographic.fromDegrees(Cesium.Math.toRadians(103.84),Cesium.Math.toRadians(31.15),Cesium.Math.toRadians(24000));
-				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(jt3d._viewer, options);
-			},
 			
 			/**
 			 * 在 Input 值改变时触发
@@ -192,8 +154,6 @@
 		},
 
 		mounted() {
-			//比例尺、指南针
-			this.initNavigation(jt3d);
 			let _self = this;
 			_self.$http.get('/getTableList', {
 				tableName: 'base_sys_role',