Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
6b8866e0 by unknown
Options

'20191208'

1 parent bd48109c
Inline Side-by-side
Showing 4 changed files with 154 additions and 3 deletions
<!--
* @Author: jiangbotao
* @Date: 2019-12-08 22:39:07
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-08 23:07:55
* @FilePath: \superglobevue\src\components\viewer_fire.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from './../config/urlConfig.vue';
const Cesium=window.Cesium;
export default {
data: function(){
return {
styleObject:{
width: '100%',
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
backgroundColor: '#000000'
},
smviewer:{}
}
},
mounted: function(){
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({
mapStyle : Cesium.TiandituMapsStyle.IMG_C,
token: URL_CONFIG.TOKEN_TIANDITU
}));
var imageryLayers = this.smviewer.imageryLayers;
//初始化天地图全球中文注记服务，并添加至影像图层
var labelImagery = new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
token: URL_CONFIG.TOKEN_TIANDITU
});
imageryLayers.addImageryProvider(labelImagery);
this.smviewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 250.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 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)
}
$('#loadingbar').remove();
}
}
</script>
<style scoped>
.sm-compass {
pointer-events: auto;
position: absolute;
right: 10px;
top: 10px;
width: 128px;
height: 128px;
overflow: hidden;
}
.sm-zoom {
top: 130px;
}
</style>
\ No newline at end of file
......@@ -4,7 +4,7 @@
* 2、添加了超图发布的矢量瓦片服务
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 13:52:13
* @LastEditTime: 2019-12-08 22:42:53
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
......
......@@ -3,7 +3,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 17:18:34
* @LastEditTime: 2019-12-08 23:08:38
* @FilePath: \superglobevue\src\views\Home.vue
-->
<template>
......@@ -11,7 +11,7 @@
</template>
<script>
import viewer from "@/components/viewer_split.vue";
import viewer from "@/components/viewer_fire.vue";
export default {
name: "home",
......