JT-CIM/src/views/Map3d/components/analysis-space.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-analysisSpace">
		<el-collapse v-model="activeName" accordion>
			<el-collapse-item name="光照分析">
				<template #title>
					<i class='iconfont icon-svgguangzhaofenxi' />光照分析
				</template>
				<div class="el-collapse-item__content">
					<el-button color="rgb(20 136 255)" @click="SunShine('start')">开启光照分析</el-button>
					<el-button color="rgb(255 100 100)" @click="SunShine('remove')"><span style="color: #fff;">移除光照分析</span></el-button>
				</div>
			</el-collapse-item>
			<el-collapse-item name="方量分析">
				<template #title>
					<i class='iconfont icon-svgfangliangfenxi' />方量分析
				</template>
				<div class="el-collapse-item__content">
					<el-form label-width="100rem">
						<el-form-item label="挖方填方高度:">
							<el-input v-model="cutFill.height" />
						</el-form-item>
						<el-form-item label="挖方填方精度:">
							<el-input v-model="cutFill.precision" />
						</el-form-item>
					</el-form>
					<div class="jt-btn" style="margin: 10rem;">
						<el-button color="rgb(255 100 100)" @click="CutFill('draw')"><span style="color: #fff;">绘制挖方填方区域</span></el-button>
						<el-button color="rgb(255 100 100)" @click="CutFill('remove')"><span style="color: #fff;">清除分析结果</span></el-button>
					</div>
					<el-form label-width="120rem">
						<el-form-item label="总分析面积(㎡):">
							<el-input v-model="cutFill.result.allArea" />
						</el-form-item>
						<el-form-item label="填方面积(㎡):">
							<el-input v-model="cutFill.result.fillArea" />
						</el-form-item>
						<el-form-item label="填方体积(m³):">
							<el-input v-model="cutFill.result.fillVolume" />
						</el-form-item>
						<el-form-item label="挖方面积(㎡):">
							<el-input v-model="cutFill.result.cutArea" />
						</el-form-item>
						<el-form-item label="挖方体积(m³):">
							<el-input v-model="cutFill.result.cutVolume" />
						</el-form-item>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="剖面分析">
				<template #title>
					<i class='iconfont icon-svgpoumianfenxi' />剖面分析
				</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: #ffffff99;">
						提示:单击【剖面分析】按钮触发，然后在实景三维或地形上左键单击开始，左键双击结束
					</div>
					<el-button color="rgb(20 136 255)" @click="SectionAnalysis">剖面分析</el-button>
				</div>
			</el-collapse-item>
			<el-collapse-item name="通视分析">
				<template #title>
					<i class='iconfont icon-svgtongshifenxi' />通视分析
				</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: #ffffff99;">
						提示:红色代表不可视，绿色代表可视；
					</div>
					<el-button color="rgb(20 136 255)" @click="SightLine('activate')">添加通视分析</el-button>
					<el-button color="rgb(255 100 100)" @click="SightLine('deactivate')"><span style="color: #fff;">清除通视分析</span></el-button>
				</div>
			</el-collapse-item>
			<el-collapse-item name="视域分析">
				<template #title>
					<i class='iconfont icon-svgshiyufenxi' />视域分析
				</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: #ffffff99;">
						提示:点击“添加视域”按钮后在场景中点击两个点添加视域，红色代表不可视，绿色代表可视；
					</div>
					<el-button color="rgb(20 136 255)" @click="ViewShed('activate')">添加视域</el-button>
					<el-button color="rgb(255 100 100)" @click="ViewShed('deactivate')"><span style="color: #fff;">清除视域</span></el-button>
				</div>
			</el-collapse-item>
			<el-collapse-item name="限高分析">
				<template #title>
					<i class='iconfont icon-svgxiangaofenxi' />限高分析
				</template>
				<div class="el-collapse-item__content">
					<el-form ref="form" label-width="100rem" label-position="right" size="mini">
						<el-form-item label="地表海拔:">
							<span>{{heightLimit.baseHeight}}</span>米&nbsp;&nbsp;<el-button color="rgb(20 136 255)" @click="HeightLimit('pickUp')">图上选点</el-button>
						</el-form-item>
						<el-form-item label="限制高度:">
							<el-slider v-model="heightLimit.height" :min="0" :max="300" :step="1" @input="changeHeight"></el-slider>
						</el-form-item>
						<el-form-item label="当前高度:">
							{{heightLimit.height}}米
						</el-form-item>
					</el-form>
					<div class="jt-btn" style="margin-bottom: 10rem;">
						<el-button color="rgb(20 136 255)" @click="HeightLimit('activate')">绘制限高区域</el-button>
						<el-button color="rgb(255 100 100)" @click="HeightLimit('deactivate')"><span style="color: #fff;">清除限高分析</span></el-button>
					</div>
				</div>
			</el-collapse-item>
			<!-- <el-collapse-item name="剖切展示">
				<template #title>
					<i class='iconfont icon-svgpouqiezhanshi' />剖切展示
				</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-button color="rgb(20 136 255)" @click="Cutting('activate')">添加剖切多边形</el-button>
				</div>
			</el-collapse-item> -->
			<!-- <el-collapse-item name="视频融合">
				<template #title>
					<i class='iconfont icon-svgshipinronghe' />视频融合
				</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-button color="rgb(20 136 255)" @click="PolygonHierarchy">视频融合</el-button>
				</div>
			</el-collapse-item> -->
		</el-collapse>
	</div>
</template>

<script>
	let jt3d = undefined;

	export default {
		props: {},
		watch: {},

		/* 数据 */
		data() {
			return {
				activeName: "光照分析",

				// 限高分析
				heightLimit: {
					height: 20,
					baseHeight: 0,
				},

				//方量分析	
				cutFill: {
					height: 10, //挖方填方高度
					precision: 1256, //挖方填方精度
					result: { //挖方填方结果
						allArea: "",
						cutArea: "",
						cutVolume: "",
						fillArea: "",
						fillVolume: "",
					},
				},
			}
		},

		/* 方法 */
		methods: {
			/**
			 * 光照分析
			 */
			SunShine(type) {
				let _self = this;
				switch (type) {
					case "start":
						jt3d.statusBar.show = false;
						jt3d.SpatialAnalysis.SunshineShadow.start();

						break;
					case "remove":
						jt3d.statusBar.show = true;
						jt3d.SpatialAnalysis.SunshineShadow.remove();
						break;
				}
			},

			/**
			 * 方量分析
			 */
			CutFill(type) {
				let _self = this;

				//功能初始化
				_self.init();

				switch (type) {
					case "draw":
						jt3d.DrawTools.draw('polygon', {
							isEdit: false,
							onComplete(cartesian3d, points) {
								//清除绘制
								jt3d.DrawTools.Clear();

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

								jt3d.SpatialAnalysis.CutFill.createPolygonGeo(pointsArray, {
									height: _self.height,
									precision: _self.precision,
								}).then(res => {
									_self.cutFill.result = res;
								});

							}
						});

						break;
					case "remove":
						jt3d.SpatialAnalysis.CutFill.remove();
						this.cutFill.result = {
							allArea: "",
							cutArea: "",
							cutVolume: "",
							fillArea: "",
							fillVolume: "",
						}

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

			/**
			 * 视频融合
			 */
			PolygonHierarchy() {
				let videoElement = document.getElementById('trailer');
				var videopolygon = jt3d._viewer.entities.add({
					polygon: {
						height: 0.1,
						hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([121.600444, 37.398272, 37.95, 121.600443, 37.398272, 33, 121.600443, 37.398341, 33, 121.600444, 37.398341, 37.95])),
						material: videoElement,
						perPositionHeight: true,
					}
				});

				let flyToEntity = jt3d.LocateUtil.flyToEntity(videopolygon, {
					heading: 90, //方向
					pitch: -32, //倾斜角度
					range: 72
				});
				flyToEntity.then(function(vehicleEntity) {
					jt3d._viewer.trackedEntity = vehicleEntity; //获取或设置摄像机当前正在跟踪的Entity实例。
					vehicleEntity.viewFrom = new Cesium.Cartesian3(0, 1, 0.3);
				});
			},

			/**
			 * 剖切分析
			 */
			Cutting(type) {
				let _self = this;
				//功能初始化
				_self.init();

				switch (type) {
					case "activate":
						if (window["my3dtiles"]) {
							jt3d.DrawTools.draw('polygon', {
								isEdit: false,
								onComplete(cartesian3d, points) {
									//清除绘制
									jt3d.DrawTools.Clear();
							
									let pointsArray = [];
									points.forEach((coordinate, index) => {
										pointsArray.push([
											coordinate.lng,
											coordinate.lat,
											coordinate.height
										]);
									});
							
									jt3d.SpatialAnalysis.Cutting.addTiles(window["my3dtiles"], pointsArray);
							
								}
							});
						} else {
							ElMessage.error("请先勾选3D模型");
						}
						break;
					case "deactivate":
						//还原左键单击事件
						this.$parent.$parent.$refs.refMap3d.clickEntity(jt3d);
						break;
				}
			},

			/**
			 * 限高分析
			 */
			HeightLimit(type) {
				let _self = this;
				//功能初始化
				_self.init();

				switch (type) {
					case "pickUp": //图上选点，获取地表高度
						jt3d.CommonTools._sketchViewModel.sketchTools('point', {
							onComplete(cPoint, gPoint) {
								_self.heightLimit.baseHeight = Number(gPoint.height.toFixed(2));
							},
							onError(message) {
								
							}
						});
						break;
					case "activate":
						jt3d.DrawTools.draw('polygon', {
							isEdit: false,
							onComplete(cartesian3d, points) {
								//清除绘制
								// jt3d.DrawTools._entities.remove(jt3d.DrawTools._drawEntity.polygon);
								jt3d.DrawTools.Clear();

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

								jt3d.SpatialAnalysis.HeightLimit.addPrimitive(pointsArray, {
									height: _self.heightLimit.height,
									baseHeight: _self.heightLimit.baseHeight,
								});
							}
						});
						break;
					case "deactivate":
						jt3d.SpatialAnalysis.HeightLimit.removePrimitive();
						jt3d.CommonTools._sketchViewModel.sketchClear();
						//还原左键单击事件
						this.$parent.$parent.$refs.refMap3d.clickEntity(jt3d);
						break;
				}
			},
			changeHeight(val) {
				jt3d.SpatialAnalysis.HeightLimit.changeHeight(val);
			},

			/**
			 * 通视分析
			 * @param {Object} type
			 */
			SightLine(type) {
				let _self = this;
				//功能初始化
				_self.init();

				switch (type) {
					case "activate":
						jt3d.SpatialAnalysis.SightLine.startSightLine();
						break;
					case "deactivate":
						jt3d.SpatialAnalysis.SightLine.clearAll();
						//还原左键单击事件
						this.$parent.$parent.$refs.refMap3d.clickEntity(jt3d);
						break;
				}
			},

			/**
			 * 视域分析
			 */
			ViewShed(type) {
				let _self = this;
				//功能初始化
				_self.init();

				switch (type) {
					case "activate":
						jt3d.SpatialAnalysis.ViewShed.createViewshed(10);
						break;
					case "deactivate":
						jt3d.SpatialAnalysis.ViewShed.clearAll();
						//还原左键单击事件
						this.$parent.$parent.$refs.refMap3d.clickEntity(jt3d);
						break;
				}
			},

			/**
			 * 剖面分析
			 */
			SectionAnalysis() {
				let _self = this;
				//功能初始化
				_self.init();

				jt3d.DrawTools.draw('polyline', {
					isEdit: false,
					onComplete(cartesian3d, points) {
						let pointsArray = [];
						points.forEach((coordinate, index) => {
							pointsArray.push([
								coordinate.lng,
								coordinate.lat,
								coordinate.height
							]);
						});

						let ProfileAnalysis = jt3d.SpatialAnalysis.Profile.startProfileAnalysis(pointsArray, jt3d.DrawTools._drawEntity.polyline);
						ProfileAnalysis.then(function(result) {
							_self.$parent.$parent.$refs.refDrawerSectionAnalysis.drawerVisible = true;
							_self.$parent.$parent.initEchartsData(result);
						});

					}
				});
			},

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

				jt3d.DrawTools.Clear();
				jt3d.CommonTools._sketchViewModel.sketchClear();

				jt3d.SpatialAnalysis.CutFill.remove(); //清除方量分析
				jt3d.SpatialAnalysis.Profile.removeProfileAnalysis(); //移除剖面分析
				jt3d.SpatialAnalysis.SightLine.clearAll(); //清除通视分析
				jt3d.SpatialAnalysis.ViewShed.clearAll(); //清除视域分析
				jt3d.SpatialAnalysis.HeightLimit.removePrimitive(); //清除限高分析		
			}
		},

		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	.jt-analysisSpace {
		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>