Skip to content

蒋波涛 / super_globe_vue

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

'20191207'

1 parent a707c407
Inline Side-by-side
Showing 8 changed files with 210 additions and 20 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:52:28 5 * @LastEditTime: 2019-12-07 23:36:27
6 * @FilePath: \superglobevue\README.md 6 * @FilePath: \superglobevue\README.md
7 --> 7 -->
8 # superglobevue 8 # superglobevue
...@@ -30,6 +30,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。 ...@@ -30,6 +30,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
30 - viewer_3dmodel.vue 展示矢量数据白模 30 - viewer_3dmodel.vue 展示矢量数据白模
31 - viewer_underground.vue 地底开挖效果，实际上是改变某个SCP图层的局部透明度 31 - viewer_underground.vue 地底开挖效果，实际上是改变某个SCP图层的局部透明度
32 - viewer_split.vue 地图分屏 32 - viewer_split.vue 地图分屏
33 - viewer_spatialquery.vue 空间过滤查询
33 34
34 ## 2、设置 35 ## 2、设置
35 ### 项目依赖库安装 36 ### 项目依赖库安装
......
...@@ -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-04 00:26:36 5 * @LastEditTime: 2019-12-07 17:35:42
6 * @FilePath: \superglobevue\public\index.html 6 * @FilePath: \superglobevue\public\index.html
7 --> 7 -->
8 <!DOCTYPE html> 8 <!DOCTYPE html>
...@@ -19,8 +19,9 @@ ...@@ -19,8 +19,9 @@
19 <script type="text/javascript" src="./js/jquery.min.js" data-main="js/main"></script> 19 <script type="text/javascript" src="./js/jquery.min.js" data-main="js/main"></script>
20 <link href="./css/bootstrap.min.css" rel="stylesheet"> 20 <link href="./css/bootstrap.min.css" rel="stylesheet">
21 <script src="./js/bootstrap.min.js"></script> 21 <script src="./js/bootstrap.min.js"></script>
22 <script src="./js/spectrum.js"></script> 22 <script src="./js/spectrum.js"></script>
23 <link href="./css/pretty.css" rel="stylesheet"> 23 <link href="./css/pretty.css" rel="stylesheet">
24 <script type="text/javascript" src="./js/supermap/SuperMap.Include.js"></script>
24 <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script> 25 <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
25 <title>超图三维地图Demo</title> 26 <title>超图三维地图Demo</title>
26 <style type="text/css"> 27 <style type="text/css">
......
1 var CesiumToSuperMap = {
2 convertPoint : function(Cesium,SuperMap,point){
3 if(!Cesium || !SuperMap || !point){
4 return undefined;
5 }
6 var lonlatPoint = Cesium.Cartographic.fromCartesian(point);
7 var x = Cesium.Math.toDegrees(lonlatPoint.longitude);
8 var y = Cesium.Math.toDegrees(lonlatPoint.latitude);
9 if(x && y){
10 return new SuperMap.Geometry.Point(x,y);
11 }
12 return undefined;
13 },
14 convertPolyline : function(Cesium,SuperMap,polyline){
15 if(!Cesium || !SuperMap || !polyline){
16 throw undefined;
17 }
18 var points = polyline.positions;
19 if(points && points instanceof Array && points.length >= 2){
20 var arr = [];
21 for(var i = 0,j = points.length;i < j;i++){
22 var point = this.convertPoint(Cesium,SuperMap,points[i]);
23 if(point){
24 arr.push(point);
25 }
26 }
27 return new SuperMap.Geometry.LineString(arr);
28 }
29 return undefined;
30 },
31 convertPolygon : function(Cesium, SuperMap, polygon){
32 if(!Cesium || !SuperMap || !polygon){
33 throw undefined;
34 }
35 var points = polygon.positions;
36 if(points && points instanceof Array && points.length >= 3){
37 var arr = [];
38 for(var i = 0,j = points.length;i < j;i++){
39 var point = this.convertPoint(Cesium,SuperMap,points[i]);
40 if(point){
41 arr.push(point);
42 }
43 }
44 var linearRing = new SuperMap.Geometry.LinearRing(arr);
45 return new SuperMap.Geometry.Polygon(linearRing);
46 }
47 return undefined;
48 }
49 };
50
51 var SuperMapToCesium = {
52 geometryToEntity : function(Cesium,SuperMap,geometry){
53 var className = geometry.CLASS_NAME;
54 if(className == 'SuperMap.Geometry.MultiPolygon'){
55 return this.multipolygonToEntities(Cesium,SuperMap,geometry);
56 }
57 else if(className == 'SuperMap.Geometry.Polygon'){
58 return [this.polygonToEntity(Cesium,SuperMap,geometry)];
59 }
60 return undefined;
61 },
62 polygonToEntity : function(Cesium,SuperMap,geometry){
63 var hierarchy = {};
64 for(var i = 0,j = geometry.components.length;i < j;i++){
65 if(i == 0){
66 hierarchy.positions = this.GeometrytoDegreesArray(Cesium,SuperMap,geometry.components[i]);
67 }
68 else{
69 if(!hierarchy.holes){
70 hierarchy.holes = [];
71 }
72 hierarchy.holes.push({
73 positions : this.GeometrytoDegreesArray(Cesium,SuperMap,geometry.components[i])
74 });
75 }
76 }
77 return new Cesium.Entity({
78 polygon : {
79 hierarchy : hierarchy,
80 material : Cesium.Color.BLUE.withAlpha(0.5)
81 },
82 depthTestEnabled : false
83 });
84
85 },
86 multipolygonToEntities : function(Cesium,SuperMap,geometry){
87 var components = geometry.components;
88 var resultEntities = [];
89 var entity;
90 for(var item in components){
91 entity = this.polygonToEntity(Cesium,SuperMap,components[item]);
92 resultEntities.push(entity);
93 }
94 return resultEntities;
95 },
96 GeometrytoDegreesArray : function(Cesium,SuperMap,geometry){
97 var vertices = geometry.getVertices();
98 var degreesArr = [];
99 for(var o in vertices){
100 degreesArr.push(vertices[o].x,vertices[o].y);
101 }
102 return Cesium.Cartesian3.fromDegreesArray(degreesArr);
103 }
104 };
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * @Author: jiangbotao 3 * @Author: jiangbotao
4 * @Date: 2019-12-07 14:24:01 4 * @Date: 2019-12-07 14:24:01
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 14:28:38 6 * @LastEditTime: 2019-12-07 18:07:21
7 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue 7 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
8 --> 8 -->
9 <template> 9 <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-04 22:23:44 6 * @LastEditTime: 2019-12-07 23:25:28
7 * @FilePath: \superglobevue\src\components\viewer.vue 7 * @FilePath: \superglobevue\src\components\viewer.vue
8 --> 8 -->
9 <template> 9 <template>
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
40 <script> 40 <script>
41 import URL_CONFIG from "./../config/urlConfig.vue"; 41 import URL_CONFIG from "./../config/urlConfig.vue";
42 const Cesium = window.Cesium; 42 const Cesium = window.Cesium;
43 const SuperMap = window.SuperMap;
43 export default { 44 export default {
44 data: function() { 45 data: function() {
45 return { 46 return {
...@@ -61,6 +62,7 @@ export default { ...@@ -61,6 +62,7 @@ export default {
61 var widget = __this.viewer.cesiumWidget; 62 var widget = __this.viewer.cesiumWidget;
62 // 隐藏logo 63 // 隐藏logo
63 $(".cesium-widget-credits")[0].style.visibility = "hidden"; 64 $(".cesium-widget-credits")[0].style.visibility = "hidden";
65 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
64 // 隐藏导航工具 66 // 隐藏导航工具
65 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; 67 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
66 68
...@@ -89,10 +91,21 @@ export default { ...@@ -89,10 +91,21 @@ export default {
89 }); 91 });
90 var positions = null; 92 var positions = null;
91 // 绘制面 93 // 绘制面
92 var handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon, 0); 94 var handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon, 0);
93 handlerPolygon.drawEvt.addEventListener(function(polygon){ 95 handlerPolygon.drawEvt.addEventListener(function(polygon){
94 console.log(polygon.object.positions); 96 var points = polygon.object.positions;
95 return polygon.object.positions; 97 var arr = [];
98 if(points && points instanceof Array && points.length >= 3){
99 for(var i = 0, j = points.length; i < j; i++){
100 var point = __this.convertPoint(points[i]);
101 if(point){
102 arr.push(point);
103 }
104 }
105 }
106 var linearRing = new SuperMap.Geometry.LinearRing(arr);
107 var searchPolygon = new SuperMap.Geometry.Polygon(linearRing);
108 query(searchPolygon);
96 }); 109 });
97 $("#search").on("click", function(){ 110 $("#search").on("click", function(){
98 handlerPolygon.activeEvt.addEventListener(function(isActive){ 111 handlerPolygon.activeEvt.addEventListener(function(isActive){
...@@ -108,6 +121,63 @@ export default { ...@@ -108,6 +121,63 @@ export default {
108 handlerPolygon && handlerPolygon.deactivate(); 121 handlerPolygon && handlerPolygon.deactivate();
109 handlerPolygon && handlerPolygon.activate(); 122 handlerPolygon && handlerPolygon.activate();
110 }); 123 });
124 var IDs=[];
125 function processCompleted(queryEventArgs){
126 var selectedFeatures = queryEventArgs.originResult.features;
127 var color;
128 IDs=[];
129 __this.viewer.entities.removeAll();
130 for(var i = 0; i < selectedFeatures.length; i++){
131 var value = selectedFeatures[i].fieldValues["0"];
132 var feature = selectedFeatures[i];
133 for(var j = 0; j < feature.fieldNames.length; j++){
134 var index = j.toString();
135 if(j === 0){
136 var des = '<table class="cesium-infoBox-defaultTable"><tbody>' + '<tr><th>' + selectedFeatures[i].fieldNames["0"] + '</th><td>' + selectedFeatures[i].fieldValues["0"] + '</td></tr>';
137 }else if(j === feature.fieldNames.length - 1){
138 des += '<tr><th>' + selectedFeatures[i].fieldNames[index] + '</th><td>' + selectedFeatures[i].fieldValues[index] + '</td></tr>' + "</tbody></table>";
139 }else{
140 des += '<tr><th>' + selectedFeatures[i].fieldNames[index] + '</th><td>' + selectedFeatures[i].fieldValues[index] + '</td></tr>';
141 }
142 }
143 __this.viewer.entities.add({
144 position : Cesium.Cartesian3.fromDegrees(parseFloat(selectedFeatures[i].fieldValues["12"]), parseFloat(selectedFeatures[i].fieldValues["13"]), parseFloat(selectedFeatures[i].fieldValues["16"])),
145 billboard :{
146 image : './images/location4.png',
147 width:30,
148 height:40,
149 },
150 name : selectedFeatures[i].fieldValues["11"],
151 description: des
152 });
153 IDs.push(parseInt(value)+11);
154 }
155 var buildingLayer = scene.layers.find("Building@CBD");
156 if(IDs.length>0){
157 // buildingLayer.setSelection(IDs);
158 }
159 }
160 function query(drawGeometryArgs){
161 var getFeaturesByGeometryParameters, getFeaturesByGeometryService;
162 getFeaturesByGeometryParameters = new SuperMap.REST.GetFeaturesByGeometryParameters({
163 datasetNames: ["二维数据:building"],
164 toIndex:-1,
165 spatialQueryMode:SuperMap.REST.SpatialQueryMode.CONTAIN,
166 geometry: drawGeometryArgs
167 });
168 console.log('aa');
169 var url = 'http://www.supermapol.com/realspace/services/data-cbd/rest/data';
170 getFeaturesByGeometryService = new SuperMap.REST.GetFeaturesByGeometryService(url, {
171 eventListeners: {
172 "processCompleted": processCompleted,
173 "processFailed": processFailed
174 }
175 });
176 getFeaturesByGeometryService.processAsync(getFeaturesByGeometryParameters);
177 }
178 function processFailed(e) {
179 alert(e.error.errorMsg);
180 }
111 }, function() { 181 }, function() {
112 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？'; 182 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
113 widget.showErrorPanel(title, undefined, e); 183 widget.showErrorPanel(title, undefined, e);
...@@ -120,6 +190,17 @@ export default { ...@@ -120,6 +190,17 @@ export default {
120 } 190 }
121 191
122 $("#loadingbar").remove(); 192 $("#loadingbar").remove();
193 },
194 methods:{
195 convertPoint : function(point){
196 var lonlatPoint = Cesium.Cartographic.fromCartesian(point);
197 var x = Cesium.Math.toDegrees(lonlatPoint.longitude);
198 var y = Cesium.Math.toDegrees(lonlatPoint.latitude);
199 if(x && y){
200 return new SuperMap.Geometry.Point(x, y);
201 }
202 return undefined;
203 }
123 } 204 }
124 }; 205 };
125 </script> 206 </script>
...@@ -140,4 +221,9 @@ export default { ...@@ -140,4 +221,9 @@ export default {
140 .drawCur{ 221 .drawCur{
141 cursor: url(/images/cur/draw.cur), auto; 222 cursor: url(/images/cur/draw.cur), auto;
142 } 223 }
224 .cesium-infoBox{
225 top: 20;
226 left: 0;
227 transition: opacity 0.2s;
228 }
143 </style> 229 </style>
......
...@@ -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-04 22:23:44 6 * @LastEditTime: 2019-12-07 23:37:13
7 * @FilePath: \superglobevue\src\components\viewer.vue 7 * @FilePath: \superglobevue\src\components\viewer.vue
8 --> 8 -->
9 <template> 9 <template>
...@@ -81,17 +81,13 @@ export default { ...@@ -81,17 +81,13 @@ 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 });
87 var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, { 84 var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
88 name: 'build' 85 name: 'build'
89 }); 86 });
90 // 添加倾斜摄影模型图层 87 // 添加倾斜摄影模型图层
91 Cesium.when([groundPromise, ground2Promise, buildPromise], function(layers) { 88 Cesium.when([groundPromise, buildPromise], function(layers) {
92 var build = scene.layers.find("build"); 89 var build = scene.layers.find("build");
93 var ground = scene.layers.find("ground"); 90 var ground = scene.layers.find("ground");
94 var ground2 = scene.layers.find("ground2");
95 // 图层加载完成,设置相机位置 91 // 图层加载完成,设置相机位置
96 scene.camera.setView({ 92 scene.camera.setView({
97 destination: Cesium.Cartesian3.fromDegrees(116.4563, 39.8969, 553), 93 destination: Cesium.Cartesian3.fromDegrees(116.4563, 39.8969, 553),
...@@ -121,9 +117,11 @@ export default { ...@@ -121,9 +117,11 @@ export default {
121 $('#pannel').show(); 117 $('#pannel').show();
122 $('#b_one,#b_two,#g_one,#g_two').show(); 118 $('#b_one,#b_two,#g_one,#g_two').show();
123 $('#b_three,#g_three,#b_four,#g_four').hide(); 119 $('#b_three,#g_three,#b_four,#g_four').hide();
124 // ground2.setVisibleInViewport(1, false);
125 scene.multiViewportMode = Cesium.MultiViewportMode["HORIZONTAL"]; 120 scene.multiViewportMode = Cesium.MultiViewportMode["HORIZONTAL"];
126 }); 121
122 ground.setViewportVisible(1, false);
123 ground.setViewportVisible(0, true);
124 });
127 }, function() { 125 }, function() {
128 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？'; 126 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
129 widget.showErrorPanel(title, undefined, e); 127 widget.showErrorPanel(title, undefined, e);
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * @Author: jiangbotao 3 * @Author: jiangbotao
4 * @Date: 2019-12-07 14:24:01 4 * @Date: 2019-12-07 14:24:01
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 14:58:44 6 * @LastEditTime: 2019-12-07 18:19:06
7 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue 7 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
8 --> 8 -->
9 <template> 9 <template>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * @Author: jiangbotao 3 * @Author: jiangbotao
4 * @Date: 2019-12-03 22:31:08 4 * @Date: 2019-12-03 22:31:08
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 14:49:20 6 * @LastEditTime: 2019-12-07 17:18:34
7 * @FilePath: \superglobevue\src\views\Home.vue 7 * @FilePath: \superglobevue\src\views\Home.vue
8 --> 8 -->
9 <template> 9 <template>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 </template> 11 </template>
12 12
13 <script> 13 <script>
14 import viewer from "@/components/viewer_spatialquery.vue"; 14 import viewer from "@/components/viewer_split.vue";
15 15
16 export default { 16 export default {
17 name: "home", 17 name: "home",
......