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
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-08 22:39:07
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-08 23:07:55
6 * @FilePath: \superglobevue\src\components\viewer_fire.vue
7 -->
8 <template>
9 <div>
10 <div id="cesiumContainer" v-bind:style="styleObject"></div>
11 <div id='loadingbar' class="spinner">
12 <div class="spinner-container container1">
13 <div class="circle1"></div>
14 <div class="circle2"></div>
15 <div class="circle3"></div>
16 <div class="circle4"></div>
17 </div>
18 <div class="spinner-container container2">
19 <div class="circle1"></div>
20 <div class="circle2"></div>
21 <div class="circle3"></div>
22 <div class="circle4"></div>
23 </div>
24 <div class="spinner-container container3">
25 <div class="circle1"></div>
26 <div class="circle2"></div>
27 <div class="circle3"></div>
28 <div class="circle4"></div>
29 </div>
30 </div>
31 </div>
32 </template>
33
34 <script>
35 import URL_CONFIG from './../config/urlConfig.vue';
36 const Cesium=window.Cesium;
37 export default {
38 data: function(){
39 return {
40 styleObject:{
41 width: '100%',
42 position: 'absolute',
43 top: '0px',
44 bottom: '0px',
45 left: '0px',
46 backgroundColor: '#000000'
47 },
48 smviewer:{}
49 }
50 },
51 mounted: function(){
52 this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
53 var scene = this.smviewer.scene;
54 // 隐藏logo
55 $(".cesium-widget-credits")[0].style.visibility="hidden";
56 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
57 // 隐藏导航工具
58 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
59
60 this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
61 mapStyle : Cesium.TiandituMapsStyle.IMG_C,
62 token: URL_CONFIG.TOKEN_TIANDITU
63 }));
64 var imageryLayers = this.smviewer.imageryLayers;
65 //初始化天地图全球中文注记服务，并添加至影像图层
66 var labelImagery = new Cesium.TiandituImageryProvider({
67 mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
68 token: URL_CONFIG.TOKEN_TIANDITU
69 });
70 imageryLayers.addImageryProvider(labelImagery);
71
72 this.smviewer.camera.setView({
73 destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 250.0)
74 });
75 var staticPosition = Cesium.Cartesian3.fromDegrees(116.34516786934411, 39.99753297677145, 10.614538127977399);
76 var entity = this.smviewer.entities.add({
77 position : staticPosition
78 });
79 var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
80 // 粒子的图片
81 image: './images/fire.png',
82 // 起始颜色
83 startColor: new Cesium.Color(1, 1, 1, 1),
84 // 结束颜色
85 endColor: new Cesium.Color(1, 0, 0, 0),
86 startScale : 1.0,
87 // 结束大小比例
88 endScale: 1.5,
89 // 最小生命周期
90 minimumParticleLife: 1.5,
91 // 最大生命周期
92 maximumParticleLife: 5,
93 // 最小速度
94 minimumSpeed: 7.0,
95 // 最大速度
96 maximumSpeed: 9.0,
97 // 粒子大小
98 imageSize: new Cesium.Cartesian2(12, 12),
99 // 粒子数量
100 emissionRate: 200,
101 lifetime: 16,
102 // 循环是否开启
103 loop: true,
104 // 粒子的释放方向
105 emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
106 // 是否以米为单位
107 sizeInMeters: true
108 }))
109
110 this.smviewer.scene.preUpdate.addEventListener(function(scene, time) {
111 particleSystem.modelMatrix = computeModelMatrix(entity, time)
112 // Account for any changes to the emitter model matrix.
113 particleSystem.emitterModelMatrix = computeEmitterModelMatrix()
114 })
115
116 function computeModelMatrix(entity, time) {
117 return entity.computeModelMatrix(time, new Cesium.Matrix4())
118 }
119
120 var emitterModelMatrix = new Cesium.Matrix4()
121 var translation = new Cesium.Cartesian3()
122 var rotation = new Cesium.Quaternion()
123 var hpr = new Cesium.HeadingPitchRoll()
124 var trs = new Cesium.TranslationRotationScale()
125
126 // 改变粒子系统的位置
127 function computeEmitterModelMatrix() {
128 hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr)
129 trs.translation = Cesium.Cartesian3.fromElements(-2, 0, 2, translation)
130 trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation)
131 return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix)
132 }
133
134 $('#loadingbar').remove();
135 }
136 }
137 </script>
138 <style scoped>
139 .sm-compass {
140 pointer-events: auto;
141 position: absolute;
142 right: 10px;
143 top: 10px;
144 width: 128px;
145 height: 128px;
146 overflow: hidden;
147 }
148 .sm-zoom {
149 top: 130px;
150 }
151 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 * 2、添加了超图发布的矢量瓦片服务 4 * 2、添加了超图发布的矢量瓦片服务
5 * @Date: 2019-12-02 09:05:50 5 * @Date: 2019-12-02 09:05:50
6 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
7 * @LastEditTime: 2019-12-07 13:52:13 7 * @LastEditTime: 2019-12-08 22:42:53
8 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 8 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
9 --> 9 -->
10 <template> 10 <template>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * @Author: jiangbotao 3 * @Author: jiangbotao
4 * @Date: 2019-12-03 22:31:08 4 * @Date: 2019-12-03 22:31:08
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 17:18:34 6 * @LastEditTime: 2019-12-08 23:08:38
7 * @FilePath: \superglobevue\src\views\Home.vue 7 * @FilePath: \superglobevue\src\views\Home.vue
8 --> 8 -->
9 <template> 9 <template>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 </template> 11 </template>
12 12
13 <script> 13 <script>
14 import viewer from "@/components/viewer_split.vue"; 14 import viewer from "@/components/viewer_fire.vue";
15 15
16 export default { 16 export default {
17 name: "home", 17 name: "home",
......