Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
3cf186e6 by unknown
Options

'20191208'

1 parent 8afe62ce
Inline Side-by-side
Showing 4 changed files with 81 additions and 65 deletions
<!--
* 火焰效果
* 鼠标点击处会出现火灾效果
* @Author: jiangbotao
* @Date: 2019-12-08 22:39:07
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-08 23:11:03
* @LastEditTime: 2019-12-09 12:01:09
* @FilePath: \superglobevue\src\components\viewer_fire.vue
-->
<template>
......@@ -50,15 +51,16 @@ export default {
}
},
mounted: function(){
this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
var scene = this.smviewer.scene;
var __this = this;
__this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
var scene = __this.smviewer.scene;
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility="hidden";
$(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
__this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.IMG_C,
token: URL_CONFIG.TOKEN_TIANDITU
}));
......@@ -70,67 +72,82 @@ export default {
});
imageryLayers.addImageryProvider(labelImagery);
this.smviewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 250.0)
__this.smviewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 450.0)
});
var staticPosition = Cesium.Cartesian3.fromDegrees(116.34516786934411, 39.99753297677145, 10.614538127977399);
var entity = this.smviewer.entities.add({
position : staticPosition
});
var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
// 粒子的图片
image: './images/fire.png',
// 起始颜色
startColor: new Cesium.Color(1, 1, 1, 1),
// 结束颜色
endColor: new Cesium.Color(1, 0, 0, 0),
startScale : 1.0,
// 结束大小比例
endScale: 1.5,
// 最小生命周期
minimumParticleLife: 1.5,
// 最大生命周期
maximumParticleLife: 5,
// 最小速度
minimumSpeed: 7.0,
// 最大速度
maximumSpeed: 9.0,
// 粒子大小
imageSize: new Cesium.Cartesian2(12, 12),
// 粒子数量
emissionRate: 200,
lifetime: 16,
// 循环是否开启
loop: true,
// 粒子的释放方向
emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
// 是否以米为单位
sizeInMeters: true
}))
this.smviewer.scene.preUpdate.addEventListener(function(scene, time) {
particleSystem.modelMatrix = computeModelMatrix(entity, time)
// Account for any changes to the emitter model matrix.
particleSystem.emitterModelMatrix = computeEmitterModelMatrix()
})
function computeModelMatrix(entity, time) {
return entity.computeModelMatrix(time, new Cesium.Matrix4())
}
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(e) {
//首先移除之前添加的点
// viewer.entities.removeAll();
//获取点击位置笛卡尔坐标
var position = scene.pickPosition(e.position);
//将笛卡尔坐标转化为经纬度坐标
var cartographic = Cesium.Cartographic.fromCartesian(position);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = 2;
var staticPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
var entity = __this.smviewer.entities.add({
position : staticPosition
});
var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
// 粒子的图片
image: './images/fire.png',
// 起始颜色
startColor: new Cesium.Color(1, 1, 1, 1),
// 结束颜色
endColor: new Cesium.Color(1, 0, 0, 0),
startScale : 1.0,
// 结束大小比例
endScale: 1.5,
// 最小生命周期
minimumParticleLife: 1.5,
// 最大生命周期
maximumParticleLife: 5,
// 最小速度
minimumSpeed: 7.0,
// 最大速度
maximumSpeed: 9.0,
// 粒子大小
imageSize: new Cesium.Cartesian2(12, 12),
// 粒子数量
emissionRate: 200,
lifetime: 16,
// 循环是否开启
loop: true,
// 粒子的释放方向
emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
// 是否以米为单位
sizeInMeters: true
}))
__this.smviewer.scene.preUpdate.addEventListener(function(scene, time) {
particleSystem.modelMatrix = computeModelMatrix(entity, time)
// Account for any changes to the emitter model matrix.
particleSystem.emitterModelMatrix = computeEmitterModelMatrix()
})
function computeModelMatrix(entity, time) {
return entity.computeModelMatrix(time, new Cesium.Matrix4())
}
var emitterModelMatrix = new Cesium.Matrix4()
var translation = new Cesium.Cartesian3()
var rotation = new Cesium.Quaternion()
var hpr = new Cesium.HeadingPitchRoll()
var trs = new Cesium.TranslationRotationScale()
var emitterModelMatrix = new Cesium.Matrix4()
var translation = new Cesium.Cartesian3()
var rotation = new Cesium.Quaternion()
var hpr = new Cesium.HeadingPitchRoll()
var trs = new Cesium.TranslationRotationScale()
// 改变粒子系统的位置
function computeEmitterModelMatrix() {
hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr)
trs.translation = Cesium.Cartesian3.fromElements(-2, 0, 2, translation)
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation)
return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix)
}
// 改变粒子系统的位置
function computeEmitterModelMatrix() {
hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr)
trs.translation = Cesium.Cartesian3.fromElements(-2, 0, 2, translation)
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation)
return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix)
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
$('#loadingbar').remove();
}
......
......@@ -3,7 +3,7 @@
* @Author: jiangbotao
* @Date: 2019-12-07 14:24:01
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 18:19:06
* @LastEditTime: 2019-12-09 11:46:57
* @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
-->
<template>
......
......@@ -8,7 +8,7 @@
* @Author: jiangbotao
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-09 09:50:49
* @LastEditTime: 2019-12-09 11:38:20
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
......
<!--
* 开挖分析
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-09 09:48:39
* @LastEditTime: 2019-12-09 12:07:37
* @FilePath: \superglobevue\src\views\Home.vue
-->
<template>
......@@ -11,7 +10,7 @@
</template>
<script>
import viewer from "@/components/viewer_s3m_single.vue";
import viewer from "@/components/viewer_fire.vue";
export default {
name: "home",
......