Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
479c22f1 by unknown
Options

'20191205'

1 parent c2f5681b
Inline Side-by-side
Showing 6 changed files with 99 additions and 32 deletions
...@@ -20,30 +20,20 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。 ...@@ -20,30 +20,20 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
20 系统通过vue.config.js进行了eslint的配置。 20 系统通过vue.config.js进行了eslint的配置。
21 21
22 ## 2、设置 22 ## 2、设置
23 ## Project setup 23 ### 项目依赖库安装
24 ``` 24 ```
25 npm install 25 npm install
26 ``` 26 ```
27 27
28 ### Compiles and hot-reloads for development 28 ### 代码编译及热启动
29 ``` 29 ```
30 npm run serve 30 npm run serve
31 ``` 31 ```
32 32
33 ### Compiles and minifies for production 33 ### 代码编译及发布
34 ``` 34 ```
35 npm run build 35 npm run build
36 ``` 36 ```
37 37
38 ### Run your unit tests
39 ```
40 npm run test:unit
41 ```
42
43 ### Lints and fixes files
44 ```
45 npm run lint
46 ```
47
48 ### Customize configuration 38 ### Customize configuration
49 See [Configuration Reference](https://cli.vuejs.org/config/). 39 See [Configuration Reference](https://cli.vuejs.org/config/).
......
This diff could not be displayed because it is too large.
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
13 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 13 <meta name="viewport" content="width=device-width,initial-scale=1.0">
14 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 14 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
15 <link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet"> 15 <link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
16 <script type="text/javascript" src="./Build/Cesium/Cesium.js" data-main="js/main"></script> 16 <script type="text/javascript" src="./Build/Cesium/Cesium.js" data-main="js/main"></script>
17 <script type="text/javascript" src="./Build//Cesium/Widgets/CesiumNavigation/viewerCesiumNavigationMixin.js"></script>
17 <script type="text/javascript" src="./Build/Cesium/Workers/zlib.min.js" data-main="js/main"></script> 18 <script type="text/javascript" src="./Build/Cesium/Workers/zlib.min.js" data-main="js/main"></script>
18 <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>
19 <link href="./css/bootstrap.min.css" rel="stylesheet"> 20 <link href="./css/bootstrap.min.css" rel="stylesheet">
......
...@@ -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-04 22:25:49 5 * @LastEditTime: 2019-12-04 23:31:19
6 * @FilePath: \superglobevue\src\components\viewer.vue 6 * @FilePath: \superglobevue\src\components\viewer.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
33 33
34 <script> 34 <script>
35 import URL_CONFIG from "./../config/urlConfig.vue"; 35 import URL_CONFIG from "./../config/urlConfig.vue";
36 // import CesiumNavigation from "cesium-navigation-es6";
36 const Cesium = window.Cesium; 37 const Cesium = window.Cesium;
37 export default { 38 export default {
38 data: function() { 39 data: function() {
...@@ -40,7 +41,7 @@ export default { ...@@ -40,7 +41,7 @@ export default {
40 styleObject: { 41 styleObject: {
41 width: "100%", 42 width: "100%",
42 height: '100%', 43 height: '100%',
43 // position: "absolute", 44 position: "absolute",
44 top: "0px", 45 top: "0px",
45 bottom: "0px", 46 bottom: "0px",
46 left: "0px", 47 left: "0px",
...@@ -50,15 +51,38 @@ export default { ...@@ -50,15 +51,38 @@ export default {
50 }; 51 };
51 }, 52 },
52 mounted: function() { 53 mounted: function() {
53 this.viewer = new Cesium.Viewer("cesiumContainer", {}); 54 this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false });
55 var options = {};
56 options.enableCompass= true;
57 options.enableZoomControls= true;
58 options.enableDistanceLegend= true;
59 options.enableCompassOuterRing= true;
60 this.viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
54 // 隐藏logo 61 // 隐藏logo
55 $(".cesium-widget-credits")[0].style.visibility = "hidden"; 62 $(".cesium-widget-credits")[0].style.visibility = "hidden";
56 // 隐藏导航工具 63 // 隐藏导航工具
57 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; 64 $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
58 65
66 var smviewer = this.viewer;
59 var scene = this.viewer.scene; 67 var scene = this.viewer.scene;
60 var widget = this.viewer.cesiumWidget; 68 var widget = this.viewer.cesiumWidget;
61 var camera = scene.camera; 69 var camera = scene.camera;
70
71 var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
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
62 try { 86 try {
63 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",
64 { name: "oblique photography" }); 88 { name: "oblique photography" });
...@@ -71,17 +95,6 @@ export default { ...@@ -71,17 +95,6 @@ export default {
71 roll : 2.0174972803488345e-11 95 roll : 2.0174972803488345e-11
72 } 96 }
73 }); 97 });
74 // 加载矢量面数据
75 var promise1 = scene.addS3MTilesLayerByScp('http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/New_Region3D_1_%E9%93%81%E5%B2%AD%E7%9F%A2%E9%87%8F%E9%9D%A2/config', {
76 name:'vector area'
77 });
78 Cesium.when.all([promise1], function(vectorLayers){
79 var vectorLayer = scene.layers.find('vector area'); // 矢量图层
80 vectorLayer.style3D._fillForeColor.alpha = 0; // 矢量图层填充前景色透明
81 vectorLayer.selectedColor = new Cesium.Color(1.0, 0.0, 0.0, 0.5); // 选中时给一个可见颜色
82 vectorLayer.selectColorType = 1; // 选中颜色的显示类型为替换色
83 vectorLayer.selectEnabled = true; // 矢量图层可选
84 });
85 // 去除加载动画 98 // 去除加载动画
86 $('#loadingbar').remove(); 99 $('#loadingbar').remove();
87 }); 100 });
...@@ -91,10 +104,73 @@ export default { ...@@ -91,10 +104,73 @@ export default {
91 widget.showErrorPanel(title, undefined, e); 104 widget.showErrorPanel(title, undefined, e);
92 } 105 }
93 } 106 }
107 var dataSourceName = '铁岭矢量面'; // 数据源名称
108 var dataSetName = 'New_Region3D_1'; // 数据集名称
109 var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.rjson?returnContent=true';
110
111 // 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。
112 function queryByPoint(queryPoint) {
113 var queryObj = {
114 "getFeatureMode": "SPATIAL",
115 "spatialQueryMode": "INTERSECT",
116 "datasetNames": [dataSourceName + ":" + dataSetName],
117 "geometry": {
118 id: 0,
119 parts: [1],
120 points: [queryPoint],
121 type: "POINT"
122 }
123 };
124
125 var queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数
126 $.ajax({
127 type: "post",
128 url: dataServiceUrl,
129 data: queryObjJSON,
130 success: function(result) {
131 var resultObj = JSON.parse(result);
132 if (resultObj.featureCount > 0) {
133 addClapFeature(resultObj.features[0]);
134 }
135 },
136 error: function(msg) {
137 console.log(msg);
138 }
139 })
140 }
141
142 // 将数据服务查询到的要素添加到场景中高亮显示，表示选中效果。
143 function addClapFeature(feature) {
144 var lonLatArr = getLonLatArray(feature.geometry.points);
145 smviewer.entities.add({
146 id: 'identify-area',
147 name: '单体化标识面',
148 polygon: {
149 hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
150 material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
151 },
152 clampToS3M: true // 贴在S3M模型表面
153 });
154 }
155
156 // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
157 function getLonLatArray(points) {
158 var point3D = [];
159 points.forEach(function(point) {
160 point3D.push(point.x);
161 point3D.push(point.y);
162 });
163 return point3D;
164 }
94 } 165 }
95 }; 166 };
96 </script> 167 </script>
97 168
98 <style> 169 <style>
99 170 .compass {
171 top: 10px;
172 }
173 .navigation-controls {
174 top: 120px;
175 }
100 </style> 176 </style>
......
...@@ -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-04 19:56:13 7 * @LastEditTime: 2019-12-04 22:37:19
8 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 8 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
9 --> 9 -->
10 <template> 10 <template>
......
...@@ -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 22:35:32 5 * @LastEditTime: 2019-12-05 10:46:13
6 * @FilePath: \superglobevue\src\views\Home.vue 6 * @FilePath: \superglobevue\src\views\Home.vue
7 --> 7 -->
8 <template> 8 <template>
......