Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
170128ce by unknown
Options

'20191207'

1 parent 71a13815
Expand all
Inline Side-by-side
Showing 12 changed files with 49 additions and 70 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-04 08:14:45 5 * @LastEditTime: 2019-12-07 14:05:19
6 * @FilePath: \superglobevue\README.md 6 * @FilePath: \superglobevue\README.md
7 --> 7 -->
8 # superglobevue 8 # superglobevue
...@@ -11,13 +11,22 @@ ...@@ -11,13 +11,22 @@
11 11
12 SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。 12 SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
13 13
14 系统通过vue.config.js进行了eslint的配置。不用担心vue写法中的一系列配置和语法问题。
14 15
15 - 数据配置文件为config/urlConfig.vue 16 - 数据配置文件为config/urlConfig.vue
16 - 修改显示组件主要为views/Home.vue中的第15行 17 - 修改显示组件主要为views/Home.vue中的第15行
17 - Globe的主要视图是src/componnets/viewer.vue 18 - Globe的主要视图是src/componnets/viewer.vue
18 -
19 19
20 系统通过vue.config.js进行了eslint的配置。 20 ## 2、功能组件
21
22 - viewer_ymo.vue 淹没分析
23 - viewer_tdt.vue 加载天地图数据
24 - viewer_s3m.vue 加载倾斜摄影数据+矢量面（构成水面）
25 - viewer_s3m_single.vue 添加铁岭倾斜摄影数据+矢量面数据+矢量单体化查询效果
26 - viewer_s3m_wz.vue 自定义添加温州倾斜摄影数据+矢量面数据+单体化查询
27 - viewer_ms3m.vue 通过scene和addS3MTilesLayerByScp两种方式添加倾斜摄影场景和图层
28 - viewer_ming.vue 多个栅格图层面的动画效果
29 - viewer_changeview.vue 地图视图效果，在10000米以上不能改变角度，10000米以下能够改动视角
21 30
22 ## 2、设置 31 ## 2、设置
23 ### 项目依赖库安装 32 ### 项目依赖库安装
......
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
9 "lint": "vue-cli-service lint" 9 "lint": "vue-cli-service lint"
10 }, 10 },
11 "dependencies": { 11 "dependencies": {
12 "ant-design-vue": "^1.4.8",
13 "core-js": "^3.4.3", 12 "core-js": "^3.4.3",
14 "vue": "^2.6.10", 13 "vue": "^2.6.10",
15 "vue-router": "^3.1.3" 14 "vue-router": "^3.1.3"
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * 添加倾斜摄影场景和倾斜摄影图层 3 * 添加倾斜摄影场景和倾斜摄影图层
4 * @Date: 2019-12-02 09:05:50 4 * @Date: 2019-12-02 09:05:50
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-04 20:20:18 6 * @LastEditTime: 2019-12-07 14:03:39
7 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 7 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
8 --> 8 -->
9 <template> 9 <template>
......
1 <!-- 1 <!--
2 * 1、加载倾斜摄影模块
3 * 2、加载一个矢量面对象并将其设置为水面效果
2 * @Author: jiangbotao 4 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:52:56 5 * @Date: 2019-12-03 22:52:56
4 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
...@@ -105,12 +107,12 @@ export default { ...@@ -105,12 +107,12 @@ export default {
105 pointer-events: auto; 107 pointer-events: auto;
106 position: absolute; 108 position: absolute;
107 right: 10px; 109 right: 10px;
108 top: 70px; 110 top: 10px;
109 width: 128px; 111 width: 128px;
110 height: 128px; 112 height: 128px;
111 overflow: hidden; 113 overflow: hidden;
112 } 114 }
113 .sm-zoom { 115 .sm-zoom {
114 top: 190px; 116 top: 130px;
115 } 117 }
116 </style> 118 </style>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 * 3、使用Popup来弹出倾斜摄影覆盖面的信息 6 * 3、使用Popup来弹出倾斜摄影覆盖面的信息
7 * @Date: 2019-12-03 22:52:56 7 * @Date: 2019-12-03 22:52:56
8 * @LastEditors: jiangbotao 8 * @LastEditors: jiangbotao
9 * @LastEditTime: 2019-12-07 11:56:15 9 * @LastEditTime: 2019-12-07 14:01:32
10 * @FilePath: \superglobevue\src\components\viewer.vue 10 * @FilePath: \superglobevue\src\components\viewer.vue
11 --> 11 -->
12 <template> 12 <template>
...@@ -231,10 +231,10 @@ export default { ...@@ -231,10 +231,10 @@ export default {
231 231
232 <style> 232 <style>
233 .compass { 233 .compass {
234 top: 60px; 234 top: 10px;
235 } 235 }
236 .navigation-controls { 236 .navigation-controls {
237 top: 180px; 237 top: 130px;
238 } 238 }
239 .bubble { 239 .bubble {
240 padding: 5px; 240 padding: 5px;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:52:56 3 * @Date: 2019-12-03 22:52:56
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-07 12:44:32 5 * @LastEditTime: 2019-12-07 14:02:03
6 * @FilePath: \superglobevue\src\components\viewer.vue 6 * @FilePath: \superglobevue\src\components\viewer.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -254,9 +254,9 @@ export default { ...@@ -254,9 +254,9 @@ export default {
254 text-align: left; 254 text-align: left;
255 } 255 }
256 .compass { 256 .compass {
257 top: 60px; 257 top: 10px;
258 } 258 }
259 .navigation-controls { 259 .navigation-controls {
260 top: 170px; 260 top: 120px;
261 } 261 }
262 </style> 262 </style>
......
1 <!-- 1 <!--
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * 演示大场景被淹没 3 * 演示倾斜摄影大场景被淹没
4 * 使用场景中的HYP对象
4 * @Date: 2019-12-02 09:05:50 5 * @Date: 2019-12-02 09:05:50
5 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-04 22:03:19 7 * @LastEditTime: 2019-12-07 13:52:58
7 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 8 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
8 --> 9 -->
9 <template> 10 <template>
...@@ -130,18 +131,15 @@ export default { ...@@ -130,18 +131,15 @@ export default {
130 131
131 var layer = scene.layers.find("srsb"); 132 var layer = scene.layers.find("srsb");
132 var hyp = new Cesium.HypsometricSetting(); 133 var hyp = new Cesium.HypsometricSetting();
133
134 //创建分层设色对象 设置最大/最小可见高度 颜色表 显示模式 透明度及线宽 134 //创建分层设色对象 设置最大/最小可见高度 颜色表 显示模式 透明度及线宽
135 var colorTable = new Cesium.ColorTable(); 135 var colorTable = new Cesium.ColorTable();
136 colorTable.insert(100, new Cesium.Color(0, 39/255, 148/255)); 136 colorTable.insert(100, new Cesium.Color(0, 39/255, 148/255));
137 colorTable.insert(0, new Cesium.Color(149/255, 232/255, 249/255)); 137 colorTable.insert(0, new Cesium.Color(149/255, 232/255, 249/255));
138
139 hyp.MaxVisibleValue = currentHeight; 138 hyp.MaxVisibleValue = currentHeight;
140 hyp.MinVisibleValue = minValue; 139 hyp.MinVisibleValue = minValue;
141 hyp.ColorTable = colorTable; 140 hyp.ColorTable = colorTable;
142 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE; 141 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
143 hyp.Opacity = 0.6; 142 hyp.Opacity = 0.6;
144
145 hyp.LineInterval = 10.0; 143 hyp.LineInterval = 10.0;
146 144
147 //设置图层分层设色属性 145 //设置图层分层设色属性
...@@ -149,7 +147,6 @@ export default { ...@@ -149,7 +147,6 @@ export default {
149 hypsometricSetting : hyp, 147 hypsometricSetting : hyp,
150 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL 148 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
151 }; 149 };
152
153 currentHeight += (parseInt(document.getElementById("speed").value))/10; 150 currentHeight += (parseInt(document.getElementById("speed").value))/10;
154 }; 151 };
155 152
...@@ -158,7 +155,6 @@ export default { ...@@ -158,7 +155,6 @@ export default {
158 var layer = scene.layers.find("sci_park"); 155 var layer = scene.layers.find("sci_park");
159 var hyp = new Cesium.HypsometricSetting(); 156 var hyp = new Cesium.HypsometricSetting();
160 hyp.MaxVisibleValue = 0; 157 hyp.MaxVisibleValue = 0;
161
162 layer.hypsometricSetting = { 158 layer.hypsometricSetting = {
163 hypsometricSetting : hyp, 159 hypsometricSetting : hyp,
164 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL 160 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 * 2、添加了超图发布的矢量瓦片服务 4 * 2、添加了超图发布的矢量瓦片服务
5 * @Date: 2019-12-02 09:05:50 5 * @Date: 2019-12-02 09:05:50
6 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
7 * @LastEditTime: 2019-12-05 13:14:46 7 * @LastEditTime: 2019-12-07 13:52:13
8 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 8 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
9 --> 9 -->
10 <template> 10 <template>
...@@ -94,12 +94,12 @@ export default { ...@@ -94,12 +94,12 @@ export default {
94 pointer-events: auto; 94 pointer-events: auto;
95 position: absolute; 95 position: absolute;
96 right: 10px; 96 right: 10px;
97 top: 70px; 97 top: 10px;
98 width: 128px; 98 width: 128px;
99 height: 128px; 99 height: 128px;
100 overflow: hidden; 100 overflow: hidden;
101 } 101 }
102 .sm-zoom { 102 .sm-zoom {
103 top: 190px; 103 top: 130px;
104 } 104 }
105 </style> 105 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,12 +2,13 @@ ...@@ -2,12 +2,13 @@
2 * 显示基本的三维Globe 2 * 显示基本的三维Globe
3 * 1、添加SuperMap发布的地形数据 3 * 1、添加SuperMap发布的地形数据
4 * 2、添加SuperMap发布的影像数据 4 * 2、添加SuperMap发布的影像数据
5 * 3、量测面积 5 * 3、淹没区分析
6 * 4、淹没区分析 6 * 3.1 Entity分析
7 * 3.2 Primitive分析
7 * @Author: jiangbotao 8 * @Author: jiangbotao
8 * @Date: 2019-12-02 09:05:50 9 * @Date: 2019-12-02 09:05:50
9 * @LastEditors: jiangbotao 10 * @LastEditors: jiangbotao
10 * @LastEditTime: 2019-12-04 20:09:26 11 * @LastEditTime: 2019-12-07 13:49:40
11 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 12 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
12 --> 13 -->
13 <template> 14 <template>
...@@ -35,7 +36,7 @@ ...@@ -35,7 +36,7 @@
35 </div> 36 </div>
36 <div id="toolbar" class="param-container tool-bar"> 37 <div id="toolbar" class="param-container tool-bar">
37 <div class="param-item"> 38 <div class="param-item">
38 <button type="button" id="draw" class="button black">绘面</button> 39 <button type="button" id="draw" class="button black">绘制分析面</button>
39 <button type="button" id="begin" class="button black">淹没分析</button> 40 <button type="button" id="begin" class="button black">淹没分析</button>
40 <button type="button" id="clear" class="button black">清除</button> 41 <button type="button" id="clear" class="button black">清除</button>
41 </div> 42 </div>
...@@ -98,7 +99,7 @@ export default { ...@@ -98,7 +99,7 @@ export default {
98 positions.push(longitude); 99 positions.push(longitude);
99 positions.push(latitude); 100 positions.push(latitude);
100 positions.push(h); 101 positions.push(h);
101 102 // 淹没分析时的固定底面
102 positions2d.push(longitude); 103 positions2d.push(longitude);
103 positions2d.push(latitude); 104 positions2d.push(latitude);
104 positions2d.push(1000.0); 105 positions2d.push(1000.0);
...@@ -116,12 +117,14 @@ export default { ...@@ -116,12 +117,14 @@ export default {
116 var targetHeight = 3500; 117 var targetHeight = 3500;
117 var entities = __this.viewer.entities; 118 var entities = __this.viewer.entities;
118 //方式1 119 //方式1
119 // __this.floodCal(entities, positions2d, waterHeight, targetHeight); 120 __this.floodCal(entities, positions2d, waterHeight, targetHeight);
120 __this.floodParse(scene, positions2d, waterHeight, targetHeight); 121 // 方式2
122 // __this.floodParse(scene, positions2d, waterHeight, targetHeight);
121 handlerPolygon && handlerPolygon.clear(); 123 handlerPolygon && handlerPolygon.clear();
122 }); 124 });
123 125
124 $("#clear").click(function(){ 126 $("#clear").click(function(){
127 __this.viewer.entities.removeAll();
125 handlerPolygon && handlerPolygon.clear(); 128 handlerPolygon && handlerPolygon.clear();
126 }); 129 });
127 130
...@@ -257,7 +260,12 @@ export default { ...@@ -257,7 +260,12 @@ export default {
257 .tool-bar { 260 .tool-bar {
258 position: absolute; 261 position: absolute;
259 left: 10px; 262 left: 10px;
260 top: 60px; 263 top: 20px;
261 z-index: 10000; 264 z-index: 10000;
265 padding: 2px;
266 }
267 .param-container .param-item {
268 margin: 5px;
269 overflow: hidden;
262 } 270 }
263 </style> 271 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,17 +2,14 @@ ...@@ -2,17 +2,14 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:31:08 3 * @Date: 2019-12-03 22:31:08
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-07 11:44:35 5 * @LastEditTime: 2019-12-07 13:39:25
6 * @FilePath: \superglobevue\src\main.js 6 * @FilePath: \superglobevue\src\main.js
7 */ 7 */
8 import Vue from 'vue' 8 import Vue from 'vue'
9 import Antd from 'ant-design-vue'
10 import App from './App' 9 import App from './App'
11 import 'ant-design-vue/dist/antd.css'
12 import router from './router' 10 import router from './router'
13 11
14 Vue.config.productionTip = false 12 Vue.config.productionTip = false
15 Vue.use(Antd)
16 13
17 new Vue({ 14 new Vue({
18 router, 15 router,
......
...@@ -2,29 +2,20 @@ ...@@ -2,29 +2,20 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:31:08 3 * @Date: 2019-12-03 22:31:08
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-07 12:44:47 5 * @LastEditTime: 2019-12-07 14:00:56
6 * @FilePath: \superglobevue\src\views\Home.vue 6 * @FilePath: \superglobevue\src\views\Home.vue
7 --> 7 -->
8 <template> 8 <template>
9 <a-layout>
10 <a-layout-header>
11 <a-icon type="global" />&nbsp;&nbsp;三维地理信息系统
12 </a-layout-header>
13 <a-layout-content style="padding: 0px;">
14 <viewer></viewer> 9 <viewer></viewer>
15 </a-layout-content>
16 <a-layout-footer style="height: 22px;">Footer</a-layout-footer>
17 </a-layout>
18 </template> 10 </template>
19 11
20 <script> 12 <script>
21 import viewer from "@/components/viewer_s3m_single.vue"; 13 import viewer from "@/components/viewer_mimg.vue";
22 14
23 export default { 15 export default {
24 name: "home", 16 name: "home",
25 data() { 17 data() {
26 return { 18 return {
27 theme1: 'primary'
28 }; 19 };
29 }, 20 },
30 components: { 21 components: {
...@@ -34,28 +25,5 @@ export default { ...@@ -34,28 +25,5 @@ export default {
34 </script> 25 </script>
35 26
36 <style scoped> 27 <style scoped>
37 .ant-layout-header { 28
38 height: 60px;
39 top: 0px;
40 position: absolute;
41 width: 100%;
42 background-color: #2d8cf0;
43 color: white;
44 text-align: left;
45 padding: 0px 0px;
46 padding-left: 10px;
47 z-index: 99;
48 font-size: 18pt;
49 }
50 .ant-layout-footer {
51 height: 22px;
52 bottom: 0px;
53 position: absolute;
54 width: 100%;
55 background-color: rgba(19, 17, 17, 0.5);
56 color: white;
57 text-align: left;
58 padding-top: 2px;
59 padding-left: 10px;
60 }
61 </style> 29 </style>
......