Skip to content

V
vue-cesium-lyc
Commit 1bcaf655 by lyc
Options

1

parent 1e1dfc3e
Showing with 497 additions and 99 deletions
src/App.vue
......@@ -10,16 +10,18 @@ import sun from './components/sun.vue'
import camera from './components/camera.vue'
import dail from './components/dail.vue'
import baozha from './components/baozha.vue'
import kedupan from './components/kedupan.vue'
export default {
name: 'app',
components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha}
components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha,kedupan}
}
</script>
<template>
<!-- <fire/> -->
<!-- <demo/> -->
<boom></boom>
<kedupan/>
<!-- <boom></boom> -->
<!-- <baozha/> -->
<!-- <moon></moon> -->
<!-- <sun/> -->
......
src/components/boom.vue
......@@ -7,11 +7,124 @@
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'
import { explotEffect } from '../js/explotEffect.js';
import Entity from 'cesium/Source/DataSources/Entity';
import { smokeEffect } from '../js/smokeEffect.js'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
// let aaa = new smokeEffect(viewer)
// new aaa.constructor(viewer)
// let aaa = new explotEffect(viewer)
// new aaa.constructor(viewer)
// viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(
// 116.34485552299206,
// 39.99754814959118,
// 5.0
// ),
// model: {
// url: '/src/model/卫星.gltf',
// minimumPixelSize: 640,
// scale: 200.0,
// }
// })
// var scene = viewer.scene;
// scene.debugShowFramesPerSecond = true;
// //粒子系统的起点，发射源
// var staticPosition = Cesium.Cartesian3.fromDegrees(
// 116.34516786934411,
// 39.99753297677145,
// 3.614538127977399
// );
// var entity44 = viewer.entities.add({
// position: staticPosition,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(50, 30000), //相机与与物体的最大最小可见距离
// disableDepthTestDistance: 10000, //相机的深度遮挡
// });
// function computeModelMatrix(entity, time) {
// var position = Cesium.Property.getValueOrUndefined(entity.position, time);
// let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
// return modelMatrix;
// }
// function computeEmitterModelMatrix() {
// let hpr = Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0);
// let trs = new Cesium.TranslationRotationScale();
// trs.translation = Cesium.Cartesian3.fromElements(2.5, 4, 1);
// trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);
// let result = Cesium.Matrix4.fromTranslationRotationScale(trs);
// return result;
// }
// // 创建粒子
// viewer.scene.primitives.add(
// new Cesium.ParticleSystem({
// image: "/src/image/fire.png", //1 (2) fire3 粒子图像
// imageSize: new Cesium.Cartesian2(1.0, 1.0), //粒子图像尺寸（以像素为单位）的minimumImageSize和maximumImageSize
// startColor: Cesium.Color.RED.withAlpha(0.7), //粒子在其生命初期的颜色
// endColor: Cesium.Color.YELLOW.withAlpha(0.0), //粒子在其生命结束的颜色
// minimumSpeed: 1, //最小速度
// maximumSpeed: 2, //最大速度
// startScale: 1, //粒子图像的初始比例
// endScale: 20, //粒子图像的结束比例
// minimumParticleLife: 1, //粒子生命的可能持续时间的最小范围
// maximumParticleLife: 6, //粒子生命的可能持续时间的最大范围
// emissionRate: 80, //每秒要发射的粒子数
// //粒子系统生命周期内，按照指定周期，爆发一定数量的粒子。三个参数（time，minimum，maximum）
// bursts: [
// // 爆炸出的粒子的密度
// new Cesium.ParticleBurst({
// time: 5.0,
// minimum: 10,
// maximum: 10,
// }),
// new Cesium.ParticleBurst({
// time: 10.0,
// minimum: 5,
// maximum: 10,
// }),
// new Cesium.ParticleBurst({
// time: 15.0,
// minimum: 200,
// maximum: 300,
// }),
// ],
// lifetime: 15.0, //发射粒子的时间
// emitter: new Cesium.CircleEmitter(5.0), //粒子发射器 BoxEmitter:盒形发射器;CircleEmitter:圆形发射器;ConeEmitter:锥形发射器;SphereEmitter:球形发射器
// // 粒子发射器一般都会都会相对于某一个entity或primitive进行定位，用到的就是modelMatrix
// modelMatrix: computeModelMatrix(entity44, Cesium.JulianDate.now()), //从模型转换为世界坐标的4x4转换矩阵
// emitterModelMatrix: computeEmitterModelMatrix(), // 粒子发射器模型矩阵，在粒子系统的局部坐标系内变换粒子发射器。
// })
// );
// viewer.camera.setView({
// destination: Cesium.Cartesian3.fromDegrees(
// 116.34485552299206,
// 39.99754814959118,
// 500.0
// ),
// });
// Add the model entity
const entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(104, 31),
......@@ -20,42 +133,25 @@ onMounted(() => {
minimumPixelSize: 64
},
});
viewer.clock.shouldAnimate = true;
viewer.scene.globe.depthTestAgainstTerrain = false;
let hpr = new Cesium.HeadingPitchRoll();
let trs = new Cesium.TranslationRotationScale();
let particleSystem = "";
const minimum = 10;
const maximum = 20;
particleSystem = viewer.scene.primitives.add(
new Cesium.ParticleSystem({
// ConeEmitter 锥形发射器，BoxEmitter 盒形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
emitter: new Cesium.SphereEmitter(Cesium.Math.toRadians(45.0)),
image: '/src/image/燃脂.png',
image: '/src/image/fire.png',
startColor: Cesium.Color.RED.withAlpha(0.7),
endColor: Cesium.Color.YELLOW.withAlpha(0.0),
startScale: 1.0,
endScale: 3.0,
particleLife: 1.5,
speed: 10.0,
emissionRate: 5000.0,
emissionRate: 500.0,
loop: false,
imageSize: new Cesium.Cartesian2(15, 15),
bursts: [
new Cesium.ParticleBurst({ time: 0.0, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.1, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.2, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.3, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.4, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.5, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.6, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.7, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.8, minimum, maximum }),
new Cesium.ParticleBurst({ time: 0.9, minimum, maximum }),
],
})
);
......@@ -72,7 +168,6 @@ onMounted(() => {
hpr,
new Cesium.Quaternion()
);
particleSystem.emitterModelMatrix =
Cesium.Matrix4.fromTranslationRotationScale(
trs,
......@@ -80,89 +175,16 @@ onMounted(() => {
)
});
// Add event listener to the explode button
document.getElementById('explodeButton').addEventListener('click', function () {
// Trigger the particle system burst
particleSystem.show = true;
setTimeout(() => {
particleSystem.show = false;
}, 2000);
}, 1500);
});
// let hpr = new Cesium.HeadingPitchRoll();
// let trs = new Cesium.TranslationRotationScale();
// let particleSystem = "";
// const entity = viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(104, 31),
// model: {
// uri: '/src/model/scene.gltf',
// minimumPixelSize: 64
// },
// });
// viewer.clock.shouldAnimate = true;
// viewer.scene.globe.depthTestAgainstTerrain = false;
// const minimum = 10
// const maximum = 20;
// particleSystem = viewer.scene.primitives.add(
// new Cesium.ParticleSystem({
// //ConeEmitter 锥形发射器，BoxEmitter 盒形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
// emitter: new Cesium.SphereEmitter(Cesium.Math.toRadians(45.0)),
// image:
// "/src/image/燃脂.png",
// startColor: Cesium.Color.RED.withAlpha(0.7),
// endColor: Cesium.Color.YELLOW.withAlpha(0.0),
// startScale: 1.0,
// endScale: 3.0,
// particleLife: 1.5,
// speed: 10.0,
// emissionRate: 5000.0,
// loop :false,
// imageSize: new Cesium.Cartesian2(15, 15),
// bursts: [
// new Cesium.ParticleBurst({ time: 0.0, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.1, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.2, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.3, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.4, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.5, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.6, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.7, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.8, minimum, maximum }),
// new Cesium.ParticleBurst({ time: 0.9, minimum, maximum }),
// ],
// })
// );
// viewer.scene.preUpdate.addEventListener(function (scene, time) {
// particleSystem.modelMatrix = entity.computeModelMatrix(time, new Cesium.Matrix4())
// hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
// trs.translation = Cesium.Cartesian3.fromElements(
// -4.0,
// 0.0,
// 1.4,
// new Cesium.Cartesian3()
// );
// trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
// hpr,
// new Cesium.Quaternion()
// );
// particleSystem.emitterModelMatrix =
// Cesium.Matrix4.fromTranslationRotationScale(
// trs,
// new Cesium.Matrix4()
// )
// });
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(104, 31, 80),
// orientation: {
// heading: 5.916424, //相机绕z轴旋转。左右摇头。
// pitch: -1.265734, //相机绕y轴旋转。上下点头。
// roll: 0.0, //相机绕x轴旋转。左右歪头。
// },
// duration: 3,
// });
viewer.zoomTo(entity)
})
</script>
......
src/components/kedupan.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import {change} from '/src/js/scale.js'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
viewer.camera.changed.addEventListener(() => {
let alt = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
let divisionCount = alt > 8000 ? 36 : 360;
viewer.entities.removeAll();
change(viewer,divisionCount)
})
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
button {
position: absolute;
top: 50px;
left: 50px;
z-index: 88;
}
</style>
src/js/explotEffect.js 0 → 100644
//爆炸特效
import * as Cesium from 'cesium'
export class explotEffect{
constructor(viewer) {
this.viewer=viewer
this.viewModel={
emissionRate: 5,
gravity: 0.0,//设置重力参数
minimumParticleLife: 1,
maximumParticleLife: 6,
minimumSpeed: 1.0,//粒子发射的最小速度
maximumSpeed: 4.0,//粒子发射的最大速度
startScale: 0.0,
endScale: 10.0,
particleSize: 2.0,
}
this.emitterModelMatrix = new Cesium.Matrix4()
this.translation = new Cesium.Cartesian3()
this.rotation = new Cesium.Quaternion()
this.hpr = new Cesium.HeadingPitchRoll()
this.trs = new Cesium.TranslationRotationScale()
this.scene = this.viewer.scene
this.particleSystem=''
this.entity = this.viewer.entities.add({
//选择粒子放置的坐标
position: Cesium.Cartesian3.fromDegrees(
116.34485552299206,
39.99754814959118
),
});
this.init();
}
init(){
const _this=this
this.viewer.clock.shouldAnimate = true;
this.viewer.scene.globe.depthTestAgainstTerrain = false;
this.viewer.trackedEntity = this.entity;
var particleSystem = this.scene.primitives.add(
new Cesium.ParticleSystem({
image: '/src/image/fire.png',//生成所需粒子的图片路径
//粒子在生命周期开始时的颜色
startColor: Cesium.Color.RED.withAlpha(0.7),
//粒子在生命周期结束时的颜色
endColor: Cesium.Color.YELLOW.withAlpha(0.3),
//粒子在生命周期开始时初始比例
startScale: _this.viewModel.startScale,
//粒子在生命周期结束时比例
endScale: _this.viewModel.endScale,
//粒子发射的最小速度
minimumParticleLife: _this.viewModel.minimumParticleLife,
//粒子发射的最大速度
maximumParticleLife: _this.viewModel.maximumParticleLife,
//粒子质量的最小界限
minimumSpeed: _this.viewModel.minimumSpeed,
//粒子质量的最大界限
maximumSpeed: _this.viewModel.maximumSpeed,
//以像素为单位缩放粒子图像尺寸
imageSize: new Cesium.Cartesian2(
_this.viewModel.particleSize,
_this.viewModel.particleSize
),
//每秒发射的粒子数
emissionRate: _this.viewModel.emissionRate,
//粒子系统发射粒子的时间（秒）
lifetime: 16.0,
//设置粒子的大小是否以米或像素为单位
sizeInMeters: true,
//系统的粒子发射器
emitter: new Cesium.CircleEmitter(5.0),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
})
);
this.particleSystem=particleSystem;
this.preUpdateEvent()
}
//场景渲染事件
preUpdateEvent() {
let _this=this;
this.viewer.scene.preUpdate.addEventListener(function (scene, time) {
//发射器地理位置
_this.particleSystem.modelMatrix = _this.computeModelMatrix(_this.entity, time);
//发射器局部位置
_this.particleSystem.emitterModelMatrix = _this.computeEmitterModelMatrix();
// 将发射器旋转
if (_this.viewModel.spin) {
_this.viewModel.heading += 1.0;
_this.viewModel.pitch += 1.0;
_this.viewModel.roll += 1.0;
}
});
}
computeModelMatrix(entity, time) {
return entity.computeModelMatrix(time, new Cesium.Matrix4());
}
computeEmitterModelMatrix() {
this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);
this.trs.translation = Cesium.Cartesian3.fromElements(
-4.0,
0.0,
1.4,
this.translation
);
this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);
return Cesium.Matrix4.fromTranslationRotationScale(
this.trs,
this.emitterModelMatrix
);
}
removeEvent(){
this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);
this.emitterModelMatrix = undefined;
this.translation = undefined;
this.rotation = undefined;
this.hpr = undefined;
this.trs = undefined;
}
//移除粒子特效
remove() {
()=>{return this.removeEvent()}; //清除事件
this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
this.viewer.entities.remove(this.entity); //删除entity
}
}
src/js/scale.js 0 → 100644
import * as Cesium from 'cesium'
export function change(viewer, divisionCount) {
for (let i = 0; i < divisionCount; i++) {
const angle = (360 / divisionCount) * i;
const startLongitude = angle - 180;
const endLongitude = startLongitude + 10;
viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
startLongitude, 0, 100000,
endLongitude, 0, 100000
]),
width: 2,
material: Cesium.Color.PINK,
}
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(startLongitude + 5, 0, 0),
label: {
text: `${startLongitude}°`,
font: '16px Helvetica',
fillColor: Cesium.Color.WHITE,
pixelOffset: new Cesium.Cartesian2(0, -10),
scale: 0.5,
}
});
}
}
src/js/smokeEffect.js 0 → 100644
import * as Cesium from 'cesium'
//烟特效
export class smokeEffect{
constructor(viewer) {
this.viewer=viewer
this.viewModel={
emissionRate: 5,
gravity: 0.0,//设置重力参数
minimumParticleLife: 1,
maximumParticleLife: 6,
minimumSpeed: 1.0,//粒子发射的最小速度
maximumSpeed: 4.0,//粒子发射的最大速度
startScale: 0.0,
endScale: 10.0,
particleSize: 25.0,
}
this.emitterModelMatrix = new Cesium.Matrix4()
this.translation = new Cesium.Cartesian3()
this.rotation = new Cesium.Quaternion()
this.hpr = new Cesium.HeadingPitchRoll()
this.trs = new Cesium.TranslationRotationScale()
this.scene = this.viewer.scene
this.particleSystem=''
this.entity = this.viewer.entities.add({
//选择粒子放置的坐标
position: Cesium.Cartesian3.fromDegrees(
116.34485552299206,
39.99754814959118
),
});
this.init();
}
init(){
const _this=this
this.viewer.clock.shouldAnimate = true;
this.viewer.scene.globe.depthTestAgainstTerrain = false;
this.viewer.trackedEntity = this.entity;
var particleSystem = this.scene.primitives.add(
new Cesium.ParticleSystem({
image: '/src/image/fire.png',//生成所需粒子的图片路径
//粒子在生命周期开始时的颜色
startColor: Cesium.Color.RED.withAlpha(0.7),
//粒子在生命周期结束时的颜色
endColor: Cesium.Color.YELLOW.withAlpha(0.3),
//粒子在生命周期开始时初始比例
startScale: _this.viewModel.startScale,
//粒子在生命周期结束时比例
endScale: _this.viewModel.endScale,
//粒子发射的最小速度
minimumParticleLife: _this.viewModel.minimumParticleLife,
//粒子发射的最大速度
maximumParticleLife: _this.viewModel.maximumParticleLife,
//粒子质量的最小界限
minimumSpeed: _this.viewModel.minimumSpeed,
//粒子质量的最大界限
maximumSpeed: _this.viewModel.maximumSpeed,
//以像素为单位缩放粒子图像尺寸
imageSize: new Cesium.Cartesian2(
_this.viewModel.particleSize,
_this.viewModel.particleSize
),
//每秒发射的粒子数
emissionRate: _this.viewModel.emissionRate,
//粒子系统发射粒子的时间（秒）
lifetime: 16.0,
//设置粒子的大小是否以米或像素为单位
sizeInMeters: true,
//系统的粒子发射器
emitter: new Cesium.CircleEmitter(2.0),//BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
//回调函数，实现各种喷泉、烟雾效果
updateCallback: (p, dt) => {
return this.applyGravity(p, dt);
},
})
);
this.particleSystem=particleSystem;
this.preUpdateEvent()
}
//场景渲染事件
preUpdateEvent() {
let _this=this;
this.viewer.scene.preUpdate.addEventListener(function (scene, time) {
//发射器地理位置
_this.particleSystem.modelMatrix = _this.computeModelMatrix(_this.entity, time);
//发射器局部位置
_this.particleSystem.emitterModelMatrix = _this.computeEmitterModelMatrix();
// 将发射器旋转
if (_this.viewModel.spin) {
_this.viewModel.heading += 1.0;
_this.viewModel.pitch += 1.0;
_this.viewModel.roll += 1.0;
}
});
}
computeModelMatrix(entity, time) {
return entity.computeModelMatrix(time, new Cesium.Matrix4());
}
computeEmitterModelMatrix() {
this.hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, this.hpr);
this.trs.translation = Cesium.Cartesian3.fromElements(
-4.0,
0.0,
1.4,
this.translation
);
this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(this.hpr, this.rotation);
return Cesium.Matrix4.fromTranslationRotationScale(
this.trs,
this.emitterModelMatrix
);
}
applyGravity(p, dt){
var gravityScratch = new Cesium.Cartesian3()
var position = p.position
Cesium.Cartesian3.normalize(position, gravityScratch)
Cesium.Cartesian3.fromElements(
20 * dt,
30 * dt,
gravityScratch.y * dt,
gravityScratch
);
p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)
}
removeEvent(){
this.viewer.scene.preUpdate.removeEventListener(this.preUpdateEvent, this);
this.emitterModelMatrix = undefined;
this.translation = undefined;
this.rotation = undefined;
this.hpr = undefined;
this.trs = undefined;
}
//移除粒子特效
remove() {
()=>{return this.removeEvent()}; //清除事件
this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
this.viewer.entities.remove(this.entity); //删除entity
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment