Merge remote-tracking branch 'origin/master'
Showing
2 changed files
with
129 additions
and
81 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 |
... | @@ -91,36 +91,11 @@ | ... | @@ -91,36 +91,11 @@ |
91 | <addProjectMsg @closeAddProjectMsg='EcloseAddProjectMsg'></addProjectMsg> | 91 | <addProjectMsg @closeAddProjectMsg='EcloseAddProjectMsg'></addProjectMsg> |
92 | </div> | 92 | </div> |
93 | 93 | ||
94 | 94 | <threeMap></threeMap> | |
95 | <div id="cesiumContainer"> | 95 | <!-- <div id="cesiumContainer"> |
96 | <div id="vertical-slider" style="display: none;"></div> | 96 | <div id="vertical-slider" style="display: none;"></div> |
97 | <div id="horizontal-slider" style="display: none;"></div> | 97 | <div id="horizontal-slider" style="display: none;"></div> |
98 | </div> | 98 | </div> --> |
99 | |||
100 | <!-- <div id="split_up" style="display: none;"></div> | ||
101 | <div id="split_bottom" style="display: none;"></div> | ||
102 | <div id="split_left" style="display: none;"></div> | ||
103 | <div id="split_right" style="display: none;"></div> --> | ||
104 | <!-- <div id="loadingbar" class="spinner"> | ||
105 | <div class="spinner-container container1"> | ||
106 | <div class="circle1"></div> | ||
107 | <div class="circle2"></div> | ||
108 | <div class="circle3"></div> | ||
109 | <div class="circle4"></div> | ||
110 | </div> | ||
111 | <div class="spinner-container container2"> | ||
112 | <div class="circle1"></div> | ||
113 | <div class="circle2"></div> | ||
114 | <div class="circle3"></div> | ||
115 | <div class="circle4"></div> | ||
116 | </div> | ||
117 | <div class="spinner-container container3"> | ||
118 | <div class="circle1"></div> | ||
119 | <div class="circle2"></div> | ||
120 | <div class="circle3"></div> | ||
121 | <div class="circle4"></div> | ||
122 | </div> | ||
123 | </div> --> | ||
124 | 99 | ||
125 | </div> | 100 | </div> |
126 | </template> | 101 | </template> |
... | @@ -129,9 +104,7 @@ | ... | @@ -129,9 +104,7 @@ |
129 | import objectManage from '../assets/js/map/maputils'; | 104 | import objectManage from '../assets/js/map/maputils'; |
130 | import createDraw from '../assets/js/map/createDraw'; | 105 | import createDraw from '../assets/js/map/createDraw'; |
131 | import roller from "../assets/js/map/roller"; | 106 | import roller from "../assets/js/map/roller"; |
132 | // import flood from "../assets/js/map/flood"; | 107 | import { loadModules } from "esri-loader"; |
133 | // import viewpoint from "../assets/js/map/viewpoint"; | ||
134 | // import visual from "../assets/js/map/visual"; | ||
135 | 108 | ||
136 | 109 | ||
137 | import TopTitle from '../components/topTitle'; | 110 | import TopTitle from '../components/topTitle'; |
... | @@ -141,6 +114,7 @@ | ... | @@ -141,6 +114,7 @@ |
141 | import leftAssert from '../components/leftAssert'; | 114 | import leftAssert from '../components/leftAssert'; |
142 | // import mapPop from '../components/mapPop'; | 115 | // import mapPop from '../components/mapPop'; |
143 | 116 | ||
117 | import threeMap from '../components/threeMap'; //三维地图 | ||
144 | import allSee from '../components/allSee'; //通视 | 118 | import allSee from '../components/allSee'; //通视 |
145 | import ymAnslysis from '../components/ymAnslysis'; //淹没分析 | 119 | import ymAnslysis from '../components/ymAnslysis'; //淹没分析 |
146 | import horizon from '../components/horizon'; // 视域分析 | 120 | import horizon from '../components/horizon'; // 视域分析 |
... | @@ -163,7 +137,7 @@ | ... | @@ -163,7 +137,7 @@ |
163 | bottomNav, | 137 | bottomNav, |
164 | leftAssert, | 138 | leftAssert, |
165 | // mapPop, | 139 | // mapPop, |
166 | 140 | threeMap, | |
167 | allSee, | 141 | allSee, |
168 | ymAnslysis, | 142 | ymAnslysis, |
169 | horizon, | 143 | horizon, |
... | @@ -207,56 +181,17 @@ | ... | @@ -207,56 +181,17 @@ |
207 | } | 181 | } |
208 | }, | 182 | }, |
209 | mounted() { | 183 | mounted() { |
210 | this.viewer = new Cesium.Viewer('cesiumContainer', {shadows : true}); | 184 | objectManage.viewer = this.viewer; |
211 | this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ | 185 | // loadModules([ |
212 | credit : new Cesium.Credit('天地图全球影像服务'), | 186 | // "esri/Map", |
213 | token: URL_CONFIG.TOKEN_TIANDITU | 187 | // "esri/Basemap", |
214 | })); | 188 | // "esri/views/MapView", |
215 | let scene = this.viewer.scene | 189 | // "esri/layers/TileLayer", |
216 | scene.shadowMap.darkness = 1; //设置第二重烘焙纹理的效果(明暗程度) | 190 | // "esri/layers/WebTileLayer", |
217 | scene.skyAtmosphere.brightnessShift=0.4; | 191 | // "dojo/domReady!" |
218 | scene.debugShowFramesPerSecond = true; | 192 | // ]).then(([Map, Basemap, MapView, TileLayer, WebTileLayer]) => { |
219 | scene.hdrEnabled = false; | 193 | // console.log(Map); |
220 | scene.sun.show = true; | ||
221 | this.draw = new createDraw(this.viewer); | ||
222 | |||
223 | var promise = []; | ||
224 | // promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, { | ||
225 | // name: 'ground' | ||
226 | // }); | 194 | // }); |
227 | promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, { | ||
228 | name: 'build1' | ||
229 | }); | ||
230 | promise[1] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, { | ||
231 | name: 'build2' | ||
232 | }); | ||
233 | promise[2] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, { | ||
234 | name: 'ground' | ||
235 | }); | ||
236 | |||
237 | Cesium.when.all(promise, layers => { | ||
238 | // this.layers = layer; | ||
239 | objectManage.viewer = this.viewer; | ||
240 | // layers[0].selectEnabled = false; | ||
241 | // layers[1].selectEnabled = false; | ||
242 | console.log(layers); | ||
243 | layers[1].shadowType = 2; | ||
244 | layers[2].shadowType = 2; | ||
245 | scene.camera.setView({ | ||
246 | destination : Cesium.Cartesian3.fromDegrees(116.44621857300415, 39.899281526734555, 216.7793905027196), | ||
247 | orientation : { | ||
248 | heading : 0.41348036210986194, | ||
249 | pitch : -0.13636490404291735, | ||
250 | roll : 6.283185307179563 | ||
251 | } | ||
252 | }); | ||
253 | }, function(e){ | ||
254 | if (widget._showRenderLoopErrors) { | ||
255 | var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?'; | ||
256 | widget.showErrorPanel(title, undefined, e); | ||
257 | } | ||
258 | }); | ||
259 | |||
260 | }, | 195 | }, |
261 | methods: { | 196 | methods: { |
262 | searchRoat(val) { | 197 | searchRoat(val) { | ... | ... |
-
Please register or sign in to post a comment