Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
a3e46c8c by unknown
Options

'20191210'

1 parent 1e1c3696
Inline Side-by-side
Showing 9 changed files with 310 additions and 32 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
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-03 22:50:32 5 * @LastEditTime: 2019-12-10 10:16:09
6 * @FilePath: \superglobevue\src\App.vue 6 * @FilePath: \superglobevue\src\App.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
12 </template> 12 </template>
13 13
14 <style lang="scss"> 14 <style lang="scss">
15 body{
16 padding: 0px;
17 margin: 0px;
18 }
15 #app { 19 #app {
16 font-family: 'Avenir', Helvetica, Arial, sans-serif; 20 font-family: 'Avenir', Helvetica, Arial, sans-serif;
17 -webkit-font-smoothing: antialiased; 21 -webkit-font-smoothing: antialiased;
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 * @Author: jiangbotao 4 * @Author: jiangbotao
5 * @Date: 2019-12-07 14:24:01 5 * @Date: 2019-12-07 14:24:01
6 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
7 * @LastEditTime: 2019-12-09 13:09:00 7 * @LastEditTime: 2019-12-10 10:17:09
8 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue 8 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
9 --> 9 -->
10 <template> 10 <template>
...@@ -35,12 +35,14 @@ ...@@ -35,12 +35,14 @@
35 35
36 <script> 36 <script>
37 import URL_CONFIG from './../config/urlConfig.vue'; 37 import URL_CONFIG from './../config/urlConfig.vue';
38 const Cesium=window.Cesium; 38 const Cesium = window.Cesium;
39
39 export default { 40 export default {
40 data: function(){ 41 data: function(){
41 return { 42 return {
42 styleObject:{ 43 styleObject:{
43 width: '100%', 44 width: '100%',
45 height: '100%',
44 position: 'absolute', 46 position: 'absolute',
45 top: '0px', 47 top: '0px',
46 bottom: '0px', 48 bottom: '0px',
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 * @Author: jiangbotao 4 * @Author: jiangbotao
5 * @Date: 2019-12-08 22:39:07 5 * @Date: 2019-12-08 22:39:07
6 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
7 * @LastEditTime: 2019-12-09 12:01:09 7 * @LastEditTime: 2019-12-10 10:22:59
8 * @FilePath: \superglobevue\src\components\viewer_fire.vue 8 * @FilePath: \superglobevue\src\components\viewer_fire.vue
9 --> 9 -->
10 <template> 10 <template>
......
...@@ -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-09 13:33:21 9 * @LastEditTime: 2019-12-10 10:34:30
10 * @FilePath: \superglobevue\src\components\viewer.vue 10 * @FilePath: \superglobevue\src\components\viewer.vue
11 --> 11 -->
12 <template> 12 <template>
...@@ -208,25 +208,10 @@ export default { ...@@ -208,25 +208,10 @@ export default {
208 name: '单体化标识面', 208 name: '单体化标识面',
209 polygon: { 209 polygon: {
210 hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr), 210 hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
211 material: new Cesium.Color(1.0, 0.0, 0.0, 0.3), 211 material: new Cesium.Color(0.0, 1.0, 0.0, 0.3),
212 }, 212 },
213 clampToS3M: true // 贴在S3M模型表面 213 clampToS3M: true // 贴在S3M模型表面
214 }); 214 });
215 // console.log(lonLatArr);
216 // smviewer.entities.add({
217 // id: 'identify-area',
218 // name: '单体化标识面',
219 // polygon: {
220 // hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
221 // material: new Cesium.Color(0.0, 1.0, 0.0, 0.3),
222 // // perPositionHeight: true,
223 // extrudedHeight: 100,
224 // height: 50,
225 // vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
226 // outline : true,
227 // outlineColor : Cesium.Color.BLACK
228 // },
229 // });
230 } 215 }
231 216
232 // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。 217 // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
......
1 <!--
2 * @Author: jiangbotao
3 * 本例中使用了铁岭的倾斜摄影数据发布的服务
4 * 1、必须同时发布为三维和Rest数据服务
5 * 2、使用要素查询方式来选择倾斜摄影覆盖面（a、矢量面紧贴S3M；b、矢量面构筑entity）
6 * 3、使用Popup来弹出倾斜摄影覆盖面的信息
7 * @Date: 2019-12-03 22:52:56
8 * @LastEditors: jiangbotao
9 * @LastEditTime: 2019-12-10 10:39:05
10 * @FilePath: \superglobevue\src\components\viewer.vue
11 -->
12 <template>
13 <div>
14 <div id="cesiumContainer" v-bind:style="styleObject"></div>
15 <div id='loadingbar' class="spinner">
16 <div class="spinner-container container1">
17 <div class="circle1"></div>
18 <div class="circle2"></div>
19 <div class="circle3"></div>
20 <div class="circle4"></div>
21 </div>
22 <div class="spinner-container container2">
23 <div class="circle1"></div>
24 <div class="circle2"></div>
25 <div class="circle3"></div>
26 <div class="circle4"></div>
27 </div>
28 <div class="spinner-container container3">
29 <div class="circle1"></div>
30 <div class="circle2"></div>
31 <div class="circle3"></div>
32 <div class="circle4"></div>
33 </div>
34 </div>
35 <!-- 气泡HTML -->
36 <div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;" >
37 <div id="tools" style="text-align : right">
38 <span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性</span>
39 <span class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px"></span>
40 </div>
41 <div style="overflow-y:scroll;height:150px" id="tableContainer"><table id="tab"></table></div>
42 </div>
43 </div>
44 </template>
45
46 <script>
47 import URL_CONFIG from "./../config/urlConfig.vue";
48 const Cesium = window.Cesium;
49 export default {
50 data: function() {
51 return {
52 styleObject: {
53 width: "100%",
54 height: '100%',
55 position: "absolute",
56 top: "0px",
57 bottom: "0px",
58 left: "0px",
59 backgroundColor: "#000000"
60 },
61 smviewer: {}
62 };
63 },
64 mounted: function() {
65 // cesium视图
66 this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false });
67 // 使用自定义的navigation
68 var options = {};
69 options.enableCompass= true;
70 options.enableZoomControls= true;
71 options.enableDistanceLegend= true;
72 options.enableCompassOuterRing= true;
73 this.viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
74 // 隐藏logo
75 $(".cesium-widget-credits")[0].style.visibility = "hidden";
76 // 隐藏导航工具
77 $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
78 // 必要的引用对象
79 var smviewer = this.viewer;
80 var scene = this.viewer.scene;
81 var widget = this.viewer.cesiumWidget;
82 var camera = scene.camera;
83 // 场景位置，用于popup定位
84 var scenePosition = null;
85 var infoboxContainer = document.getElementById("bubble");
86 var table = document.getElementById("tab");
87
88 try {
89 // 添加s3m图层
90 var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config",
91 { name: "oblique photography" });
92 Cesium.when.all([promise2], function(obliqueLayers){
93 // 等倾斜摄影数据加载完了再去加载矢量面，否则矢量面找不到目标去贴对象
94 // 先定位，开始渲染定位区域的倾斜
95 camera.setView({
96 destination : new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093),
97 orientation : {
98 heading: 4.39611370540786,
99 pitch : -0.43458664812464143,
100 roll : 2.0174972803488345e-11
101 }
102 });
103 // 去除加载动画
104 $('#loadingbar').remove();
105 });
106 } catch (e) {
107 if (widget._showRenderLoopErrors) {
108 var title = '渲染时发生错误，已停止渲染。';
109 widget.showErrorPanel(title, undefined, e);
110 }
111 }
112 // 倾斜摄影模型下的矢量数据面
113 var dataSourceName = '铁岭矢量面'; // 数据源名称
114 var dataSetName = 'New_Region3D_1'; // 数据集名称
115 var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.rjson?returnContent=true';
116
117 // 鼠标左键的触发事件，查询要素并弹出显示
118 var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
119 handler.setInputAction(function(e) {
120 // 删除可能存在的identify-area的entity，它是我们后面查询的用于标识模型的三维面
121 smviewer.entities.removeById('identify-area');
122 // 当前位置
123 var position = scene.pickPosition(e.position);
124 // 设置场景位置
125 scenePosition = position;
126 var cartographic = Cesium.Cartographic.fromCartesian(position);
127 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
128 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
129 var queryPoint = { // 查询点对象
130 x: longitude,
131 y: latitude
132 };
133 // 将当前点转换为地理坐标后进行查询
134 queryByPoint(queryPoint);
135 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
136
137 $("#close").click(function(){
138 // 关闭气泡
139 smviewer.entities.removeAll();
140 $("#bubble").hide();
141 });
142 // 每一帧都去计算气泡的正确位置
143 scene.postRender.addEventListener(function(){
144 if (scenePosition) {
145 var canvasHeight = scene.canvas.height;
146 var windowPosition = new Cesium.Cartesian2();
147 Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
148 infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + 45) + 'px';
149 infoboxContainer.style.left = (windowPosition.x - 70) + 'px';
150 infoboxContainer.style.visibility = "visible";
151 }
152 });
153
154 // 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。
155 function queryByPoint(queryPoint) {
156 var queryObj = {
157 "getFeatureMode": "SPATIAL",
158 "spatialQueryMode": "INTERSECT",
159 "datasetNames": [dataSourceName + ":" + dataSetName],
160 "geometry": {
161 id: 0,
162 parts: [1],
163 points: [queryPoint],
164 type: "POINT"
165 }
166 };
167
168 var queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数
169 $.ajax({
170 type: "post",
171 url: dataServiceUrl,
172 data: queryObjJSON,
173 success: function(result) {
174 var resultObj = JSON.parse(result);
175 if (resultObj.featureCount > 0) {
176 var selectedFeature = resultObj.features[0];
177 addClapFeature(selectedFeature);
178 // console.log(selectedFeature);
179 $("#bubble").show();
180 for (var i=table.rows.length-1; i>-1; i--){
181 table.deleteRow(i);
182 }
183 for(var index in selectedFeature.fieldNames){
184 var newRow = table.insertRow();
185 var cell1 = newRow.insertCell();
186 var cell2 = newRow.insertCell();
187 cell1.innerHTML = selectedFeature.fieldNames[index];
188 cell2.innerHTML = selectedFeature.fieldValues[index];
189 }
190 }else{
191 $("#bubble").hide();
192 }
193 },
194 error: function(msg) {
195 console.log(msg);
196 }
197 })
198 }
199
200 // 将数据服务查询到的要素添加到场景中高亮显示，表示选中效果。
201 // 两种方法：
202 // a. 矢量面紧贴S3M
203 // b. 使用entity模型
204 function addClapFeature(feature) {
205 var lonLatArr = getLonLatArray(feature.geometry.points);
206 smviewer.entities.add({
207 id: 'identify-area',
208 name: '单体化标识面',
209 polygon: {
210 hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
211 material: new Cesium.Color(0.0, 1.0, 0.0, 0.3),
212 // perPositionHeight: true,
213 extrudedHeight: 100,
214 height: 50,
215 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
216 outline : true,
217 outlineColor : Cesium.Color.BLACK
218 },
219 });
220 }
221
222 // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
223 function getLonLatArray(points) {
224 var point3D = [];
225 points.forEach(function(point) {
226 point3D.push(point.x);
227 point3D.push(point.y);
228 });
229 return point3D;
230 }
231 }
232 };
233 </script>
234
235 <style>
236 .compass {
237 top: 10px;
238 }
239 .navigation-controls {
240 top: 130px;
241 }
242 .bubble {
243 padding: 5px;
244 border-radius: 5px;
245 }
246 #tab {
247 height: unset;
248 text-align: left;
249 }
250 </style>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 * @Author: jiangbotao 4 * @Author: jiangbotao
5 * @Date: 2019-12-03 22:52:56 5 * @Date: 2019-12-03 22:52:56
6 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
7 * @LastEditTime: 2019-12-09 13:54:49 7 * @LastEditTime: 2019-12-10 10:40:00
8 * @FilePath: \superglobevue\src\components\viewer.vue 8 * @FilePath: \superglobevue\src\components\viewer.vue
9 --> 9 -->
10 <template> 10 <template>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * @Author: jiangbotao 3 * @Author: jiangbotao
4 * @Date: 2019-12-03 22:52:56 4 * @Date: 2019-12-03 22:52:56
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 23:37:13 6 * @LastEditTime: 2019-12-10 11:01:35
7 * @FilePath: \superglobevue\src\components\viewer.vue 7 * @FilePath: \superglobevue\src\components\viewer.vue
8 --> 8 -->
9 <template> 9 <template>
...@@ -81,13 +81,18 @@ export default { ...@@ -81,13 +81,18 @@ export default {
81 var groundPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, { 81 var groundPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
82 name: 'ground' 82 name: 'ground'
83 }); 83 });
84 var ground2Promise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND2, {
85 name: 'ground2'
86 });
84 var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, { 87 var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
85 name: 'build' 88 name: 'build'
86 }); 89 });
87 // 添加倾斜摄影模型图层 90 // 添加倾斜摄影模型图层
88 Cesium.when([groundPromise, buildPromise], function(layers) { 91 Cesium.when.all([groundPromise, ground2Promise, buildPromise], function(layers) {
89 var build = scene.layers.find("build"); 92 var build = scene.layers.find("build");
90 var ground = scene.layers.find("ground"); 93 var ground = scene.layers.find("ground");
94 var ground2 = scene.layers.find("ground2");
95 // console.log(build);
91 // 图层加载完成,设置相机位置 96 // 图层加载完成,设置相机位置
92 scene.camera.setView({ 97 scene.camera.setView({
93 destination: Cesium.Cartesian3.fromDegrees(116.4563, 39.8969, 553), 98 destination: Cesium.Cartesian3.fromDegrees(116.4563, 39.8969, 553),
...@@ -118,9 +123,9 @@ export default { ...@@ -118,9 +123,9 @@ export default {
118 $('#b_one,#b_two,#g_one,#g_two').show(); 123 $('#b_one,#b_two,#g_one,#g_two').show();
119 $('#b_three,#g_three,#b_four,#g_four').hide(); 124 $('#b_three,#g_three,#b_four,#g_four').hide();
120 scene.multiViewportMode = Cesium.MultiViewportMode["HORIZONTAL"]; 125 scene.multiViewportMode = Cesium.MultiViewportMode["HORIZONTAL"];
121 126 console.log(ground2);
122 ground.setViewportVisible(1, false); 127 ground2.setVisibleInViewport(1, false);
123 ground.setViewportVisible(0, true); 128 ground.setVisibleInViewport(0, false);
124 }); 129 });
125 }, function() { 130 }, function() {
126 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？'; 131 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
......
...@@ -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-09 12:22:02 11 * @LastEditTime: 2019-12-10 11:21:05
12 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 12 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
13 --> 13 -->
14 <template> 14 <template>
...@@ -35,6 +35,32 @@ ...@@ -35,6 +35,32 @@
35 </div> 35 </div>
36 </div> 36 </div>
37 <div id="toolbar" class="param-container tool-bar"> 37 <div id="toolbar" class="param-container tool-bar">
38 <div id="setingBar">
39 <div class="form-group">
40 <input id="maxHeight" value="71" required="required" class="form-control"/>
41 <label class="form-label">洪峰流量(立方米/秒) : </label>
42 </div>
43 <div class="form-group">
44 <input id="minHeight" value="60" required="required" class="form-control"/>
45 <label class="form-label">部分产流面积 (平方千米) :</label>
46 </div>
47 <div class="form-group">
48 <input id="minHeight" value="60" required="required" class="form-control"/>
49 <label class="form-label">降雨强度 (mm/h) :</label>
50 </div>
51 <div class="form-group">
52 <input id="minHeight" value="60" required="required" class="form-control"/>
53 <label class="form-label">渗透强度 (mm/h) :</label>
54 </div>
55 <div class="form-group">
56 <input id="speed" value="5" required="required" class="form-control"/>
57 <label class="form-label">淹没速度(mm/秒):</label>
58 </div>
59 <div class="form-group">
60 <input id="speed" value="5" required="required" class="form-control"/>
61 <label class="form-label">最低高程(m):</label>
62 </div>
63 </div>
38 <div class="param-item"> 64 <div class="param-item">
39 <button type="button" id="draw" class="button black">绘制分析面</button> 65 <button type="button" id="draw" class="button black">绘制分析面</button>
40 <button type="button" id="begin" class="button black">淹没分析</button> 66 <button type="button" id="begin" class="button black">淹没分析</button>
...@@ -117,9 +143,9 @@ export default { ...@@ -117,9 +143,9 @@ export default {
117 var targetHeight = 3500; 143 var targetHeight = 3500;
118 var entities = __this.viewer.entities; 144 var entities = __this.viewer.entities;
119 //方式1 145 //方式1
120 __this.floodCal(entities, positions2d, waterHeight, targetHeight); 146 // __this.floodCal(entities, positions2d, waterHeight, targetHeight);
121 // 方式2 147 // 方式2
122 // __this.floodParse(scene, positions2d, waterHeight, targetHeight); 148 __this.floodParse(scene, positions2d, waterHeight, targetHeight);
123 handlerPolygon && handlerPolygon.clear(); 149 handlerPolygon && handlerPolygon.clear();
124 }); 150 });
125 151
......
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:31:08
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-10 11:23:56
6 * @FilePath: \superglobevue\src\views\Home.vue
7 -->
1 <template> 8 <template>
2 <viewer></viewer> 9 <viewer></viewer>
3 </template> 10 </template>
4 11
5 <script> 12 <script>
6 import viewer from "@/components/viewer_s3m_wz.vue"; 13 import viewer from "@/components/viewer_ymo.vue";
7
8 export default { 14 export default {
9 name: "home", 15 name: "home",
10 data() { 16 data() {
......