JT-CIM/src/views/Map3d-源/components/analysis-terrain.vue

<script setup>
	import {
		inject
	} from "vue";

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

<template>
	<div class="jt-analysisTerrain">
		<el-collapse v-model="activeName" accordion>
			<el-collapse-item name="地下模式">
				<template #title>
					<i class='iconfont icon-svgdixiamoshi' />地下模式
				</template>
				<div class="el-collapse-item__content">
					<div style="line-height: 2em; table-layout: fixed; word-wrap: break-word; word-break: normal; text-align:justify; text-justify: inter-ideograph;color: #ffffff60;">
						提示:可以透明地表，进入地下模式，可以看地下管网数据。
					</div>
					<el-form label-width="130rem">
						<el-form-item label="地下模式开启状态:">
							<el-switch v-model="underground.boolUnderground" active-text="已开启" inactive-text="已关闭" @change="handleUndergroundChange">
							</el-switch>
						</el-form-item>
						<el-form-item label="地表透明度:">
							<el-slider v-model="underground.alpha" :min="0" :max="1" :step="0.1" :disabled="!underground.boolUnderground" @input="handleAlphaChange">
							</el-slider>
						</el-form-item>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="地形开挖">
				<template #title>
					<i class='iconfont icon-svgdixingkaiwa' />地形开挖
				</template>
				<div class="el-collapse-item__content">
					<el-form ref="form" label-width="100rem" label-position="right" size="mini">
						<el-form-item label="开挖深度:">
							<el-input v-model="terrainExcavation.excavateDepth" />
						</el-form-item>
					</el-form>
					<div class="jt-btn" style="margin-bottom: 10rem;">
						<el-button color="rgb(20 136 255)" @click="terrainExcavate('add')">绘制开挖区域</el-button>
						<el-button color="rgb(255 100 100)" @click="terrainExcavate('remove')"><span style="color: #fff;">清除开挖分析</span></el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="坡度分析">
				<template #title>
					<i class='iconfont icon-svgpodufenxi' />坡度分析
				</template>
				<div class="el-collapse-item__content">
					<div class="jt-btn" style="margin-top: 10rem;">
						<el-button color="rgb(20 136 255)" @click="SlopeAspect('Num')">坡度等分</el-button>
						<el-button color="rgb(20 136 255)" @click="SlopeAspect('Distance')">坡度等距</el-button>
						<el-button color="rgb(255 100 100)" @click="removeSlopeAspect"><span style="color: #fff;">移除</span></el-button>
					</div>
				</div>
			</el-collapse-item>
			<!-- <el-collapse-item name="深度检测">
					<template #title>
						<i class='iconfont icon-tianqizitiku43' />深度检测
					</template>
					<div class="el-collapse-item__content">
						深度检测
					</div>
				</el-collapse-item>
				<el-collapse-item name="等高线">
					<template #title>
						<i class='iconfont icon-tianqizitiku43' />等高线
					</template>
					<div class="el-collapse-item__content">
						等高线
					</div>
				</el-collapse-item> -->
		</el-collapse>
	</div>
</template>

<script>
	let jt3d = undefined;

	export default {
		props: {

		},
		watch: {
		},

		/* 数据 */
		data() {
			return {
				activeName: "地下模式",
				
				//地下模式
				underground: {
					alpha: 0.5,
					boolUnderground: false,
				},
				
				//地形开挖
				terrainExcavation:{
					excavateDepth: 10, //开挖深度
				}
				
			}
		},

		/* 方法 */
		methods: {
			/**
			 * 是否开启地下模式
			 * @param {Object} bool
			 */
			handleUndergroundChange(bool) {
				window["viewer"].scene.screenSpaceCameraController.enableCollisionDetection = !bool; //相机与地形的碰撞检测
				window["viewer"].scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(1.5e2, 0.5, 8.0e6, 1.0);
				window["viewer"].scene.globe.translucency.enabled = bool; //是否开启透明
				this.handleAlphaChange(this.underground.alpha);
			},
			/**
			 * el-slider 值改变时触发
			 * 设置地表透明度
			 * @param {Object} alpha
			 */
			handleAlphaChange(alpha) {
				const frontFaceAlphaByDistance = window["viewer"].scene.globe.translucency.frontFaceAlphaByDistance;
				frontFaceAlphaByDistance.nearValue = alpha;
				frontFaceAlphaByDistance.farValue = alpha;
			},

			/**
			 * 移除坡度分析
			 */
			removeSlopeAspect() {
				jt3d.TerrainAnalysis.SlopeAspect.clearAll();
				//还原左键单击事件
				this.$parent.$parent.$refs.refMap3d.clickEntity(jt3d);
			},
			/**
			 * 坡度坡向分析
			 * @param {Object} type
			 */
			SlopeAspect(type) {
				let _self = this;
				//功能初始化
				_self.init();

				switch (type) {
					case "Num":
						jt3d.DrawTools.draw('polygon', {
							isEdit: false,
							onComplete(cartesian3d, points) {

								let pointsArray = [];
								points.forEach((coordinate, index) => {
									pointsArray.push([
										coordinate.lng,
										coordinate.lat,
										coordinate.height
									]);
								});

								jt3d.TerrainAnalysis.SlopeAspect.createNew4Num(pointsArray, jt3d.DrawTools._drawEntity.polygon, {
									num: 10
								});

								//清除绘制
								// jt3d.DrawTools._entities.remove(jt3d.DrawTools._drawEntity.polygon);
								jt3d.DrawTools.Clear();
							}
						});

						break;
					case "Distance":
						jt3d.DrawTools.draw('polygon', {
							isEdit: false,
							onComplete(cartesian3d, points) {

								let pointsArray = [];
								points.forEach((coordinate, index) => {
									pointsArray.push([
										coordinate.lng,
										coordinate.lat,
										coordinate.height
									]);
								});

								jt3d.TerrainAnalysis.SlopeAspect.createNew4Distance(pointsArray, jt3d.DrawTools._drawEntity.polygon, {
									distance: 0.05
								});

								//清除绘制
								// jt3d.DrawTools._entities.remove(jt3d.DrawTools._drawEntity.polygon);
								jt3d.DrawTools.Clear();
							}
						});
						break;
				}
			},

			/**
			 * 移除地形开挖
			 */
			removeTerrainExcavate() {
				jt3d.TerrainAnalysis.TerrainExcavation.clear();
				//还原左键单击事件
				this.$parent.$parent.$refs.refMap3d.clickEntity(jt3d);
			},
			/**
			 * 地形开挖
			 */
			terrainExcavate(type) {
				let _self = this;
				//功能初始化
				_self.init();
				
				if (type === "add") {
					jt3d.DrawTools.draw('polygon', {
						onComplete(aa, points) {
							jt3d.DrawTools.Clear();
							let pointsArray = [];
							points.forEach((coordinate, index) => {
								pointsArray.push([
									coordinate.lng,
									coordinate.lat,
									coordinate.height
								]);
							});
							jt3d.TerrainAnalysis.TerrainExcavation.add(pointsArray, {
								excavateDepth: _self.terrainExcavation.excavateDepth
							});

						}
					});
				} else if (type === "remove") {
					_self.removeTerrainExcavate();
				}
			},

			/**
			 * 功能初始化
			 */
			init() {
				//移除左键单击事件
				if (jt3d.handlerLeftClick) {
					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
				}

				jt3d.DrawTools.Clear();

				jt3d.TerrainAnalysis.TerrainExcavation.clear();; //清除地形开挖
				jt3d.TerrainAnalysis.SlopeAspect.clearAll(); //移除坡度坡向分析	
			}
		},

		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	.el-switch{
		font-size: 14rem !important;
		line-height: 20rem !important;
		align-items: self-start !important;
	}
	::v-deep .is-checked .el-switch__core .el-switch__action{
		margin-left: calc(-1rem - 14rem);
	}
	
	::v-deep .el-switch__core .el-switch__action{
		top:1rem;
	}
	
	::v-deep .el-switch__core .el-switch__action{
		width: 14rem;
		height: 14rem;
	}
	
	::v-deep .el-switch__core{
		width: 40rem !important;
		height: 20rem !important;
	}
	::v-deep .el-switch__label{
		height: 20rem !important;
		font-size: 14rem !important;
	}
	::v-deep .el-switch__label *{
		font-size: 14rem !important;
	}
	
	::v-deep .el-switch__label--left{
		margin-right: 10rem;
	}
	
	.jt-analysisTerrain {
		position: relative;
		.iconfont {
			padding: 0 10rem;
		}

		.el-collapse {
			--el-collapse-border-color: rgb(0 44 126 / 0%);

			--el-collapse-header-text-color: #ffffff;
			--el-collapse-header-font-size: 13rem;
			--el-collapse-content-bg-color: rgb(0 44 126 / 0%);
			--el-collapse-content-font-size: 13rem;
			--el-collapse-content-text-color: rgb(216 240 255);

			--el-collapse-header-height: 40rem;
			--el-collapse-header-bg-color: rgb(30 130 255);

			--el-fill-color-blank: rgb(0 44 126 / 68%);
			--el-text-color-regular: rgb(216 240 255);
			--el-border-color: rgb(35 135 255);

			.el-collapse-item__content {
				padding: 10rem;
				// padding-bottom: 0rem;
			}
		}
	}

	::v-deep .el-collapse-item__content {
		padding: 10rem;
		// padding-bottom: 0rem;
		overflow-y: hidden;
	}

	::v-deep .el-collapse-item__header {
		background: url(@/assets/images/bg_collapse_title.png) no-repeat;
		background-size: 350rem 40rem;
		// background-color: rgb(22 90 190);
		// background-color: rgb(5 45 100 /60%);
		background-color: rgb(30 130 255);
		border-bottom: 0;
	}
</style>