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
| <template>
| <div class="TiltModelBox">
| <div id="sdkContainer"> </div>
| </div>
| </template>
|
| <script>
| import mapData from '@/assets/js/mapSdk/mapData';
| export default {
| name: 'tiltModel',
| data() {
| return {
| earthCtrl: null,
| Cesium: null,
| Viewer: null,
| serveType: null,
| model: null,
| }
| },
| mounted() {
| this.initMap();
| },
| methods: {
| async initMap() {
| this.earthCtrl = new SmartEarth.EarthCtrl('sdkContainer', {
| // 隐藏默认底图
| defaultImagery: false,
| // 隐藏logo
| printLog: false,
| StaticFileBaseUrl: '/CimSDK/',
| });
| // 初始化Viewer
| this.Viewer = this.earthCtrl.viewer;
| //设置地球颜色
| this.Viewer.scene.globe.baseColor = SmartEarth.Cesium.Color.fromCssColorString('#A9A9A9');
| const terrain = config.terrain;
| if (terrain.isUrl) {
| const terrainProvider = await SmartEarth.Cesium.CesiumTerrainProvider.fromUrl(terrain.isUrl, {
| requestWaterMask: true,
| requestVertexNormals: true,
| });
|
| this.Viewer.terrainProvider = terrainProvider;
| }
| this.addImageLayer();
| this.add3DTilesetsLayer(config.domTilesets.url);
| },
| add3DTilesetsLayer(url) {
| if (this.model) {
| this.model.deleteObject()
| }
| console.log(url);
| this.model = this.earthCtrl.factory.create3DTilesets({
| url: url,
| });
| //等待模型加载完毕飞往该模型
| this.model.item.readyPromise.then(() => {
| this.flyto()
| })
| },
| flyto() {
| const options = {
| duration: 2,
| offset: new SmartEarth.Cesium.HeadingPitchRange(1.0, -0.3, 1000)
| };
| this.earthCtrl.userScene.flyTo(this.model.item, options);
| },
| addImageLayer() {
| const baseLayer = mapData.baseLayer;
| // 添加天地图底图
| this.addLayer({
| serveType: 'tdMap',
| url: baseLayer.sUrl + baseLayer.imgLayer + baseLayer.lUrl,
| });
| // 添加天地图标注
| this.addLayer({
| serveType: 'tdMap',
| url: baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl,
| });
| // 初始化视角
| this.setdefaultPerspective(mapData.defaultPerspective);
| },
| setdefaultPerspective(res) {
| this.earthCtrl.camera.jumpTo({
| destination: {
| x: res.x,
| y: res.y,
| z: res.z,
| },
| });
| },
| addLayer(res) {
| this.serveType = res.serveType;
| switch (this.serveType) {
| case 'tdMap':
| this.addTdLayer(res);
| break;
|
| }
| },
| addTdLayer(res) {
| const url = res.url + config.tdToken;
| this.Viewer.imageryLayers.addImageryProvider(
| new SmartEarth.Cesium.UrlTemplateImageryProvider({
| url: url,
| })
| );
| },
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .TiltModelBox {
| width: calc(100% - 20px);
| height: calc(100% - 20px);
| position: absolute;
| margin: 10px;
| border-radius: 5px;
| }
| </style>
|
|
