Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
4b3e59ec by unknown
Options

'20191207'

1 parent 170128ce
Inline Side-by-side
Showing 6 changed files with 284 additions and 6 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:31:52 3 * @Date: 2019-12-03 22:31:52
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-07 14:05:19 5 * @LastEditTime: 2019-12-07 14:52:28
6 * @FilePath: \superglobevue\README.md 6 * @FilePath: \superglobevue\README.md
7 --> 7 -->
8 # superglobevue 8 # superglobevue
...@@ -27,6 +27,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。 ...@@ -27,6 +27,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
27 - viewer_ms3m.vue 通过scene和addS3MTilesLayerByScp两种方式添加倾斜摄影场景和图层 27 - viewer_ms3m.vue 通过scene和addS3MTilesLayerByScp两种方式添加倾斜摄影场景和图层
28 - viewer_ming.vue 多个栅格图层面的动画效果 28 - viewer_ming.vue 多个栅格图层面的动画效果
29 - viewer_changeview.vue 地图视图效果，在10000米以上不能改变角度，10000米以下能够改动视角 29 - viewer_changeview.vue 地图视图效果，在10000米以上不能改变角度，10000米以下能够改动视角
30 - viewer_3dmodel.vue 展示矢量数据白模
30 31
31 ## 2、设置 32 ## 2、设置
32 ### 项目依赖库安装 33 ### 项目依赖库安装
......
1 <!--
2 * 矢量数据白模
3 * @Author: jiangbotao
4 * @Date: 2019-12-07 14:24:01
5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 14:28:38
7 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
8 -->
9 <template>
10 <div>
11 <div id="cesiumContainer" v-bind:style="styleObject"></div>
12 <div id='loadingbar' class="spinner">
13 <div class="spinner-container container1">
14 <div class="circle1"></div>
15 <div class="circle2"></div>
16 <div class="circle3"></div>
17 <div class="circle4"></div>
18 </div>
19 <div class="spinner-container container2">
20 <div class="circle1"></div>
21 <div class="circle2"></div>
22 <div class="circle3"></div>
23 <div class="circle4"></div>
24 </div>
25 <div class="spinner-container container3">
26 <div class="circle1"></div>
27 <div class="circle2"></div>
28 <div class="circle3"></div>
29 <div class="circle4"></div>
30 </div>
31 </div>
32 </div>
33 </template>
34
35 <script>
36 import URL_CONFIG from './../config/urlConfig.vue';
37 const Cesium=window.Cesium;
38 export default {
39 data: function(){
40 return {
41 styleObject:{
42 width: '100%',
43 position: 'absolute',
44 top: '0px',
45 bottom: '0px',
46 left: '0px',
47 backgroundColor: '#000000'
48 },
49 smviewer:{}
50 }
51 },
52 mounted: function(){
53 this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
54 var scene = this.smviewer.scene;
55 var widget = this.smviewer.cesiumWidget;
56 // 隐藏logo
57 $(".cesium-widget-credits")[0].style.visibility="hidden";
58 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
59 // 隐藏导航工具
60 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
61 this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
62 mapStyle : Cesium.TiandituMapsStyle.IMG_C,
63 token: URL_CONFIG.TOKEN_TIANDITU
64 }));
65
66 try{
67 //打开所发布三维服务下的所有图层
68 var promise = scene.open(URL_CONFIG.GZ_SCENE);
69 Cesium.when.all(promise, function(layers){
70 //设置图层的阴影模式
71 scene.camera.setView({
72 //将经度、纬度、高度的坐标转换为笛卡尔坐标
73 destination : new Cesium.Cartesian3(-2323607.7945701713, 5386182.530303348, 2505814.811681112),
74 orientation : {
75 heading : 4.844795866469065,
76 pitch : -0.58125995096984,
77 roll :1.2504663970958063e-11
78 }
79 });
80 }, function(e){
81 if(widget._showRenderLoopErrors) {
82 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
83 widget.showErrorPanel(title, undefined, e);
84 }
85 });
86 }catch(e){
87 if(widget._showRenderLoopErrors) {
88 var title = '渲染时发生错误，已停止渲染。';
89 widget.showErrorPanel(title, undefined, e);
90 }
91 }
92
93 $('#loadingbar').remove();
94 }
95 }
96 </script>
97
98 <style>
99 .sm-compass {
100 pointer-events: auto;
101 position: absolute;
102 right: 10px;
103 top: 10px;
104 width: 128px;
105 height: 128px;
106 overflow: hidden;
107 }
108 .sm-zoom {
109 top: 130px;
110 }
111 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * 矢量数据白模
3 * @Author: jiangbotao
4 * @Date: 2019-12-07 14:24:01
5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 14:58:44
7 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
8 -->
9 <template>
10 <div>
11 <div id="cesiumContainer" v-bind:style="styleObject"></div>
12 <div id='loadingbar' class="spinner">
13 <div class="spinner-container container1">
14 <div class="circle1"></div>
15 <div class="circle2"></div>
16 <div class="circle3"></div>
17 <div class="circle4"></div>
18 </div>
19 <div class="spinner-container container2">
20 <div class="circle1"></div>
21 <div class="circle2"></div>
22 <div class="circle3"></div>
23 <div class="circle4"></div>
24 </div>
25 <div class="spinner-container container3">
26 <div class="circle1"></div>
27 <div class="circle2"></div>
28 <div class="circle3"></div>
29 <div class="circle4"></div>
30 </div>
31 </div>
32 <div id="toolbar" class="param-container tool-bar">
33 <div>
34 <label style="color:#FFFFFF ">图层开挖:</label>
35 <button id="excavation" >进行倾斜开挖</button>
36 </div>
37 </div>
38 </div>
39 </template>
40
41 <script>
42 import URL_CONFIG from './../config/urlConfig.vue';
43 const Cesium=window.Cesium;
44 export default {
45 data: function(){
46 return {
47 styleObject:{
48 width: '100%',
49 position: 'absolute',
50 top: '0px',
51 bottom: '0px',
52 left: '0px',
53 backgroundColor: '#000000'
54 },
55 smviewer:{}
56 }
57 },
58 mounted: function(){
59 this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
60 var scene = this.smviewer.scene;
61 var widget = this.smviewer.cesiumWidget;
62 var globe = scene.globe;
63 // 隐藏logo
64 $(".cesium-widget-credits")[0].style.visibility="hidden";
65 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
66 // 隐藏导航工具
67 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
68
69 this.smviewer.scene.undergroundMode = true; //设置开启地下场景
70 this.smviewer.scene.screenSpaceCameraController.minimumZoomDistance = -500;//设置相机最小缩放距离,距离地表-1000米
71 this.smviewer.scene.terrainProvider.isCreateSkirt = false; // 关闭裙边
72
73 var overGroundLayer = null;
74 try{
75 //打开所发布三维服务下的所有图层
76 var promise = scene.open('http://www.supermapol.com/realspace/services/3D-pipe/rest/realspace');
77 Cesium.when.all(promise, function(layers){
78 overGroundLayer = scene.layers.find('Config');
79 //设置图层的阴影模式
80 scene.camera.setView({
81 //将经度、纬度、高度的坐标转换为笛卡尔坐标
82 destination : new Cesium.Cartesian3(-2654051.707084536, 3570921.9596162816, 4570167.290651748),
83 orientation : {
84 heading : 2.3280016887452777,
85 pitch : -0.586141022221434,
86 roll : 6.283185307176403
87 }
88 });
89 }, function(e){
90 if(widget._showRenderLoopErrors) {
91 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
92 widget.showErrorPanel(title, undefined, e);
93 }
94 });
95 }catch(e){
96 if(widget._showRenderLoopErrors) {
97 var title = '渲染时发生错误，已停止渲染。';
98 widget.showErrorPanel(title, undefined, e);
99 }
100 }
101
102 var positions = null;
103 // 绘制面
104 var handlerPolygon = new Cesium.DrawHandler(this.smviewer, Cesium.DrawMode.Polygon);
105 handlerPolygon.drawEvt.addEventListener(function(polygon){
106 var array = [].concat(polygon.object.positions);
107 positions = [];
108 for(var i = 0, len = array.length; i < len; i++){
109 var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
110 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
111 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
112 var h=cartographic.height;
113 if(positions.indexOf(longitude)===-1&&positions.indexOf(latitude)===-1){
114 positions.push(longitude);
115 positions.push(latitude);
116 positions.push(h);
117 }
118 }
119 console.log(positions);
120 return positions;
121 });
122
123
124 $("#excavation").on("click", function(){
125 handlerPolygon && handlerPolygon.deactivate();
126 handlerPolygon && handlerPolygon.activate();
127 //设置倾斜开挖参数
128 overGroundLayer.addExcavationRegion({
129 position : positions,
130 name : 'excavation_' + Math.random()
131 });
132 handlerPolygon.deactivate();
133 });
134
135 $('#loadingbar').remove();
136 }
137 }
138 </script>
139
140 <style>
141 .sm-compass {
142 pointer-events: auto;
143 position: absolute;
144 right: 10px;
145 top: 10px;
146 width: 128px;
147 height: 128px;
148 overflow: hidden;
149 }
150 .sm-zoom {
151 top: 130px;
152 }
153 #excavation {
154 color:rgb(255, 255, 255);
155 font-size:14px;padding-top:4px;padding-bottom:4px;padding-left:33px;padding-right:33px;
156 border-width:2px;border-color:rgb(74, 99, 31);border-style:solid;border-radius:11px;
157 background-color:rgb(44, 89, 128);}
158 #excavation:hover{
159 color:#ffffff;
160 background-color:#78c300;
161 border-color:#c5e591;
162 }
163 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 * @Author: jiangbotao 8 * @Author: jiangbotao
9 * @Date: 2019-12-02 09:05:50 9 * @Date: 2019-12-02 09:05:50
10 * @LastEditors: jiangbotao 10 * @LastEditors: jiangbotao
11 * @LastEditTime: 2019-12-07 13:49:40 11 * @LastEditTime: 2019-12-07 14:59:33
12 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 12 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
13 --> 13 -->
14 <template> 14 <template>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:54:10 3 * @Date: 2019-12-03 22:54:10
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-04 19:50:11 5 * @LastEditTime: 2019-12-07 14:31:42
6 * @FilePath: \superglobevue\src\config\urlConfig.vue 6 * @FilePath: \superglobevue\src\config\urlConfig.vue
7 --> 7 -->
8 <script> 8 <script>
...@@ -30,6 +30,7 @@ const SCENE_SRSB = "http://www.supermapol.com/realspace/services/3D-srsb/rest/re ...@@ -30,6 +30,7 @@ const SCENE_SRSB = "http://www.supermapol.com/realspace/services/3D-srsb/rest/re
30 const SCENE_WZ_QD = 'http://localhost:8090/iserver/services/3D-wz_qidu_qx/rest/realspace/'; 30 const SCENE_WZ_QD = 'http://localhost:8090/iserver/services/3D-wz_qidu_qx/rest/realspace/';
31 const SCP_SRSB_WATER = "http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace/datas/%E6%B0%B4%E9%9D%A2@vector/config"; 31 const SCP_SRSB_WATER = "http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace/datas/%E6%B0%B4%E9%9D%A2@vector/config";
32 const SCENE_XGPARK = "http://www.supermapol.com/realspace/services/3D-yanmofenxi/rest/realspace"; 32 const SCENE_XGPARK = "http://www.supermapol.com/realspace/services/3D-yanmofenxi/rest/realspace";
33 const GZ_SCENE = 'http://www.supermapol.com/realspace/services/3D-GuangZhou/rest/realspace';
33 export default 34 export default
34 { 35 {
35 TDT_IMG, 36 TDT_IMG,
...@@ -54,6 +55,7 @@ export default ...@@ -54,6 +55,7 @@ export default
54 SCP_SRSB_WATER, 55 SCP_SRSB_WATER,
55 SCENE_SY, 56 SCENE_SY,
56 TOKEN_TIANDITU, 57 TOKEN_TIANDITU,
57 SCENE_XGPARK 58 SCENE_XGPARK,
59 GZ_SCENE
58 }; 60 };
59 </script> 61 </script>
......
1 <!-- 1 <!--
2 * 开挖分析
2 * @Author: jiangbotao 3 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:31:08 4 * @Date: 2019-12-03 22:31:08
4 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-07 14:00:56 6 * @LastEditTime: 2019-12-07 14:49:20
6 * @FilePath: \superglobevue\src\views\Home.vue 7 * @FilePath: \superglobevue\src\views\Home.vue
7 --> 8 -->
8 <template> 9 <template>
...@@ -10,7 +11,7 @@ ...@@ -10,7 +11,7 @@
10 </template> 11 </template>
11 12
12 <script> 13 <script>
13 import viewer from "@/components/viewer_mimg.vue"; 14 import viewer from "@/components/viewer_underground.vue";
14 15
15 export default { 16 export default {
16 name: "home", 17 name: "home",
......