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