viewer_tdt.vue
2.84 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
<!--
* @Author: jiangbotao
* 1、展示天地图栅格瓦片数据
* 2、添加了超图发布的矢量瓦片服务
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 13:52:13
* @FilePath: \WebGL_Webpack_Vue\components\viewer.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 });
// 隐藏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
}));
var imageryLayers = this.smviewer.imageryLayers;
//初始化天地图全球中文注记服务，并添加至影像图层
var labelImagery = new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
token: URL_CONFIG.TOKEN_TIANDITU
});
imageryLayers.addImageryProvider(labelImagery);
// 添加超图发布的矢量瓦片图层
this.smviewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
url: 'http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China'
}));
var scene = this.smviewer.scene;
scene.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(120.6994, 27.9938, 100000),
orientation : {
heading : 0.003361064609361364,
pitch : -1.5310712877149566,
roll : 0
}
});
$('#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>