JT-CIM-ZHNY/src/views/Map3d/components/navigation.vue

<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>