viewer_3dmodel.vue
4.51 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
<!--
* 矢量数据白模的展示
* 在iDesktop中可以通过矢量面拉升的形式生成建筑物白模
* @Author: jiangbotao
* @Date: 2019-12-07 14:24:01
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-12 14:00:47
* @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 id="footer">坐标信息</div>
</div>
</template>
<script>
import URL_CONFIG from './../config/urlConfig.vue';
const Cesium = window.Cesium;
export default {
data: function(){
return {
styleObject:{
width: '100%',
height: '100%',
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
backgroundColor: '#000000'
},
smviewer:{}
}
},
mounted: function(){
var __this = this;
__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{
//打开所发布三维服务下的所有图层
//GZ_SCENE中只有白模数据，没有矢量数据图层
var promise = scene.open(URL_CONFIG.GZ_SCENE);
Cesium.when.all(promise, function(layers){
//设置图层的阴影模式
scene.camera.setView({
//将经度、纬度、高度的坐标转换为笛卡尔坐标
destination : Cesium.Cartesian3.fromDegrees(113.3232, 23.1305, 830.0),
orientation : {
// 指向
heading:Cesium.Math.toRadians(45, 0),
// 视角
pitch:Cesium.Math.toRadians(-60),
roll:0.0
}
});
}, 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);
}
}
var handler = new Cesium.ScreenSpaceEventHandler(__this.smviewer.canvas);
var ellipsoid = __this.smviewer.scene.globe.ellipsoid;
handler.setInputAction(function(e) {
var cartesian = __this.smviewer.camera.pickEllipsoid(e.endPosition, ellipsoid);
if(cartesian){
//将笛卡尔三维坐标转为地图坐标（弧度）
var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
//将地图坐标（弧度）转为十进制的度数
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
var alti_String = (__this.smviewer.camera.positionCartographic.height).toFixed(2);
console.log(lat_String+' '+log_String);
$('#footer').text('经度 : ' + log_String +' | 纬度 : ' + lat_String + ' | 高度 : ' + alti_String);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
$('#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;
}
#footer {
height: 20px;
width: 100%;
bottom: 0px;
margin: 0px;
padding-left: 10px;
position: absolute;
background-color: rgba(173, 173, 173, 0.3);
color: white;
text-align: left;
}
</style>