viewer_changeview.vue
3.95 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
<!--
* @Author: jiangbotao
* 限制在一定高度上的视角变化
* 当到一定尺度后开始可以改变视角
* @Date: 2019-12-03 21:30:29
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 20:25:49
* @FilePath: \WebGL_Webpack_Vue\components\viewer6.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: 5px;top: 5px;display: none;">
<select id="imageryOptions" class="selectpicker show-tick form-control">
<!--<option disabled selected value>--选择服务类型--</option>-->
<option selected value="WGS">自定义影像&地形-平面场景</option>
<option value="MEC">倾斜数据-三维场景</option>
</select>
</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 scenecamera=null;
this.smviewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url : 'https://dev.virtualearth.net',
mapStyle : Cesium.BingMapsStyle.AERIAL,
key : 'AhLx52IuZUuca_C3zK2TzBG2eu1vihUkayqc_e4MISbXZyn5Zw_X--odRqrweVap'
}));
this.smviewer.scene.screenSpaceCameraController.maximumZoomDistance=100000;
this.smviewer.scene.screenSpaceCameraController.enableTilt=false;
var scene = this.smviewer.scene;
scene.camera.setView({
destination : new Cesium.Cartesian3(-1312359.8872867103, 5363468.852567853, 3218043.8251359267),
orientation : {
heading : 0.003361064609361364,
pitch : -1.5310712877149566,
roll : 0
}
});
var stviewer = this.smviewer;
scene.postRender.addEventListener(function(){
scenecamera=scene.camera;
var position = scene.camera.position;
var cartographic = Cesium.Cartographic.fromCartesian(position);
var height = cartographic.height;
if(height<10000){
stviewer.scene.screenSpaceCameraController.enableTilt=true;
}else{
stviewer.scene.screenSpaceCameraController.enableTilt=false;
scene.camera.setView({
destination: Cesium.Cartesian3(scenecamera.position.x, scenecamera.position.y, scenecamera.position.z),
orientation: {
heading: scenecamera.heading,
pitch: -1.5310712877149566,
roll: 0.000000
}
});
}
})
//添加下拉菜单，点击选项切换地图服务
$('#imageryOptions').change(function() {
console.log(scene.camera)
});
$('#toolbar').show();
$('#loadingbar').remove();
}
}
</script>
<style>
</style>