viewer_mimg.vue
6.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!--
* 多个影像图层的动态播放
* @Author: jiangbotao
* @Date: 2019-12-02 09:51:40
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 16:36:03
* @FilePath: \WebGL_Webpack_Vue\components\viewer2.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 id="toolbar" style="position : absolute;left : 2%; top : 2%;display : none;" >
<div id="progressBar" class="jquery-ui-like"><div></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
});
this.smviewer.imageryLayers.addImageryProvider(Cesium.createOpenStreetMapImageryProvider({
url : "https://a.tile.openstreetmap.org/"
}));
var num = 10;
$(".cesium-viewer-animationContainer").hide();
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility = "hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
var imageryLayers = this.smviewer.imageryLayers;
//依次利用图片服务url创建SuperMapImageryProvider实例
var imageryProvider0 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG0
});
var imageryProvider1 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG1
});
var imageryProvider2 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG2
});
var imageryProvider3 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG3
});
var imageryProvider4 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG4
});
var imageryProvider5 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG5
});
var imageryProvider6 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG6
});
var imageryProvider7 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG7
});
var imageryProvider8 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG8
});
var imageryProvider9 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG9
});
var imageryProvider10 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG10
});
//先将第1、第2个provider添加到图层集合中，并将第2个图层设为完全透明
var layer0 = imageryLayers.addImageryProvider(imageryProvider0);
var layer1 = imageryLayers.addImageryProvider(imageryProvider1);
layer1.alpha = 0;
var stviewer = this.smviewer;
this.smviewer.animation.viewModel.timeFormatter = function(date, viewModel) {
$(".cesium-viewer-bottom").css("left", "0");
//在layer0完全透明前，layer0透明度减少，layer1透明度增加
if(layer0.alpha >= 0) {
layer0.alpha -= 0.005;
layer1.alpha += 0.005;
}
if(layer0.alpha < 0) {
//当第一个图层完全透明,开始执行下一轮渐变
changeTimeFormatter(layer0, layer1, imageryProviders);
}
}
var n = 0;
//数组包含除了第1、第2的剩余provider的数组
var imageryProviders = [imageryProvider2, imageryProvider3, imageryProvider4, imageryProvider5, imageryProvider6, imageryProvider7, imageryProvider8, imageryProvider9, imageryProvider10];
function changeTimeFormatter(layer0, layer1, imageryProviders) {
console.log(n);
if(typeof imageryProviders[n] === "undefined") {
//数组中没有成员时,将此回调函数置为空
stviewer.animation.viewModel.timeFormatter = function(){};
return;
}
//移除掉已经不可见的图层
imageryLayers.remove(layer0);
//将layer0指向下一个图层,并将它先设置成完全透明
layer0 = imageryLayers.addImageryProvider(imageryProviders[n++]);
layer0.alpha = 0;
layer1.alpha = 1;
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find("div").animate({ width: progressBarWidth }, 10).html(percent + "% ");
}
//改变该回调函数，执行下一轮渐变
stviewer.animation.viewModel.timeFormatter = function(date, viewModel) {
if (layer1.alpha >= 0) {
layer1.alpha -= 0.005;
layer0.alpha += 0.005;
num += 0.05;
progress(num.toFixed(1), $("#progressBar"));
}
if (layer1.alpha < 0) {
//执行下一轮渐变
changeTimeFormatter(layer1, layer0, imageryProviders);
}
}
}
this.smviewer.flyTo(layer0);
$("#loadingbar").remove();
$("#toolbar").show();
}
}
</script>
<style>
</style>