Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
8f2cd684 by chiangbt
Options

20191205

1 parent 736da9bf
Inline Side-by-side
Showing 5 changed files with 218 additions and 50 deletions
...@@ -22,7 +22,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。 ...@@ -22,7 +22,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
22 ## 2、设置 22 ## 2、设置
23 ### 项目依赖库安装 23 ### 项目依赖库安装
24 ``` 24 ```
25 npm install 25 npm install --registry https://registry.npm.taobao.org
26 ``` 26 ```
27 27
28 ### 代码编译及热启动 28 ### 代码编译及热启动
......
...@@ -45,7 +45,6 @@ ...@@ -45,7 +45,6 @@
45 45
46 <script> 46 <script>
47 import URL_CONFIG from "./../config/urlConfig.vue"; 47 import URL_CONFIG from "./../config/urlConfig.vue";
48 // import CesiumNavigation from "cesium-navigation-es6";
49 const Cesium = window.Cesium; 48 const Cesium = window.Cesium;
50 export default { 49 export default {
51 data: function() { 50 data: function() {
......
...@@ -28,6 +28,14 @@ ...@@ -28,6 +28,14 @@
28 <div class="circle4"></div> 28 <div class="circle4"></div>
29 </div> 29 </div>
30 </div> 30 </div>
31 <!-- 气泡HTML -->
32 <div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;" >
33 <div id="tools" style="text-align : right; padding-bottom: 5px;">
34 <span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性</span>
35 <span class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px"></span>
36 </div>
37 <div style="overflow-y:scroll;height:150px" id="tableContainer"><table id="tab"></table></div>
38 </div>
31 </div> 39 </div>
32 </template> 40 </template>
33 41
...@@ -45,45 +53,57 @@ export default { ...@@ -45,45 +53,57 @@ export default {
45 left: "0px", 53 left: "0px",
46 backgroundColor: "#000000" 54 backgroundColor: "#000000"
47 }, 55 },
48 smviewer: {} 56 viewer: {}
49 }; 57 };
50 }, 58 },
51 mounted: function() { 59 mounted: function() {
52 this.viewer = new Cesium.Viewer("cesiumContainer", {}); 60 this.viewer = new Cesium.Viewer("cesiumContainer", {});
61 this.viewer.scene.globe.depthTestAgainstTerrain = true;
62 // 使用自定义的navigation
63 var options = {};
64 options.enableCompass= true;
65 options.enableZoomControls= true;
66 options.enableDistanceLegend= true;
67 options.enableCompassOuterRing= true;
68 this.viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
53 // 隐藏logo 69 // 隐藏logo
54 $(".cesium-widget-credits")[0].style.visibility = "hidden"; 70 $(".cesium-widget-credits")[0].style.visibility = "hidden";
55 // 隐藏导航工具 71 // 隐藏导航工具
56 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; 72 $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
57 73 // 添加天地图地图
58 // 添加OSM地图 74 this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
59 let osm = Cesium.createOpenStreetMapImageryProvider({ 75 mapStyle : Cesium.TiandituMapsStyle.IMG_C,
60 url: "https://tile-a.openstreetmap.fr/hot", 76 token: URL_CONFIG.TOKEN_TIANDITU
61 fileExtension:"png" 77 }));
62 }); 78 var imageryLayers = this.viewer.imageryLayers;
63 this.viewer.imageryLayers.addImageryProvider(osm); 79 //初始化天地图全球中文注记服务，并添加至影像图层
80 var labelImagery = new Cesium.TiandituImageryProvider({
81 mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
82 token: URL_CONFIG.TOKEN_TIANDITU
83 });
84 imageryLayers.addImageryProvider(labelImagery);
64 85
65 var scene = this.viewer.scene; 86 var scene = this.viewer.scene;
66 var widget = this.viewer.cesiumWidget; 87 var widget = this.viewer.cesiumWidget;
88 var camera = scene.camera;
89 var smviewer = this.viewer;
90 // 场景位置，用于popup定位
91 var scenePosition = null;
92
67 try { 93 try {
68 // 添加倾斜摄影模型图层 94 var promise2 = scene.addS3MTilesLayerByScp("http://localhost:8090/iserver/services/3D-wz_qidu_qx1/rest/realspace/datas/%E4%B8%83%E9%83%BD_%E5%80%BE%E6%96%9C/config",
69 var promise = scene.addS3MTilesLayerByScp('http://localhost:8090/iserver/services/3D-wz_qidu_qx1/rest/realspace/datas/%E4%B8%83%E9%83%BD_%E5%80%BE%E6%96%9C/config'); 95 { name: "oblique photography" });
70 Cesium.when(promise, function(layer) { 96 Cesium.when.all([promise2], function(obliqueLayers){ // 等倾斜摄影数据加载完了再去加载矢量面，否则矢量面找不到目标去贴对象
71 layer.setQueryParameter({ 97 camera.setView({ // 先定位，开始渲染定位区域的倾斜
72 url: 'http://localhost:8090/iserver/services/data-wz_qidu_qx1/rest/data', 98 destination : Cesium.Cartesian3.fromDegrees(120.7630995515332, 28.007422239411936, 130.0),
73 dataSourceName: 'qidu',
74 dataSetName: 'New_Region'
75 });
76 scene.camera.setView({
77 destination : Cesium.Cartesian3.fromDegrees(120.7630995515332, 28.006422239411936, 100.0),
78 orientation:{ 99 orientation:{
79 heading:160.4816371653797, 100 heading:160.4816371653797,
80 pitch:-0.515, 101 pitch:-0.515,
81 roll:0 102 roll:0
82 } 103 }
83 }); 104 });
84 }, function() { 105 // 去除加载动画
85 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？'; 106 $('#loadingbar').remove();
86 widget.showErrorPanel(title, undefined, e);
87 }); 107 });
88 } catch (e) { 108 } catch (e) {
89 if (widget._showRenderLoopErrors) { 109 if (widget._showRenderLoopErrors) {
...@@ -91,6 +111,128 @@ export default { ...@@ -91,6 +111,128 @@ export default {
91 widget.showErrorPanel(title, undefined, e); 111 widget.showErrorPanel(title, undefined, e);
92 } 112 }
93 } 113 }
114 var dataSourceName = 'qidu'; // 数据源名称
115 var dataSetName = 'New_Region'; // 数据集名称
116 var dataServiceUrl = 'http://localhost:8090/iserver/services/data-wz_qidu_qx1/rest/data/featureResults.rjson?returnContent=true';
117 var infoboxContainer = document.getElementById("bubble");
118 var table = document.getElementById("tab");
119
120 // 鼠标左键的触发事件，查询要素并弹出显示
121 var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
122 handler.setInputAction(function(e) {
123 smviewer.entities.removeById('identify-area');
124 var position = scene.pickPosition(e.position);
125 // 设置场景位置
126 scenePosition = position;
127 var cartographic = Cesium.Cartographic.fromCartesian(position);
128 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
129 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
130 var queryPoint = { // 查询点对象
131 x: longitude,
132 y: latitude
133 };
134 // console.log(queryPoint);
135 queryByPoint(queryPoint);
136 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
137
138 var ellipsoid = this.viewer.scene.globe.ellipsoid;
139 handler.setInputAction(function(e) {
140 var cartesian = smviewer.camera.pickEllipsoid(e.endPosition, ellipsoid);
141 if(cartesian){
142 //将笛卡尔三维坐标转为地图坐标（弧度）
143 var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
144 //将地图坐标（弧度）转为十进制的度数
145 var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
146 var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
147 var alti_String = (smviewer.camera.positionCartographic.height).toFixed(2);
148 $('.el-footer').text('经度 : ' + log_String +' | 纬度 : ' + lat_String + ' | 高度 : ' + alti_String);
149 }
150 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
151
152 $("#close").click(function(){ // 关闭气泡
153 $("#bubble").hide();
154 });
155 // 每一帧都去计算气泡的正确位置
156 scene.postRender.addEventListener(function(){
157 if (scenePosition) {
158 var canvasHeight = scene.canvas.height;
159 var windowPosition = new Cesium.Cartesian2();
160 Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
161 infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + 45) + 'px';
162 infoboxContainer.style.left = (windowPosition.x - 70) + 'px';
163 infoboxContainer.style.visibility = "visible";
164 }
165 });
166
167 // 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。
168 function queryByPoint(queryPoint) {
169 var queryObj = {
170 "getFeatureMode": "SPATIAL",
171 "spatialQueryMode": "INTERSECT",
172 "datasetNames": [dataSourceName + ":" + dataSetName],
173 "geometry": {
174 id: 0,
175 parts: [1],
176 points: [queryPoint],
177 type: "POINT"
178 }
179 };
180 $("#bubble").hide();
181 var queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数
182 $.ajax({
183 type: "post",
184 url: dataServiceUrl,
185 data: queryObjJSON,
186 success: function(result) {
187 var resultObj = JSON.parse(result);
188 if (resultObj.featureCount > 0) {
189 var selectedFeature = resultObj.features[0];
190 addClapFeature(selectedFeature);
191 // console.log(selectedFeature);
192 $("#bubble").show();
193 for (var i=table.rows.length-1; i>-1; i--){
194 table.deleteRow(i);
195 }
196 for(var index in selectedFeature.fieldNames){
197 var newRow = table.insertRow();
198 var cell1 = newRow.insertCell();
199 var cell2 = newRow.insertCell();
200 cell1.innerHTML = selectedFeature.fieldNames[index];
201 cell2.innerHTML = selectedFeature.fieldValues[index];
202 }
203 }else{
204 $("#bubble").hide();
205 }
206 },
207 error: function(msg) {
208 console.log(msg);
209 }
210 })
211 }
212
213 // 将数据服务查询到的要素添加到场景中高亮显示，表示选中效果。
214 function addClapFeature(feature) {
215 var lonLatArr = getLonLatArray(feature.geometry.points);
216 smviewer.entities.add({
217 id: 'identify-area',
218 name: '单体化标识面',
219 polygon: {
220 hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
221 material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
222 },
223 clampToS3M: true // 贴在S3M模型表面
224 });
225 }
226
227 function getLonLatArray(points){
228 // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
229 var point3D = [];
230 points.forEach(function(point) {
231 point3D.push(point.x);
232 point3D.push(point.y);
233 });
234 return point3D;
235 }
94 236
95 $("#loadingbar").remove(); 237 $("#loadingbar").remove();
96 } 238 }
...@@ -98,5 +240,18 @@ export default { ...@@ -98,5 +240,18 @@ export default {
98 </script> 240 </script>
99 241
100 <style> 242 <style>
101 243 .bubble {
244 padding: 5px;
245 border-radius: 5px;
246 }
247 #tab {
248 height: unset;
249 text-align: left;
250 }
251 .compass {
252 top: 60px;
253 }
254 .navigation-controls {
255 top: 170px;
256 }
102 </style> 257 </style>
......
1 @import '~view-design/src/styles/index.less';
2
3 // Here are the variables to cover, such as:
4 @primary-color: #8c0776;
...\ No newline at end of file ...\ No newline at end of file
...@@ -6,20 +6,31 @@ ...@@ -6,20 +6,31 @@
6 * @FilePath: \superglobevue\src\views\Home.vue 6 * @FilePath: \superglobevue\src\views\Home.vue
7 --> 7 -->
8 <template> 8 <template>
9 <div id="map"> 9 <el-container>
10 <el-header style="height: 50px;"><i class="el-icon-s-opportunity"></i>Header</el-header>
11 <el-main>
12 <viewer></viewer>
13 </el-main>
14 <el-footer style="height: 22px;">Footer</el-footer>
15 </el-container>
16 <!-- <div id="map">
17 <div id="header">&nbsp;&nbsp;三维地理信息系统</div>
10 <viewer></viewer> 18 <viewer></viewer>
11 </div> 19 <div id="footer">
20 经纬度信息
21 </div>
22 </div> -->
12 </template> 23 </template>
13 24
14 <script> 25 <script>
15 import viewer from "@/components/viewer_ymo.vue"; 26 import viewer from "@/components/viewer_s3m_wz.vue";
16 27
17 export default { 28 export default {
18 name: "home", 29 name: "home",
19 data() { 30 data() {
20 return { 31 return {
21 isCollapse: true 32 theme1: 'primary'
22 }; 33 };
23 }, 34 },
24 components: { 35 components: {
25 viewer 36 viewer
...@@ -29,28 +40,27 @@ export default { ...@@ -29,28 +40,27 @@ export default {
29 40
30 <style scoped> 41 <style scoped>
31 .el-header { 42 .el-header {
32 padding: 12px 20px; 43 height: 50px;
33 -webkit-box-sizing: border-box; 44 top: 0px;
34 box-sizing: border-box;
35 -ms-flex-negative: 0;
36 flex-shrink: 0;
37 position: absolute; 45 position: absolute;
38 z-index: 99;
39 background-color: white;
40 width: 100%; 46 width: 100%;
41 margin-top: -1px; 47 background-color: #2d8cf0;
42 border-bottom: red; 48 color: white;
43 border-bottom-style: solid; 49 text-align: left;
44 border-bottom-width: 2px; 50 padding: 10px 0px;
51 padding-left: 10px;
52 z-index: 99;
53 font-size: 20pt;
45 } 54 }
46 .el-aside { 55 .el-footer {
47 width: 200px; 56 height: 22px;
57 bottom: 0px;
48 position: absolute; 58 position: absolute;
49 height: 100%; 59 width: 100%;
50 z-index: 98; 60 background-color: rgba(19, 17, 17, 0.5);
51 margin-top: 39px; 61 color: white;
52 margin-left: -20px; 62 text-align: left;
53 background-color: white; 63 padding-top: 2px;
54 /* background-color: rgb(238, 241, 246); */ 64 padding-left: 10px;
55 } 65 }
56 </style> 66 </style>
......