---
title: 特效效果组件
date: 2023-07-17
---
[[toc]]

## 1. jt-specialEffects 简介
- 实现天气特效、天空样式、粒子效果、热力图等特效效果

## 2.Warning 

::: warning 注意
- 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台特效效果组件写法！
:::


## 3. jt-specialEffects API
| 属性名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| viewer |  视图  | obj |   是 |
| currentSelect |  默认样式  | string |   否 |



## 4. 代码示例
```
<jt-popup title="特效效果">
	<jt-specialEffects :viewer="viewer" ref="specialefffectsRef" :currentSelect="currentSelect"></jt-specialEffects>
</jt-popup>

<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		inject,
	} from "vue";
	
	import {
		useWidget
	} from "@/common/store/widget"
	const {
		disable,
		currentWidget
	} = useWidget();

	/**
	 * 获取地图对象
	 */
	const getMapInstance = inject("getMapInstance");
	let jtMap3d = getMapInstance();
	let viewer = jtMap3d._viewer;

	//定义子组件实例，名称要和上面的ref相同
	const specialefffectsRef = ref(null)
	const currentSelect= ref('天空样式');
	
	/**
	 * 即将销毁
	 */
	onBeforeUnmount(() => {
		// 释放当前的widget
		disable(currentWidget.name);
	});
	
</script>
```

<style>
    blockquote {
  line-height: 22px;
  border-radius: 5px;
  display: block;
  margin-bottom: 0.8em;
  font-family: "黑体";
  background: rgba(230,162,60,.1) !important;
  border-color: #f56c6c;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
  padding-left: 1em;
}


blockquote p {
  padding-left: 3px; 
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
}

blockquote code {
  background: rgba(230,162,60,.1) !important;
  font-weight: bold;
}
</style>