viewer_3dmodel.vue
3.22 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
<!--
* 矢量数据白模
* @Author: jiangbotao
* @Date: 2019-12-07 14:24:01
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 18:07:21
* @FilePath: \superglobevue\src\components\viewer_3dmodel.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;
var widget = this.smviewer.cesiumWidget;
// 隐藏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
}));
try{
//打开所发布三维服务下的所有图层
var promise = scene.open(URL_CONFIG.GZ_SCENE);
Cesium.when.all(promise, function(layers){
//设置图层的阴影模式
scene.camera.setView({
//将经度、纬度、高度的坐标转换为笛卡尔坐标
destination : new Cesium.Cartesian3(-2323607.7945701713, 5386182.530303348, 2505814.811681112),
orientation : {
heading : 4.844795866469065,
pitch : -0.58125995096984,
roll :1.2504663970958063e-11
}
});
}, function(e){
if(widget._showRenderLoopErrors) {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
}
});
}catch(e){
if(widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
$('#loadingbar').remove();
}
}
</script>
<style>
.sm-compass {
pointer-events: auto;
position: absolute;
right: 10px;
top: 10px;
width: 128px;
height: 128px;
overflow: hidden;
}
.sm-zoom {
top: 130px;
}
</style>