粒子特效
- create()创建方法
const particle = ParticleEffect.create(viewer, position , type);
参数说明：
@param {Cesium.Viewer} viewer - Cesium 场景视图对象
@param {Object} position - 特效挂载的经纬度位置
* - lng: 经度
* - lat: 纬度
* - height: 高度（可选，默认0），如烟雾可设置100米高度
@param {string} type - 特效类型
* - 'fire': 火焰特效
* - 'explosion': 爆炸特效
* - 'smoke': 烟雾特效
* - 'water': 水枪特效
* - 'spray': 喷雾特效
实例：
// 创建火焰特效
const fire = ParticleEffect.create(viewer, { lng: 116.4072, lat: 39.9175, height: 10}, 'fire');
// 创建爆炸特效
const explosion = ParticleEffect.create(viewer, { lng: 116.4122, lat: 39.9175}, 'explosion');
// 创建烟雾特效
const smoke = ParticleEffect.create(viewer, { lng: 116.4172, lat: 39.9175}, 'smoke');
// 创建水枪特效
const water = ParticleEffect.create(viewer, { lng: 116.4222, lat: 39.9175}, 'water');
// 创建喷雾特效
const spray = ParticleEffect.create(viewer, { lng: 116.4272, lat: 39.9175}, 'spray');
- getCount()当前粒子特效数量
ParticleEffect.show();
实例：
var cont = ParticleEffect.getCount();
console.log('共聚焦'+cont+'个粒子特效！')
- getAll()当前粒子特效数组
ParticleEffect.getAll();
实例：
const allEffects = ParticleEffect.getAll();
console.log(`当前共有 ${allEffects.length} 个特效`, allEffects);
- show()显示
particle.show();
- showAll(type)批量显示
ParticleEffect.showAll(type);
参数说明：
@param {string} [type] - 可选，按类型过滤 ('fire', 'explosion', 'smoke', 'water', 'spray')
- hide()隐藏
particle.hide();
- hideAll(type)批量隐藏
ParticleEffect.hideAll(type);
参数说明：
@param {string} [type] - 可选，按类型过滤 ('fire', 'explosion', 'smoke', 'water', 'spray')
- flyTo()飞行聚焦
particle.flyTo(duration,range,pitch);
参数说明：
@param {number} [duration=1.0] - 飞行时长（秒）
@param {number} [pitch=-45] - 俯仰角（度），默认向下45度
@param {number} [range=500] - 相机固定观察距离（米）
实例：particle.flyTo(2.0, 1500, -60);
- flyToAll()批量聚焦
particle.flyToAll(viewer,type,duration,padding);
参数说明：
@param {Cesium.Viewer} viewer - Cesium场景实例（必传）
@param {string} [type] - 可选，按类型过滤
@param {number} [duration=2.0] - 非必填，飞行时长（秒）
@param {number} [padding=100] - 非必填，边界框额外填充（米）
实例：ParticleEffect.flyToAll(viewer, 'fire', 2.0, 200);
- lookAt()视角锁定
particle.lookAt(radius,pitch);
参数说明：
@param {number} [radius=300] - 相机距离特效的距离（米）
@param {number} [pitch=-45] 俯视角度
实例：particle.lookAt(500);
- remove()销毁
particle.remove();
- removeAll(type)批量销毁
particle.removeAll(type);
参数说明：
@param {string} [type] - 可选，按类型过滤 ('fire', 'explosion', 'smoke', 'water', 'spray')
- 完整代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>粒子特效</title>
<script src="https://mhc.ixiera.com/mhc/main_min.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
<script src="js/particleEffects.min.js"></script>
<style type="text/css">
body{width: 100vw;height: 100vh;display: block;overflow: hidden;position: relative;}
.cesium-viewer,
.cesium-viewer-cesiumWidgetContainer,
.cesium-widget,
.cesium-widget canvas{width: 100%;height: 100%;}
.btns-row{position: absolute; top: 15px;left: 15px;}
.btns-row .item-row{margin-bottom: 10px;}
.btns-row .item-row input{line-height: 30px;padding: 0px 10px;}
.btns-row button{min-width: 100px;height: 30px; padding: 0 8px; border-radius: 2px;margin-right: 15px;font-size: 12px;}
</style>
</head>
<body>
<div id="container" style="width: 100vw;height: 100vh;display: block;overflow: hidden;"></div>
<div class="btns-row">
<div class="item-row">
<button onclick="render()">火焰</button>
<button onclick="render2()">爆炸</button>
<button onclick="render3()">烟雾</button>
<button onclick="render4()">水枪</button>
<button onclick="render5()">喷雾</button>
</div>
<div class="item-row">
<button onclick="render6()">聚焦所有</button>
<button onclick="render7()">隐藏所有</button>
<button onclick="render8()">显示所有</button>
<button onclick="render9()">销毁所有</button>
</div>
</div>
<script type="text/javascript">
// 初始化地图
MchCesium.init('container', true);
const viewer = MchCesium.viewer;
// 加载 - 1. 创建火焰特效
function render(){
const fire = ParticleEffect.create(viewer, { lng: 116.4072, lat: 39.9175, height: 10 }, 'fire');
console.log(fire);
fire.flyTo(2.0, 1500, -60);
}
// 加载 - 2. 创建爆炸特效
function render2(){
const explosion = ParticleEffect.create(viewer, { lng: 116.4122, lat: 39.9175}, 'explosion');
explosion.flyTo(2.0, 1500);
}
// 加载 - 3. 烟雾
function render3(){
const smoke = ParticleEffect.create(viewer, { lng: 116.4172, lat: 39.9175}, 'smoke');
smoke.flyTo(2.0, 1500);
}
// 加载 - 4. 水枪
function render4(){
const water = ParticleEffect.create(viewer, { lng: 116.4222, lat: 39.9175}, 'water');
water.flyTo(2.0, 1500);
}
// 加载 - 5. 喷雾
function render5(){
const spray = ParticleEffect.create(viewer, { lng: 116.4272, lat: 39.9175}, 'spray');
spray.flyTo(2.0, 1500);
}
function render6(){
// 聚焦所有
ParticleEffect.flyToAll(viewer, '', 2.0, 200);
// ParticleEffect.flyToAll(viewer, 'fire', 2.0, 600);
var cont = ParticleEffect.getCount();
console.log('共聚焦'+cont+'个粒子特效！')
const allEffects = ParticleEffect.getAll();
const fireList = ParticleEffect.getAll('fire');
console.log(`当前共有 ${allEffects.length} 个特效`, allEffects);
console.log(`当前fire共有 ${fireList.length} 个特效`, fireList);
}
// 隐藏所有
function render7(){
// 隐藏所有特效
ParticleEffect.hideAll();
// ParticleEffect.hideAll('fire');
}
// 显示所有
function render8(){
// 显示所有特效
ParticleEffect.showAll();
// ParticleEffect.showAll('fire');
}
// 销毁所有
function render9(){
// const count = ParticleEffect.removeAll();
const count = ParticleEffect.removeAll('fire');
console.log(`已销毁 ${count} 个特效`);
}
</script>
</body>
</html>
- 效果展示
Demo地址：https://mhc.ixiera.com/mhc/mchmap/particleEffects/index.html
返回顶部
热线电话
微信
扫一扫