Skip to content

蒋波涛 / super_globe_vue

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

'20191205'

1 parent fa498086
Inline Side-by-side
Showing 2 changed files with 70 additions and 18 deletions
1 <!-- 1 <!--
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * 本例中使用了铁岭的倾斜摄影数据发布的服务
4 * 1、必须同时发布为三维和Rest服务
5 * 2、使用要素查询方式来选择倾斜摄影覆盖面
6 * 3、使用Popup来弹出倾斜摄影覆盖面的信息
3 * @Date: 2019-12-03 22:52:56 7 * @Date: 2019-12-03 22:52:56
4 * @LastEditors: jiangbotao 8 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-05 13:16:55 9 * @LastEditTime: 2019-12-05 21:30:15
6 * @FilePath: \superglobevue\src\components\viewer.vue 10 * @FilePath: \superglobevue\src\components\viewer.vue
7 --> 11 -->
8 <template> 12 <template>
...@@ -28,6 +32,14 @@ ...@@ -28,6 +32,14 @@
28 <div class="circle4"></div> 32 <div class="circle4"></div>
29 </div> 33 </div>
30 </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>
31 </div> 43 </div>
32 </template> 44 </template>
33 45
...@@ -52,6 +64,7 @@ export default { ...@@ -52,6 +64,7 @@ export default {
52 }, 64 },
53 mounted: function() { 65 mounted: function() {
54 this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false }); 66 this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false });
67 // 使用自定义的navigation
55 var options = {}; 68 var options = {};
56 options.enableCompass= true; 69 options.enableCompass= true;
57 options.enableZoomControls= true; 70 options.enableZoomControls= true;
...@@ -67,21 +80,8 @@ export default { ...@@ -67,21 +80,8 @@ export default {
67 var scene = this.viewer.scene; 80 var scene = this.viewer.scene;
68 var widget = this.viewer.cesiumWidget; 81 var widget = this.viewer.cesiumWidget;
69 var camera = scene.camera; 82 var camera = scene.camera;
70 83 // 场景位置，用于popup定位
71 var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas); 84 var scenePosition = null;
72 handler.setInputAction(function(e) {
73 smviewer.entities.removeById('identify-area');
74 var position = scene.pickPosition(e.position);
75 var cartographic = Cesium.Cartographic.fromCartesian(position);
76 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
77 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
78 var queryPoint = { // 查询点对象
79 x: longitude,
80 y: latitude
81 };
82 console.log(queryPoint);
83 queryByPoint(queryPoint);
84 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
85 85
86 try { 86 try {
87 var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config", 87 var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config",
...@@ -107,7 +107,42 @@ export default { ...@@ -107,7 +107,42 @@ export default {
107 var dataSourceName = '铁岭矢量面'; // 数据源名称 107 var dataSourceName = '铁岭矢量面'; // 数据源名称
108 var dataSetName = 'New_Region3D_1'; // 数据集名称 108 var dataSetName = 'New_Region3D_1'; // 数据集名称
109 var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.rjson?returnContent=true'; 109 var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.rjson?returnContent=true';
110 var infoboxContainer = document.getElementById("bubble");
111 var table = document.getElementById("tab");
110 112
113 // 鼠标左键的触发事件，查询要素并弹出显示
114 var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
115 handler.setInputAction(function(e) {
116 smviewer.entities.removeById('identify-area');
117 var position = scene.pickPosition(e.position);
118 // 设置场景位置
119 scenePosition = position;
120 var cartographic = Cesium.Cartographic.fromCartesian(position);
121 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
122 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
123 var queryPoint = { // 查询点对象
124 x: longitude,
125 y: latitude
126 };
127 // console.log(queryPoint);
128 queryByPoint(queryPoint);
129 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
130
131 $("#close").click(function(){ // 关闭气泡
132 $("#bubble").hide();
133 });
134 // 每一帧都去计算气泡的正确位置
135 scene.postRender.addEventListener(function(){
136 if (scenePosition) {
137 var canvasHeight = scene.canvas.height;
138 var windowPosition = new Cesium.Cartesian2();
139 Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
140 infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + 45) + 'px';
141 infoboxContainer.style.left = (windowPosition.x - 70) + 'px';
142 infoboxContainer.style.visibility = "visible";
143 }
144 });
145
111 // 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。 146 // 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。
112 function queryByPoint(queryPoint) { 147 function queryByPoint(queryPoint) {
113 var queryObj = { 148 var queryObj = {
...@@ -130,7 +165,20 @@ export default { ...@@ -130,7 +165,20 @@ export default {
130 success: function(result) { 165 success: function(result) {
131 var resultObj = JSON.parse(result); 166 var resultObj = JSON.parse(result);
132 if (resultObj.featureCount > 0) { 167 if (resultObj.featureCount > 0) {
133 addClapFeature(resultObj.features[0]); 168 var selectedFeature = resultObj.features[0];
169 addClapFeature(selectedFeature);
170 console.log(selectedFeature);
171 $("#bubble").show();
172 for (var i=table.rows.length-1; i>-1; i--){
173 table.deleteRow(i);
174 }
175 for(var index in selectedFeature.fieldNames){
176 var newRow = table.insertRow();
177 var cell1 = newRow.insertCell();
178 var cell2 = newRow.insertCell();
179 cell1.innerHTML = selectedFeature.fieldNames[index];
180 cell2.innerHTML = selectedFeature.fieldValues[index];
181 }
134 } 182 }
135 }, 183 },
136 error: function(msg) { 184 error: function(msg) {
...@@ -173,4 +221,8 @@ export default { ...@@ -173,4 +221,8 @@ export default {
173 .navigation-controls { 221 .navigation-controls {
174 top: 180px; 222 top: 180px;
175 } 223 }
224 .bubble {
225 padding: 10px;
226 border-radius: 10px;
227 }
176 </style> 228 </style>
......
...@@ -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-05 13:17:59 5 * @LastEditTime: 2019-12-05 21:29:53
6 * @FilePath: \superglobevue\src\views\Home.vue 6 * @FilePath: \superglobevue\src\views\Home.vue
7 --> 7 -->
8 <template> 8 <template>
......