11111111
Showing
1 changed file
with
113 additions
and
0 deletions
src/components/threeMap.vue
0 → 100644
1 | <template> | ||
2 | <div> | ||
3 | |||
4 | <div id="cesiumContainer"> | ||
5 | <div id="vertical-slider" style="display: none;"></div> | ||
6 | <div id="horizontal-slider" style="display: none;"></div> | ||
7 | </div> | ||
8 | |||
9 | </div> | ||
10 | </template> | ||
11 | <script> | ||
12 | |||
13 | import objectManage from '../assets/js/map/maputils'; | ||
14 | import createDraw from '../assets/js/map/createDraw'; | ||
15 | import URL_CONFIG from "./../config/urlConfig.vue"; | ||
16 | const Cesium = window.Cesium; | ||
17 | |||
18 | |||
19 | export default { | ||
20 | components: { | ||
21 | |||
22 | }, | ||
23 | data() { | ||
24 | return { | ||
25 | viewer: undefined | ||
26 | } | ||
27 | }, | ||
28 | mounted() { | ||
29 | let viewer = new Cesium.Viewer('cesiumContainer', {shadows : true}); | ||
30 | viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ | ||
31 | credit : new Cesium.Credit('天地图全球影像服务'), | ||
32 | token: URL_CONFIG.TOKEN_TIANDITU | ||
33 | })); | ||
34 | let scene = viewer.scene | ||
35 | scene.shadowMap.darkness = 1; //设置第二重烘焙纹理的效果(明暗程度) | ||
36 | scene.skyAtmosphere.brightnessShift=0.4; | ||
37 | scene.debugShowFramesPerSecond = true; | ||
38 | scene.hdrEnabled = false; | ||
39 | scene.sun.show = true; | ||
40 | this.$parent.draw = new createDraw(viewer); | ||
41 | this.$parent.viewer = viewer; | ||
42 | |||
43 | var promise = []; | ||
44 | promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, { | ||
45 | name: 'build1' | ||
46 | }); | ||
47 | promise[1] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, { | ||
48 | name: 'build2' | ||
49 | }); | ||
50 | promise[2] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, { | ||
51 | name: 'ground' | ||
52 | }); | ||
53 | |||
54 | Cesium.when.all(promise, layers => { | ||
55 | layers[1].shadowType = 2; | ||
56 | layers[2].shadowType = 2; | ||
57 | scene.camera.setView({ | ||
58 | destination : Cesium.Cartesian3.fromDegrees(116.44621857300415, 39.899281526734555, 216.7793905027196), | ||
59 | orientation : { | ||
60 | heading : 0.41348036210986194, | ||
61 | pitch : -0.13636490404291735, | ||
62 | roll : 6.283185307179563 | ||
63 | } | ||
64 | }); | ||
65 | }, function(e){ | ||
66 | if (widget._showRenderLoopErrors) { | ||
67 | var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?'; | ||
68 | widget.showErrorPanel(title, undefined, e); | ||
69 | } | ||
70 | }); | ||
71 | |||
72 | }, | ||
73 | methods: { | ||
74 | |||
75 | } | ||
76 | } | ||
77 | </script> | ||
78 | |||
79 | <style> | ||
80 | html, body, #cesiumContainer { | ||
81 | height: 100%; | ||
82 | padding: 0; | ||
83 | margin: 0; | ||
84 | } | ||
85 | |||
86 | .slider { | ||
87 | position: absolute; | ||
88 | left: 50%; | ||
89 | top: 0px; | ||
90 | background-color: #d3d3d3; | ||
91 | width: 5px; | ||
92 | height: 100%; | ||
93 | z-index: 9999; | ||
94 | } | ||
95 | |||
96 | .slider:hover { | ||
97 | cursor: ew-resize; | ||
98 | } | ||
99 | |||
100 | .home { | ||
101 | position: relative; | ||
102 | width: 100%; | ||
103 | height: 100%; | ||
104 | } | ||
105 | .top { | ||
106 | position: absolute; | ||
107 | z-index: 1000; | ||
108 | color: red; | ||
109 | width: 100%; | ||
110 | /* height: 86.5px; */ | ||
111 | height: 124.5px; | ||
112 | } | ||
113 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or sign in to post a comment