Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
30e800a9 by 刘远
Options

Merge remote-tracking branch 'origin/master'

2 parents 1493e104 fe6457a3
Inline Side-by-side
Showing 2 changed files with 128 additions and 80 deletions
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,35 +91,10 @@ ...@@ -91,35 +91,10 @@
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>
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> --> 98 </div> -->
124 99
125 </div> 100 </div>
...@@ -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});
211 this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
212 credit : new Cesium.Credit('天地图全球影像服务'),
213 token: URL_CONFIG.TOKEN_TIANDITU
214 }));
215 let scene = this.viewer.scene
216 scene.shadowMap.darkness = 1; //设置第二重烘焙纹理的效果（明暗程度）
217 scene.skyAtmosphere.brightnessShift=0.4;
218 scene.debugShowFramesPerSecond = true;
219 scene.hdrEnabled = false;
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 // });
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; 184 objectManage.viewer = this.viewer;
240 // layers[0].selectEnabled = false; 185 // loadModules([
241 // layers[1].selectEnabled = false; 186 // "esri/Map",
242 console.log(layers); 187 // "esri/Basemap",
243 layers[1].shadowType = 2; 188 // "esri/views/MapView",
244 layers[2].shadowType = 2; 189 // "esri/layers/TileLayer",
245 scene.camera.setView({ 190 // "esri/layers/WebTileLayer",
246 destination : Cesium.Cartesian3.fromDegrees(116.44621857300415, 39.899281526734555, 216.7793905027196), 191 // "dojo/domReady!"
247 orientation : { 192 // ]).then(([Map, Basemap, MapView, TileLayer, WebTileLayer]) => {
248 heading : 0.41348036210986194, 193 // console.log(Map);
249 pitch : -0.13636490404291735, 194 // });
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) {
......