JT-CIM/src/views/Map3d-自测/components/measure.vue

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';

	import {
		inject
	} from "vue";

	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="jt-measure">
		<el-row :gutter="20" style="margin-left: 0rem; margin-right: 0rem; ">
			<el-col :span="8" v-for="(item,index) in measure" @click="handleMeasure(item.type,index)">
				<el-avatar shape="circle" :size="70" :class="currentIndex===index?'selectStyle':'defaultStyle'">
					<i :class="[item.icon,currentIndex===index?'selectFontStyle':'']" />
				</el-avatar>
				<div style="margin-top: 5rem; font-size: 14rem;" :class="currentIndex===index?'selectFontStyle':''">{{item.label}}</div>
			</el-col>
		</el-row>
		<div class="jt-btn" style="margin: 8rem;">
			<el-button color="rgb(255 100 100)" @click="clearMeasurementData"><span style="color: #fff;width: 300rem;">清空测量数据</span></el-button>
		</div>
	</div>
</template>

<script>
	let jt3d = undefined;
	let popup = undefined;

	export default {
		props: {

		},
		watch: {

		},

		/* 数据 */
		data() {
			return {
				currentIndex: -1,
				measure: [{
						label: '长度测量(贴地)',
						type: 'measureLength',
						number: 0,
						icon: 'iconfont icon-thin-_pencil_rul'
					},
					{
						label: '面积测量(贴地)',
						type: 'measureArea',
						number: 1,
						icon: 'iconfont icon-svgmianjiceliang'
					},
					{
						label: '高度测量',
						type: 'measureHeight',
						number: 2,
						icon: 'iconfont icon-svggaoduceliang'
					},
					{
						label: '空间距离',
						type: 'measureSpatialLength',
						number: 3,
						icon: 'iconfont icon-svgkongjianceliang'
					},
					{
						label: '三角测量',
						type: 'measureTriangle',
						number: 4,
						icon: 'iconfont icon-svgsanjiaoceliang'
					},
					{
						label: '坐标测量',
						type: 'pickUp',
						number: 5,
						icon: 'iconfont icon-svgzuobiaoceliang'
					},
				],
			}
		},

		/* 方法 */
		methods: {
			/**
			 * 测量事件
			 * @param {Object} type 测量类型
			 * @param {Object} index 第几个被选中
			 */
			handleMeasure(type, index) {
				this.currentIndex = index;

				//移除左键单击事件
				if (jt3d.handlerLeftClick) {
					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
				}

				jt3d.CommonTools.clear();

				switch (type) {
					case "measureLength": //长度测量(贴地)
						jt3d.CommonTools.measureLength(function(error) {
							ElMessage.error(error)
						});
						break;
					case "measureArea": //面积测量(贴地)
						jt3d.CommonTools.measureArea(function(error) {
							ElMessage.error(error)
						});
						break;
					case "measureHeight": //高度测量
						jt3d.CommonTools.measureHeight()
						break;
					case "measureSpatialLength": //空间距离
						jt3d.CommonTools.measureSpatialLength(function(error) {
							ElMessage.error(error)
						});
						break;
					case "measureTriangle": //三角测量
						jt3d.CommonTools.measureTriangle()
						break;
					case "pickUp": //坐标测量
						ElMessage("点击位置开始测量");
						this.pickUp();
						break;
				}
			},

			/**
			 * 坐标测量
			 */
			pickUp() {
				let _self = this;

				if (popup) {
					popup.close();
				}

				jt3d.SketchViewModel.sketchTools('point', {
					onComplete(cPoint, gPoint) {
						if (gPoint.lng) {
							let html = "";
							html += "<div style='text-align: left;'>";
							html += "<p>经度：" + gPoint.lng.toFixed(6) + "</p>";
							html += "<p>纬度：" + gPoint.lat.toFixed(6) + "</p>";
							html += "<p>高度：" + gPoint.height.toFixed(2) + "米</p>";
							html += "</div>";

							let position = {
								x: Number(gPoint.lng),
								y: Number(gPoint.lat),
								z: Number(gPoint.height)
							}

							// popup = new jt3dSDK.PopupWindow.HtmlWindow(window["viewer"], position, "位置信息", html,40);
							popup = new jt3dSDK.PopupWindow.HtmlWindow(window["viewer"], cPoint, "位置信息", html, -30);
						}
					},
					onError(message) {
						
					}
				});
			},

			/**
			 * 清空测量数据
			 */
			clearMeasurementData() {
				this.currentIndex = -1;
				jt3d.CommonTools.clear();
				if (popup) {
					popup.close();
				}

				//还原左键单击事件
				this.$parent.$parent.$refs.refMap3d.clickEntity(jt3d);
			},
		},

		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	.el-avatar{
		width: 70rem !important;
		height: 70rem !important;
		font-size: 14px !important;
		cursor: pointer;
	}
	
	.el-button{
		height: 32rem;
		font-size: 16rem;
		padding: 8rem 15rem;
	}
	
	.jt-measure {
		.el-col {
			padding: 10rem;
			// color: rgba(90, 172, 255, 1.0);
			color: #fff;
		}

		i {
			display: inline-block;
			width: 100%;
			height: 36rem;
			line-height: 36rem;
			text-align: center;
			border-radius: 5rem;
			font-size: 40rem;
			// color: rgba(90, 172, 255, 1.0);
			color: #fff;
			transition: all .3s;
			-webkit-transition: all .3s
		}

		.selectStyle {
			// background: rgba(135, 182, 254, 0.5);
			background: rgb(0 44 126);
			--el-avatar-size: 70rem !important;
		}

		.defaultStyle {
			background: #ffffff00;
			--el-avatar-size: 70rem !important;
		}

		.selectFontStyle {
			color: #fff;
		}
	}
</style>