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
1 <!-- 1 <!--
2 * 火焰效果 2 * 火焰效果
3 * 鼠标点击处会出现火灾效果
3 * @Author: jiangbotao 4 * @Author: jiangbotao
4 * @Date: 2019-12-08 22:39:07 5 * @Date: 2019-12-08 22:39:07
5 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-08 23:11:03 7 * @LastEditTime: 2019-12-09 12:01:09
7 * @FilePath: \superglobevue\src\components\viewer_fire.vue 8 * @FilePath: \superglobevue\src\components\viewer_fire.vue
8 --> 9 -->
9 <template> 10 <template>
...@@ -50,15 +51,16 @@ export default { ...@@ -50,15 +51,16 @@ export default {
50 } 51 }
51 }, 52 },
52 mounted: function(){ 53 mounted: function(){
53 this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true }); 54 var __this = this;
54 var scene = this.smviewer.scene; 55 __this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
56 var scene = __this.smviewer.scene;
55 // 隐藏logo 57 // 隐藏logo
56 $(".cesium-widget-credits")[0].style.visibility="hidden"; 58 $(".cesium-widget-credits")[0].style.visibility="hidden";
57 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden"; 59 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
58 // 隐藏导航工具 60 // 隐藏导航工具
59 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; 61 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
60 62
61 this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ 63 __this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
62 mapStyle : Cesium.TiandituMapsStyle.IMG_C, 64 mapStyle : Cesium.TiandituMapsStyle.IMG_C,
63 token: URL_CONFIG.TOKEN_TIANDITU 65 token: URL_CONFIG.TOKEN_TIANDITU
64 })); 66 }));
...@@ -70,67 +72,82 @@ export default { ...@@ -70,67 +72,82 @@ export default {
70 }); 72 });
71 imageryLayers.addImageryProvider(labelImagery); 73 imageryLayers.addImageryProvider(labelImagery);
72 74
73 this.smviewer.camera.setView({ 75 __this.smviewer.camera.setView({
74 destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 250.0) 76 destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 450.0)
75 }); 77 });
76 var staticPosition = Cesium.Cartesian3.fromDegrees(116.34516786934411, 39.99753297677145, 10.614538127977399);
77 var entity = this.smviewer.entities.add({
78 position : staticPosition
79 });
80 var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
81 // 粒子的图片
82 image: './images/fire.png',
83 // 起始颜色
84 startColor: new Cesium.Color(1, 1, 1, 1),
85 // 结束颜色
86 endColor: new Cesium.Color(1, 0, 0, 0),
87 startScale : 1.0,
88 // 结束大小比例
89 endScale: 1.5,
90 // 最小生命周期
91 minimumParticleLife: 1.5,
92 // 最大生命周期
93 maximumParticleLife: 5,
94 // 最小速度
95 minimumSpeed: 7.0,
96 // 最大速度
97 maximumSpeed: 9.0,
98 // 粒子大小
99 imageSize: new Cesium.Cartesian2(12, 12),
100 // 粒子数量
101 emissionRate: 200,
102 lifetime: 16,
103 // 循环是否开启
104 loop: true,
105 // 粒子的释放方向
106 emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
107 // 是否以米为单位
108 sizeInMeters: true
109 }))
110 78
111 this.smviewer.scene.preUpdate.addEventListener(function(scene, time) {
112 particleSystem.modelMatrix = computeModelMatrix(entity, time)
113 // Account for any changes to the emitter model matrix.
114 particleSystem.emitterModelMatrix = computeEmitterModelMatrix()
115 })
116 79
117 function computeModelMatrix(entity, time) { 80 var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
118 return entity.computeModelMatrix(time, new Cesium.Matrix4()) 81 handler.setInputAction(function(e) {
119 } 82 //首先移除之前添加的点
83 // viewer.entities.removeAll();
84 //获取点击位置笛卡尔坐标
85 var position = scene.pickPosition(e.position);
86 //将笛卡尔坐标转化为经纬度坐标
87 var cartographic = Cesium.Cartographic.fromCartesian(position);
88 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
89 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
90 var height = 2;
91
92 var staticPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
93 var entity = __this.smviewer.entities.add({
94 position : staticPosition
95 });
96 var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
97 // 粒子的图片
98 image: './images/fire.png',
99 // 起始颜色
100 startColor: new Cesium.Color(1, 1, 1, 1),
101 // 结束颜色
102 endColor: new Cesium.Color(1, 0, 0, 0),
103 startScale : 1.0,
104 // 结束大小比例
105 endScale: 1.5,
106 // 最小生命周期
107 minimumParticleLife: 1.5,
108 // 最大生命周期
109 maximumParticleLife: 5,
110 // 最小速度
111 minimumSpeed: 7.0,
112 // 最大速度
113 maximumSpeed: 9.0,
114 // 粒子大小
115 imageSize: new Cesium.Cartesian2(12, 12),
116 // 粒子数量
117 emissionRate: 200,
118 lifetime: 16,
119 // 循环是否开启
120 loop: true,
121 // 粒子的释放方向
122 emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
123 // 是否以米为单位
124 sizeInMeters: true
125 }))
126
127 __this.smviewer.scene.preUpdate.addEventListener(function(scene, time) {
128 particleSystem.modelMatrix = computeModelMatrix(entity, time)
129 // Account for any changes to the emitter model matrix.
130 particleSystem.emitterModelMatrix = computeEmitterModelMatrix()
131 })
132
133 function computeModelMatrix(entity, time) {
134 return entity.computeModelMatrix(time, new Cesium.Matrix4())
135 }
120 136
121 var emitterModelMatrix = new Cesium.Matrix4() 137 var emitterModelMatrix = new Cesium.Matrix4()
122 var translation = new Cesium.Cartesian3() 138 var translation = new Cesium.Cartesian3()
123 var rotation = new Cesium.Quaternion() 139 var rotation = new Cesium.Quaternion()
124 var hpr = new Cesium.HeadingPitchRoll() 140 var hpr = new Cesium.HeadingPitchRoll()
125 var trs = new Cesium.TranslationRotationScale() 141 var trs = new Cesium.TranslationRotationScale()
126 142
127 // 改变粒子系统的位置 143 // 改变粒子系统的位置
128 function computeEmitterModelMatrix() { 144 function computeEmitterModelMatrix() {
129 hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr) 145 hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr)
130 trs.translation = Cesium.Cartesian3.fromElements(-2, 0, 2, translation) 146 trs.translation = Cesium.Cartesian3.fromElements(-2, 0, 2, translation)
131 trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation) 147 trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation)
132 return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix) 148 return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix)
133 } 149 }
150 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
134 151
135 $('#loadingbar').remove(); 152 $('#loadingbar').remove();
136 } 153 }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * @Author: jiangbotao 3 * @Author: jiangbotao
4 * @Date: 2019-12-07 14:24:01 4 * @Date: 2019-12-07 14:24:01
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 18:19:06 6 * @LastEditTime: 2019-12-09 11:46:57
7 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue 7 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
8 --> 8 -->
9 <template> 9 <template>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 * @Author: jiangbotao 8 * @Author: jiangbotao
9 * @Date: 2019-12-02 09:05:50 9 * @Date: 2019-12-02 09:05:50
10 * @LastEditors: jiangbotao 10 * @LastEditors: jiangbotao
11 * @LastEditTime: 2019-12-09 09:50:49 11 * @LastEditTime: 2019-12-09 11:38:20
12 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 12 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
13 --> 13 -->
14 <template> 14 <template>
......
1 <!-- 1 <!--
2 * 开挖分析
3 * @Author: jiangbotao 2 * @Author: jiangbotao
4 * @Date: 2019-12-03 22:31:08 3 * @Date: 2019-12-03 22:31:08
5 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-09 09:48:39 5 * @LastEditTime: 2019-12-09 12:07:37
7 * @FilePath: \superglobevue\src\views\Home.vue 6 * @FilePath: \superglobevue\src\views\Home.vue
8 --> 7 -->
9 <template> 8 <template>
...@@ -11,7 +10,7 @@ ...@@ -11,7 +10,7 @@
11 </template> 10 </template>
12 11
13 <script> 12 <script>
14 import viewer from "@/components/viewer_s3m_single.vue"; 13 import viewer from "@/components/viewer_fire.vue";
15 14
16 export default { 15 export default {
17 name: "home", 16 name: "home",
......