JT-CIM/src/views/Map3d-源/components/special-effects.vue

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

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

<template>
	<div class="jt-weather-effects">
		<el-collapse v-model="activeName" accordion>
			<el-collapse-item name="特效效果">
				<template #title>
					<span class='iconfont icon-tianqizitiku43' />天气特效
				</template>
				<el-row :gutter="20">
					<el-col :span="8" v-for="(item,index) in weather" @click="handleWeatherEffects(item.type,index)">
						<el-avatar shape="circle" style="width:70rem;height: 70rem;" :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>
			</el-collapse-item>
			<el-collapse-item name="天空样式">
				<template #title>
					<span class='iconfont icon-tianqizitiku43' />天空样式
				</template>
				<el-row :gutter="20">
					<el-col :span="8" v-for="(item,index) in skybox" @click="handleSkybox(item.type,index)">
						<!-- <el-avatar :src="item.url" /> -->
						<el-avatar shape="circle" src="https://empty" style="width:70rem;height: 70rem;">
							<img :src="item.url" />
						</el-avatar>
						<div style="margin-top: 5rem; font-size: 14rem;" :class="currentIndex===index?'selectFontStyle':''">{{item.label}}</div>
					</el-col>
				</el-row>
			</el-collapse-item>
			<!-- <el-collapse-item name="粒子效果">
				<template #title>
					<span class='iconfont icon-tianqizitiku43' />粒子效果
				</template>
				<div class="el-collapse-item__content">
					<el-button color="rgb(20 136 255)" @click="ParticleSystem('add')">加载粒子效果</el-button>
					<el-button color="rgb(255 100 100)" @click="ParticleSystem('remove')"><span style="color: #fff;">清除粒子效果</span></el-button>
				</div>
			</el-collapse-item>
			<el-collapse-item name="热力图">
				<template #title>
					<span class='iconfont icon-tianqizitiku43' />热力图
				</template>
				<div class="el-collapse-item__content">
					<el-button color="rgb(20 136 255)" @click="HeatMap('add')">添加热力图</el-button>
					<el-button color="rgb(255 100 100)" @click="HeatMap('remove')"><span style="color: #fff;">清除热力图</span></el-button>
				</div>
			</el-collapse-item> -->
		</el-collapse>
	</div>
</template>

<script>
	let jt3d = undefined;

	export default {
		data() {
			return {
				activeName: "特效效果",
				currentIndex: -1,
				weather: [{
						label: '雨天',
						type: 'rain',
						number: 0,
						icon: 'iconfont icon-yu'
					},
					{
						label: '雪天',
						type: 'snow',
						number: 1,
						icon: 'iconfont icon-huaban'
					},
					{
						label: '雾天',
						type: 'fog',
						number: 2,
						icon: 'iconfont icon-tianqizitiku43'
					},
					{
						label: '关闭天气',
						type: 'remove',
						number: 3,
						icon: 'iconfont icon-cloudofftianqiguanbi'
					},
				],
				skybox: [{
						label: '晚霞',
						type: '晚霞',
						number: 0,
						url: 'jt3dSDK/imgs/skybox/01/py.png'
					},
					{
						label: '蓝天',
						type: '蓝天',
						number: 1,
						url: 'jt3dSDK/imgs/skybox/03/py.jpg'
					},
					{
						label: '阴天',
						type: '阴天',
						number: 2,
						url: 'jt3dSDK/imgs/skybox/02/py.jpg'
					},
					{
						label: '蓝色星空',
						type: '蓝色星空',
						number: 3,
						url: 'jt3dSDK/imgs/skybox/05/pz.jpg'
					},
					{
						label: '紫色星空',
						type: '紫色星空',
						number: 4,
						url: 'jt3dSDK/imgs/skybox/04/ny.jpg'
					},
				],
			}
		},
		props: {},
		watch: {},

		/* 方法 */
		methods: {
			/**
			 * 天空盒子事件
			 * @param {Object} type 天空盒子类型
			 * @param {Object} index 第几个被选中
			 */
			handleSkybox(type, index) {
				this.currentIndex = index;

				jt3d.SceneEffects.SkyBox.setGroundSkyBox({
					type: type
				});
			},

			/**
			 * 天气特效事件
			 * @param {Object} type 天气类型
			 * @param {Object} index 第几个被选中
			 */
			handleWeatherEffects(type, index) {
				this.currentIndex = index;
				switch (type) {
					case "rain": //雨天
						jt3d.SceneEffects.Weather.removeEffect();
						jt3d.SceneEffects.Weather.addRainEffect({
							tiltAngle: 0.3,
							rainSize: 0.5,
							rainSpeed: 70
						});
						break;
					case "snow": //雪天
						jt3d.SceneEffects.Weather.removeEffect();
						jt3d.SceneEffects.Weather.addSnowEffect();
						break;
					case "fog": //雾天
						jt3d.SceneEffects.Weather.removeEffect();
						jt3d.SceneEffects.Weather.addFogEffect();
						break;
					case "remove": //移除天气特效
						this.currentIndex = -1;
						jt3d.SceneEffects.Weather.removeEffect()
						break;

				}
			},

			/**
			 * 粒子效果
			 */
			ParticleSystem(type) {
				let options = {};
				// 初始化参数默认值
				options.duration = Cesium.defaultValue(options.duration, 2);
				options.heading = Cesium.defaultValue(options.heading, 0.5); //指向，默认值0.0（北）
				options.pitch = Cesium.defaultValue(options.pitch, -40); //俯仰角， 垂直向下。默认值-90(向下看)。
				options.range = Cesium.defaultValue(options.range, 150); //距目标点距离

				const position = {
					x: 121.554042,
					y: 37.395186,
					z: 25.60
				};

				// 定位到点
				let flyToPoint = jt3d.LocateUtil.flyToPoint({
					longitude: position.x,
					latitude: position.y,
					height: position.z,
					duration: options.duration,
					heading: options.heading,
					pitch: options.pitch,
					range: options.range,
				});
				flyToPoint.then(function() {
					// alert(1111)
				});

				if (type === "add") {

					const positionF = {
						x: 121.554042,
						y: 37.395186,
						z: 25.60
					};

					this.fireArr = [];
					this.waterArr = [];

					let fireEntity = jt3d.SceneEffects.ParticleSystem.createParticleFire([positionF.x, positionF.y, positionF.z])
					this.fireArr.push(fireEntity)

					const positionW = {
						x: 121.553975,
						y: 37.395075,
						z: 18.10
					};

					let waterEntity = jt3d.SceneEffects.ParticleSystem.createParticleWater([positionW.x, positionW.y, positionW.z])
					this.waterArr.push(waterEntity)

				}
				if (type === "remove") {
					for (var i = 0; i < this.fireArr.length; i++) {
						this.fireArr[i].remove()
					}
					for (var i = 0; i < this.waterArr.length; i++) {
						this.waterArr[i].remove()
					}
				}
			},

			/**
			 * 热力图
			 */
			HeatMap(type) {

				if (type === "add") {
					let viewer = this.viewer = window["viewer"];

					// 矩形坐标
					var bounds = {
						west: 121.563298,
						south: 37.284514,
						east: 121.565298,
						north: 37.286514,
					};

					// 初始化CesiumHeatmap
					var heatMap = this.heatMap = CesiumHeatmap.create(
						viewer, // 视图层
						bounds, // 矩形坐标
						// heatmap相应参数
						{
							backgroundColor: "rgba(0, 0, 0, 0)",
							radius: 50,
							maxOpacity: .5,
							minOpacity: 0,
							blur: .75
						}
					);

					//加载数据，生成热力图
					// 添加数据 最小值，最大值，数据集
					heatMap.setWGS84Data(0, 100, getData(300));
					viewer.zoomTo(viewer.entities);

					if (this._layer) {
						//移除热力图
						this.viewer.entities.remove(this.heatMap._layer);
					} else {
						this._layer = this.heatMap._layer;
					}

					// 数据格式：动态数据 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
					function getData(length) {
						var data = [];
						for (var i = 0; i < length; i++) {
							var x = 121.563298 + Math.random() * (121.565298 - 121.563298);
							var y = 37.284514 + Math.random() * (37.286514 - 37.284514);
							var value = Math.random() * 100;
							data.push({
								x: x,
								y: y,
								value: value
							});
						}
						return data;
					}
				}
				if (type === "remove") {

					//移除热力图
					this.viewer.entities.remove(this.heatMap._layer);
				}
			}
		},

		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	.el-avatar{
		width: 70rem !important;
		height: 70rem !important;
		font-size: 14px !important;
		cursor: pointer;
	}
	
	::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;
	}

	.el-col {
		padding: 10rem;
		// color: rgba(90, 172, 255, 1.0);
		color: #fff;
	}

	.jt-weather-effects {
		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;
			}
		}

		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);
		}

		.defaultStyle {
			background: #ffffff00;
		}

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