Skip to content

蒋波涛 / super_globe_vue

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

'20191204'

1 parent 475f17ba
Inline Side-by-side
Showing 13 changed files with 1064 additions and 52 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-04 00:17:53 5 * @LastEditTime: 2019-12-04 19:44:29
6 * @FilePath: \superglobevue\.eslintrc.js 6 * @FilePath: \superglobevue\.eslintrc.js
7 */ 7 */
8 module.exports = { 8 module.exports = {
...@@ -21,14 +21,21 @@ module.exports = { ...@@ -21,14 +21,21 @@ module.exports = {
21 rules: { 21 rules: {
22 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 22 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
23 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 23 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
24 "indent": [1, 4], 24 "indent": [0, 4], // 不理会tab缩进，默认缩进为4个空格
25 "camelcase": 0, 25 "camelcase": 0, // 不使用驼峰命名法
26 "eol-last": 0, // 最后一行不需要空格
27 "no-console": 0, // 允许console
28 "space-infix-ops": [0, {"int32Hint": false}], // 运算符周围不用空格
26 "no-tabs": 0, 29 "no-tabs": 0,
27 "semi": [2, "always"], 30 "semi": [0, "never"], //双引号
28 "space-infix-ops": 2, 31 "no-multiple-empty-lines": [0, { "max": 3 }], // 最多允许空三行
32 "no-trailing-spaces": [0, { "skipBlankLines": true , "ignoreComments": true}],
29 "space-before-function-paren": ["error", "never"], 33 "space-before-function-paren": ["error", "never"],
30 "no-unused-vars": [0, { "vars": "all", "args": "none" }], 34 "no-unused-vars": [0, { "vars": "all", "args": "none" }],
31 "key-spacing": [0, { "beforeColon": false, "afterColon": true }], 35 "key-spacing": [0, { "beforeColon": false, "afterColon": true }],
36 "keyword-spacing": [0, { "before": false, "after": true }],
37 "space-after-keywords": [0, "never"],
38 "space-before-blocks": [0, { "functions": "never", "keywords": "never", "classes": "never" }],
32 "spaced-comment": [0, "never"], 39 "spaced-comment": [0, "never"],
33 "comma-dangle": [0, "always"], 40 "comma-dangle": [0, "always"],
34 "quotes": [0, "double"], //引号类型 `` "" '' 41 "quotes": [0, "double"], //引号类型 `` "" ''
......
...@@ -6336,14 +6336,12 @@ ...@@ -6336,14 +6336,12 @@
6336 "balanced-match": { 6336 "balanced-match": {
6337 "version": "1.0.0", 6337 "version": "1.0.0",
6338 "bundled": true, 6338 "bundled": true,
6339 "dev": true, 6339 "dev": true
6340 "optional": true
6341 }, 6340 },
6342 "brace-expansion": { 6341 "brace-expansion": {
6343 "version": "1.1.11", 6342 "version": "1.1.11",
6344 "bundled": true, 6343 "bundled": true,
6345 "dev": true, 6344 "dev": true,
6346 "optional": true,
6347 "requires": { 6345 "requires": {
6348 "balanced-match": "^1.0.0", 6346 "balanced-match": "^1.0.0",
6349 "concat-map": "0.0.1" 6347 "concat-map": "0.0.1"
...@@ -6358,20 +6356,17 @@ ...@@ -6358,20 +6356,17 @@
6358 "code-point-at": { 6356 "code-point-at": {
6359 "version": "1.1.0", 6357 "version": "1.1.0",
6360 "bundled": true, 6358 "bundled": true,
6361 "dev": true, 6359 "dev": true
6362 "optional": true
6363 }, 6360 },
6364 "concat-map": { 6361 "concat-map": {
6365 "version": "0.0.1", 6362 "version": "0.0.1",
6366 "bundled": true, 6363 "bundled": true,
6367 "dev": true, 6364 "dev": true
6368 "optional": true
6369 }, 6365 },
6370 "console-control-strings": { 6366 "console-control-strings": {
6371 "version": "1.1.0", 6367 "version": "1.1.0",
6372 "bundled": true, 6368 "bundled": true,
6373 "dev": true, 6369 "dev": true
6374 "optional": true
6375 }, 6370 },
6376 "core-util-is": { 6371 "core-util-is": {
6377 "version": "1.0.2", 6372 "version": "1.0.2",
...@@ -6488,8 +6483,7 @@ ...@@ -6488,8 +6483,7 @@
6488 "inherits": { 6483 "inherits": {
6489 "version": "2.0.3", 6484 "version": "2.0.3",
6490 "bundled": true, 6485 "bundled": true,
6491 "dev": true, 6486 "dev": true
6492 "optional": true
6493 }, 6487 },
6494 "ini": { 6488 "ini": {
6495 "version": "1.3.5", 6489 "version": "1.3.5",
...@@ -6501,7 +6495,6 @@ ...@@ -6501,7 +6495,6 @@
6501 "version": "1.0.0", 6495 "version": "1.0.0",
6502 "bundled": true, 6496 "bundled": true,
6503 "dev": true, 6497 "dev": true,
6504 "optional": true,
6505 "requires": { 6498 "requires": {
6506 "number-is-nan": "^1.0.0" 6499 "number-is-nan": "^1.0.0"
6507 } 6500 }
...@@ -6516,7 +6509,6 @@ ...@@ -6516,7 +6509,6 @@
6516 "version": "3.0.4", 6509 "version": "3.0.4",
6517 "bundled": true, 6510 "bundled": true,
6518 "dev": true, 6511 "dev": true,
6519 "optional": true,
6520 "requires": { 6512 "requires": {
6521 "brace-expansion": "^1.1.7" 6513 "brace-expansion": "^1.1.7"
6522 } 6514 }
...@@ -6628,8 +6620,7 @@ ...@@ -6628,8 +6620,7 @@
6628 "number-is-nan": { 6620 "number-is-nan": {
6629 "version": "1.0.1", 6621 "version": "1.0.1",
6630 "bundled": true, 6622 "bundled": true,
6631 "dev": true, 6623 "dev": true
6632 "optional": true
6633 }, 6624 },
6634 "object-assign": { 6625 "object-assign": {
6635 "version": "4.1.1", 6626 "version": "4.1.1",
...@@ -6641,7 +6632,6 @@ ...@@ -6641,7 +6632,6 @@
6641 "version": "1.4.0", 6632 "version": "1.4.0",
6642 "bundled": true, 6633 "bundled": true,
6643 "dev": true, 6634 "dev": true,
6644 "optional": true,
6645 "requires": { 6635 "requires": {
6646 "wrappy": "1" 6636 "wrappy": "1"
6647 } 6637 }
...@@ -6763,7 +6753,6 @@ ...@@ -6763,7 +6753,6 @@
6763 "version": "1.0.2", 6753 "version": "1.0.2",
6764 "bundled": true, 6754 "bundled": true,
6765 "dev": true, 6755 "dev": true,
6766 "optional": true,
6767 "requires": { 6756 "requires": {
6768 "code-point-at": "^1.0.0", 6757 "code-point-at": "^1.0.0",
6769 "is-fullwidth-code-point": "^1.0.0", 6758 "is-fullwidth-code-point": "^1.0.0",
......
...@@ -19,17 +19,4 @@ ...@@ -19,17 +19,4 @@
19 text-align: center; 19 text-align: center;
20 color: #2c3e50; 20 color: #2c3e50;
21 } 21 }
22
23 #nav {
24 padding: 30px;
25
26 a {
27 font-weight: bold;
28 color: #2c3e50;
29
30 &.router-link-exact-active {
31 color: #42b983;
32 }
33 }
34 }
35 </style> 22 </style>
......
1 <!--
2 * @Author: jiangbotao
3 * 限制在一定高度上的视角变化
4 * 当到一定尺度后开始可以改变视角
5 * @Date: 2019-12-03 21:30:29
6 * @LastEditors: jiangbotao
7 * @LastEditTime: 2019-12-04 20:25:49
8 * @FilePath: \WebGL_Webpack_Vue\components\viewer6.vue
9 -->
10 <template>
11 <div>
12 <div id="cesiumContainer" v-bind:style="styleObject"></div>
13 <div id='loadingbar' class="spinner">
14 <div class="spinner-container container1">
15 <div class="circle1"></div>
16 <div class="circle2"></div>
17 <div class="circle3"></div>
18 <div class="circle4"></div>
19 </div>
20 <div class="spinner-container container2">
21 <div class="circle1"></div>
22 <div class="circle2"></div>
23 <div class="circle3"></div>
24 <div class="circle4"></div>
25 </div>
26 <div class="spinner-container container3">
27 <div class="circle1"></div>
28 <div class="circle2"></div>
29 <div class="circle3"></div>
30 <div class="circle4"></div>
31 </div>
32 </div>
33 <div id="toolbar" style="position: absolute;left: 5px;top: 5px;display: none;">
34 <select id="imageryOptions" class="selectpicker show-tick form-control">
35 <!--<option disabled selected value>&#45;&#45;选择服务类型&#45;&#45;</option>-->
36 <option selected value="WGS">自定义影像&地形-平面场景</option>
37 <option value="MEC">倾斜数据-三维场景</option>
38 </select>
39 </div>
40 </div>
41 </template>
42
43 <script>
44 import URL_CONFIG from './../config/urlConfig.vue';
45 const Cesium=window.Cesium;
46 export default {
47 data: function() {
48 return {
49 styleObject:{
50 width: '100%',
51 position: 'absolute',
52 top: '0px',
53 bottom: '0px',
54 left: '0px',
55 backgroundColor: '#000000'
56 },
57 smviewer:{}
58 }
59 },
60 mounted: function(){
61 this.smviewer=new Cesium.Viewer('cesiumContainer', {
62 animation: true
63 });
64 var scenecamera=null;
65 this.smviewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
66 url : 'https://dev.virtualearth.net',
67 mapStyle : Cesium.BingMapsStyle.AERIAL,
68 key : 'AhLx52IuZUuca_C3zK2TzBG2eu1vihUkayqc_e4MISbXZyn5Zw_X--odRqrweVap'
69 }));
70 this.smviewer.scene.screenSpaceCameraController.maximumZoomDistance=100000;
71 this.smviewer.scene.screenSpaceCameraController.enableTilt=false;
72 var scene = this.smviewer.scene;
73 scene.camera.setView({
74 destination : new Cesium.Cartesian3(-1312359.8872867103, 5363468.852567853, 3218043.8251359267),
75 orientation : {
76 heading : 0.003361064609361364,
77 pitch : -1.5310712877149566,
78 roll : 0
79 }
80 });
81 var stviewer = this.smviewer;
82 scene.postRender.addEventListener(function(){
83 scenecamera=scene.camera;
84 var position = scene.camera.position;
85 var cartographic = Cesium.Cartographic.fromCartesian(position);
86
87 var height = cartographic.height;
88 if(height<10000){
89 stviewer.scene.screenSpaceCameraController.enableTilt=true;
90 }else{
91 stviewer.scene.screenSpaceCameraController.enableTilt=false;
92 scene.camera.setView({
93 destination: Cesium.Cartesian3(scenecamera.position.x, scenecamera.position.y, scenecamera.position.z),
94 orientation: {
95 heading: scenecamera.heading,
96 pitch: -1.5310712877149566,
97 roll: 0.000000
98 }
99 });
100 }
101 })
102 //添加下拉菜单，点击选项切换地图服务
103 $('#imageryOptions').change(function() {
104 console.log(scene.camera)
105 });
106 $('#toolbar').show();
107 $('#loadingbar').remove();
108 }
109 }
110 </script>
111
112 <style>
113
114 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * 多个影像图层的动态播放
3 * @Author: jiangbotao
4 * @Date: 2019-12-02 09:51:40
5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-04 16:36:03
7 * @FilePath: \WebGL_Webpack_Vue\components\viewer2.vue
8 -->
9 <template>
10 <div>
11 <div id="cesiumContainer" v-bind:style="styleObject"></div>
12 <div id="loadingbar" class="spinner">
13 <div class="spinner-container container1">
14 <div class="circle1"></div>
15 <div class="circle2"></div>
16 <div class="circle3"></div>
17 <div class="circle4"></div>
18 </div>
19 <div class="spinner-container container2">
20 <div class="circle1"></div>
21 <div class="circle2"></div>
22 <div class="circle3"></div>
23 <div class="circle4"></div>
24 </div>
25 <div class="spinner-container container3">
26 <div class="circle1"></div>
27 <div class="circle2"></div>
28 <div class="circle3"></div>
29 <div class="circle4"></div>
30 </div>
31 </div>
32 <div id="toolbar" style="position : absolute;left : 2%; top : 2%;display : none;" >
33 <div id="progressBar" class="jquery-ui-like"><div></div></div>
34 </div>
35 </div>
36 </template>
37
38 <script>
39 import URL_CONFIG from "./../config/urlConfig.vue";
40 const Cesium = window.Cesium;
41 export default {
42 data: function() {
43 return {
44 styleObject:{
45 width: "100%",
46 position: "absolute",
47 top: "0px",
48 bottom: "0px",
49 left: "0px",
50 backgroundColor: "#000000"
51 },
52 smviewer:{}
53 };
54 },
55 mounted: function() {
56 this.smviewer = new Cesium.Viewer("cesiumContainer", {
57 animation: true
58 });
59 this.smviewer.imageryLayers.addImageryProvider(Cesium.createOpenStreetMapImageryProvider({
60 url : "https://a.tile.openstreetmap.org/"
61 }));
62 var num = 10;
63 $(".cesium-viewer-animationContainer").hide();
64 // 隐藏logo
65 $(".cesium-widget-credits")[0].style.visibility = "hidden";
66 // 隐藏导航工具
67 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
68
69 var imageryLayers = this.smviewer.imageryLayers;
70 //依次利用图片服务url创建SuperMapImageryProvider实例
71 var imageryProvider0 = new Cesium.SuperMapImageryProvider({
72 url : URL_CONFIG.TENSE_IMG0
73 });
74 var imageryProvider1 = new Cesium.SuperMapImageryProvider({
75 url : URL_CONFIG.TENSE_IMG1
76 });
77 var imageryProvider2 = new Cesium.SuperMapImageryProvider({
78 url : URL_CONFIG.TENSE_IMG2
79 });
80 var imageryProvider3 = new Cesium.SuperMapImageryProvider({
81 url : URL_CONFIG.TENSE_IMG3
82 });
83 var imageryProvider4 = new Cesium.SuperMapImageryProvider({
84 url : URL_CONFIG.TENSE_IMG4
85 });
86 var imageryProvider5 = new Cesium.SuperMapImageryProvider({
87 url : URL_CONFIG.TENSE_IMG5
88 });
89 var imageryProvider6 = new Cesium.SuperMapImageryProvider({
90 url : URL_CONFIG.TENSE_IMG6
91 });
92 var imageryProvider7 = new Cesium.SuperMapImageryProvider({
93 url : URL_CONFIG.TENSE_IMG7
94 });
95 var imageryProvider8 = new Cesium.SuperMapImageryProvider({
96 url : URL_CONFIG.TENSE_IMG8
97 });
98 var imageryProvider9 = new Cesium.SuperMapImageryProvider({
99 url : URL_CONFIG.TENSE_IMG9
100 });
101 var imageryProvider10 = new Cesium.SuperMapImageryProvider({
102 url : URL_CONFIG.TENSE_IMG10
103 });
104 //先将第1、第2个provider添加到图层集合中，并将第2个图层设为完全透明
105 var layer0 = imageryLayers.addImageryProvider(imageryProvider0);
106 var layer1 = imageryLayers.addImageryProvider(imageryProvider1);
107 layer1.alpha = 0;
108
109 var stviewer = this.smviewer;
110 this.smviewer.animation.viewModel.timeFormatter = function(date, viewModel) {
111 $(".cesium-viewer-bottom").css("left", "0");
112 //在layer0完全透明前，layer0透明度减少，layer1透明度增加
113 if(layer0.alpha >= 0) {
114 layer0.alpha -= 0.005;
115 layer1.alpha += 0.005;
116 }
117 if(layer0.alpha < 0) {
118 //当第一个图层完全透明,开始执行下一轮渐变
119 changeTimeFormatter(layer0, layer1, imageryProviders);
120 }
121 }
122
123
124 var n = 0;
125 //数组包含除了第1、第2的剩余provider的数组
126 var imageryProviders = [imageryProvider2, imageryProvider3, imageryProvider4, imageryProvider5, imageryProvider6, imageryProvider7, imageryProvider8, imageryProvider9, imageryProvider10];
127 function changeTimeFormatter(layer0, layer1, imageryProviders) {
128 console.log(n);
129 if(typeof imageryProviders[n] === "undefined") {
130 //数组中没有成员时,将此回调函数置为空
131 stviewer.animation.viewModel.timeFormatter = function(){};
132 return;
133 }
134 //移除掉已经不可见的图层
135 imageryLayers.remove(layer0);
136
137 //将layer0指向下一个图层,并将它先设置成完全透明
138 layer0 = imageryLayers.addImageryProvider(imageryProviders[n++]);
139 layer0.alpha = 0;
140 layer1.alpha = 1;
141
142 function progress(percent, $element) {
143 var progressBarWidth = percent * $element.width() / 100;
144 $element.find("div").animate({ width: progressBarWidth }, 10).html(percent + "% ");
145 }
146
147 //改变该回调函数，执行下一轮渐变
148 stviewer.animation.viewModel.timeFormatter = function(date, viewModel) {
149 if (layer1.alpha >= 0) {
150 layer1.alpha -= 0.005;
151 layer0.alpha += 0.005;
152 num += 0.05;
153 progress(num.toFixed(1), $("#progressBar"));
154 }
155 if (layer1.alpha < 0) {
156 //执行下一轮渐变
157 changeTimeFormatter(layer1, layer0, imageryProviders);
158 }
159 }
160 }
161 this.smviewer.flyTo(layer0);
162 $("#loadingbar").remove();
163 $("#toolbar").show();
164 }
165 }
166 </script>
167
168 <style>
169
170 </style>
1 <!--
2 * @Author: jiangbotao
3 * 添加倾斜摄影场景和倾斜摄影图层
4 * @Date: 2019-12-02 09:05:50
5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-04 20:20:18
7 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
8 -->
9 <template>
10 <div>
11 <div id="cesiumContainer" v-bind:style="styleObject"></div>
12 <div id="loadingbar" class="spinner">
13 <div class="spinner-container container1">
14 <div class="circle1"></div>
15 <div class="circle2"></div>
16 <div class="circle3"></div>
17 <div class="circle4"></div>
18 </div>
19 <div class="spinner-container container2">
20 <div class="circle1"></div>
21 <div class="circle2"></div>
22 <div class="circle3"></div>
23 <div class="circle4"></div>
24 </div>
25 <div class="spinner-container container3">
26 <div class="circle1"></div>
27 <div class="circle2"></div>
28 <div class="circle3"></div>
29 <div class="circle4"></div>
30 </div>
31 </div>
32 </div>
33 </template>
34
35 <script>
36 import URL_CONFIG from "./../config/urlConfig.vue";
37 const Cesium=window.Cesium;
38 export default {
39 data: function() {
40 return {
41 styleObject:{
42 width: "100%",
43 position: "absolute",
44 top: "0px",
45 bottom: "0px",
46 left: "0px",
47 backgroundColor: "#000000"
48 },
49 smviewer:{}
50 }
51 },
52 mounted: function(){
53 this.viewer = new Cesium.Viewer("cesiumContainer", {});
54 // 隐藏logo
55 $(".cesium-widget-credits")[0].style.visibility="hidden";
56 // 隐藏导航工具
57 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
58
59 this.viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
60 url : "https://dev.virtualearth.net",
61 mapStyle : Cesium.BingMapsStyle.AERIAL,
62 key : URL_CONFIG.BING_MAP_KEY
63 }));
64 var scene = this.viewer.scene;
65 var widget = this.viewer.cesiumWidget;
66 $("#loadingbar").remove();
67 try{
68 //依次向场景添加S3M图层服务
69 var promise1 = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_SRSB, {
70 name : "srsb"
71 });
72 var promise2 = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_SRSB_WATER, {
73 name : "srsb_water"
74 });
75 var promise = scene.open(URL_CONFIG.SCENE_SRSB);
76 Cesium.when(promise, function(){
77 //查找水面图层
78 var waterLayer =scene.layers.find("水面@vector");
79 var style = new Cesium.Style3D();
80 style.bottomAltitude = 5;
81 //设置水面图层的底部高程，确保水面与模型贴合
82 waterLayer.style3D = style;
83 //设置风格后需刷新
84 waterLayer.refresh();
85 //设置相机位置、视角，便于观察场景
86 var d1 = Cesium.Math.toDegrees(0.8344578907203247);
87 var d2 = Cesium.Math.toDegrees(0.22751343457105547);
88 scene.camera.setView({
89 destination : Cesium.Cartesian3.fromDegrees(13.0353, 47.8084, 100.0),
90 orientation:{
91 heading:0.7272,
92 pitch:-0.2672,
93 roll:0
94 }
95 })
96 }, function(){
97 var title = "加载SCP失败，请检查网络连接状态或者url地址是否正确？";
98 widget.showErrorPanel(title, undefined, e);
99 });
100 }catch(e){
101 if (widget._showRenderLoopErrors) {
102 var title = "渲染时发生错误，已停止渲染。";
103 widget.showErrorPanel(title, undefined, e);
104 }
105 }
106 }
107 }
108 </script>
109
110 <style>
111
112 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -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 00:21:45 5 * @LastEditTime: 2019-12-04 22:23:44
6 * @FilePath: \superglobevue\src\components\viewer.vue 6 * @FilePath: \superglobevue\src\components\viewer.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -55,23 +55,17 @@ export default { ...@@ -55,23 +55,17 @@ export default {
55 // 隐藏导航工具 55 // 隐藏导航工具
56 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; 56 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
57 57
58 this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ 58 // 添加OSM地图
59 mapStyle : Cesium.TiandituMapsStyle.IMG_C, 59 let osm = Cesium.createOpenStreetMapImageryProvider({
60 token: URL_CONFIG.TOKEN_TIANDITU 60 url: "https://tile-a.openstreetmap.fr/hot",
61 })); 61 fileExtension:"png"
62 var imageryLayers = this.viewer.imageryLayers;
63 //初始化天地图全球中文注记服务，并添加至影像图层
64 var labelImagery = new Cesium.TiandituImageryProvider({
65 mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
66 token: URL_CONFIG.TOKEN_TIANDITU
67 }); 62 });
68 imageryLayers.addImageryProvider(labelImagery); 63 this.viewer.imageryLayers.addImageryProvider(osm);
69 64
70 var scene = this.viewer.scene; 65 var scene = this.viewer.scene;
71 var widget = this.viewer.cesiumWidget; 66 var widget = this.viewer.cesiumWidget;
72 var sceneLayer;
73 var stviewer = this.viewer;
74 try { 67 try {
68 // 添加倾斜摄影模型图层
75 var promise = scene.open(URL_CONFIG.SCENE_SRSB); 69 var promise = scene.open(URL_CONFIG.SCENE_SRSB);
76 Cesium.when(promise, function(layers) { 70 Cesium.when(promise, function(layers) {
77 //查找水面图层 71 //查找水面图层
......
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:52:56
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-04 22:25:49
6 * @FilePath: \superglobevue\src\components\viewer.vue
7 -->
8 <template>
9 <div>
10 <div id="cesiumContainer" v-bind:style="styleObject"></div>
11 <div id='loadingbar' class="spinner">
12 <div class="spinner-container container1">
13 <div class="circle1"></div>
14 <div class="circle2"></div>
15 <div class="circle3"></div>
16 <div class="circle4"></div>
17 </div>
18 <div class="spinner-container container2">
19 <div class="circle1"></div>
20 <div class="circle2"></div>
21 <div class="circle3"></div>
22 <div class="circle4"></div>
23 </div>
24 <div class="spinner-container container3">
25 <div class="circle1"></div>
26 <div class="circle2"></div>
27 <div class="circle3"></div>
28 <div class="circle4"></div>
29 </div>
30 </div>
31 </div>
32 </template>
33
34 <script>
35 import URL_CONFIG from "./../config/urlConfig.vue";
36 const Cesium = window.Cesium;
37 export default {
38 data: function() {
39 return {
40 styleObject: {
41 width: "100%",
42 height: '100%',
43 // position: "absolute",
44 top: "0px",
45 bottom: "0px",
46 left: "0px",
47 backgroundColor: "#000000"
48 },
49 smviewer: {}
50 };
51 },
52 mounted: function() {
53 this.viewer = new Cesium.Viewer("cesiumContainer", {});
54 // 隐藏logo
55 $(".cesium-widget-credits")[0].style.visibility = "hidden";
56 // 隐藏导航工具
57 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
58
59 var scene = this.viewer.scene;
60 var widget = this.viewer.cesiumWidget;
61 var camera = scene.camera;
62 try {
63 var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config",
64 { name: "oblique photography" });
65 Cesium.when.all([promise2], function(obliqueLayers){ // 等倾斜摄影数据加载完了再去加载矢量面，否则矢量面找不到目标去贴对象
66 camera.setView({ // 先定位，开始渲染定位区域的倾斜
67 destination : new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093),
68 orientation : {
69 heading: 4.39611370540786,
70 pitch : -0.43458664812464143,
71 roll : 2.0174972803488345e-11
72 }
73 });
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 // 去除加载动画
86 $('#loadingbar').remove();
87 });
88 } catch (e) {
89 if (widget._showRenderLoopErrors) {
90 var title = '渲染时发生错误，已停止渲染。';
91 widget.showErrorPanel(title, undefined, e);
92 }
93 }
94 }
95 };
96 </script>
97
98 <style>
99
100 </style>
1 <!--
2 * @Author: jiangbotao
3 * 演示大场景被淹没
4 * @Date: 2019-12-02 09:05:50
5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-04 22:03:19
7 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
8 -->
9 <template>
10 <div>
11 <div id="cesiumContainer" v-bind:style="styleObject"></div>
12 <div id='loadingbar' class="spinner">
13 <div class="spinner-container container1">
14 <div class="circle1"></div>
15 <div class="circle2"></div>
16 <div class="circle3"></div>
17 <div class="circle4"></div>
18 </div>
19 <div class="spinner-container container2">
20 <div class="circle1"></div>
21 <div class="circle2"></div>
22 <div class="circle3"></div>
23 <div class="circle4"></div>
24 </div>
25 <div class="spinner-container container3">
26 <div class="circle1"></div>
27 <div class="circle2"></div>
28 <div class="circle3"></div>
29 <div class="circle4"></div>
30 </div>
31 </div>
32 <div id="toolbar" class="param-container tool-bar">
33 <div id="setingBar">
34 <div class="form-group">
35 <input id="maxHeight" value="71" required="required" class="form-control"/>
36 <label class="form-label">最大高度 (米) : </label>
37 </div>
38 <div class="form-group">
39 <input id="minHeight" value="60" required="required" class="form-control"/>
40 <label class="form-label">最小高度 (米) :</label>
41 </div>
42 <div class="form-group">
43 <input id="speed" value="5" required="required" class="form-control"/>
44 <label class="form-label">淹没速度(米/秒):</label>
45 </div>
46 </div>
47 <div style="margin-left: 40px;">
48 <button type="button" id="begin" class="button black">开始</button>
49 <button type="button" id="clear" class="button black">清除</button>
50 </div>
51 </div>
52 </div>
53 </template>
54
55 <script>
56 import URL_CONFIG from './../config/urlConfig.vue';
57 const Cesium = window.Cesium;
58 export default {
59 data: function() {
60 return {
61 styleObject:{
62 width: '100%',
63 height: '100%',
64 position: 'absolute',
65 top: '0px',
66 bottom: '0px',
67 left: '0px',
68 backgroundColor: '#000000'
69 },
70 smviewer:{}
71 }
72 },
73 mounted: function(){
74 this.viewer=new Cesium.Viewer('cesiumContainer', {});
75 // 隐藏logo
76 $(".cesium-widget-credits")[0].style.visibility="hidden";
77 // 隐藏导航工具
78 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
79
80 this.viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
81 url : 'https://dev.virtualearth.net',
82 mapStyle : Cesium.BingMapsStyle.AERIAL,
83 key : URL_CONFIG.BING_MAP_KEY
84 }));
85 var scene = this.viewer.scene;
86 var widget = this.viewer.cesiumWidget;
87 $(".form-group").show();
88 $(".element").show();
89 $('#loadingbar').remove();
90 try{
91 var promise = scene.open(URL_CONFIG.SCENE_SRSB);
92 Cesium.when(promise, function(layers){
93 // 设置相机视角，便于查看模型
94 scene.camera.setView({
95 destination : Cesium.Cartesian3.fromDegrees(13.0353, 47.8084, 100.0),
96 orientation:{
97 heading:0.7272,
98 pitch:-0.2672,
99 roll:0
100 }
101 });
102 }, function(){
103 var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
104 widget.showErrorPanel(title, undefined, e);
105 });
106 }catch(e){
107 if (widget._showRenderLoopErrors) {
108 var title = '渲染时发生错误，已停止渲染。';
109 widget.showErrorPanel(title, undefined, e);
110 }
111 }
112
113 var currentHeight = 0;
114 var maxValue = 0;
115 var minValue = 0;
116 var int = null;
117
118 document.getElementById("begin").onclick = function() {
119 currentHeight = 0;
120 int = self.setInterval("flood()", 100);
121 maxValue = parseInt(document.getElementById("maxHeight").value);
122 minValue = parseInt(document.getElementById("minHeight").value);
123 };
124
125 window.flood = function() {
126 if(currentHeight > maxValue) {
127 self.clearInterval(int);
128 return;
129 }
130
131 var layer = scene.layers.find("srsb");
132 var hyp = new Cesium.HypsometricSetting();
133
134 //创建分层设色对象 设置最大/最小可见高度 颜色表 显示模式 透明度及线宽
135 var colorTable = new Cesium.ColorTable();
136 colorTable.insert(100, new Cesium.Color(0, 39/255, 148/255));
137 colorTable.insert(0, new Cesium.Color(149/255, 232/255, 249/255));
138
139 hyp.MaxVisibleValue = currentHeight;
140 hyp.MinVisibleValue = minValue;
141 hyp.ColorTable = colorTable;
142 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
143 hyp.Opacity = 0.6;
144
145 hyp.LineInterval = 10.0;
146
147 //设置图层分层设色属性
148 layer.hypsometricSetting = {
149 hypsometricSetting : hyp,
150 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
151 };
152
153 currentHeight += (parseInt(document.getElementById("speed").value))/10;
154 };
155
156 document.getElementById("clear").onclick = function() {
157 self.clearInterval(int);
158 var layer = scene.layers.find("sci_park");
159 var hyp = new Cesium.HypsometricSetting();
160 hyp.MaxVisibleValue = 0;
161
162 layer.hypsometricSetting = {
163 hypsometricSetting : hyp,
164 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
165 }
166 };
167 }
168 }
169 </script>
170
171 <style>
172 .form-group::before {
173 content: attr(data-foo);
174 color: black;
175 }
176 #setingBar{
177 width:150px;
178 height:110px;
179 background: rgba(42, 42, 42, 0.4);
180 padding: 8px;
181 border-radius: 4px;
182 color:cornflowerblue
183 }
184 #toolbar{
185 width: 200px;
186 }
187 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Author: jiangbotao
3 * 1、展示天地图栅格瓦片数据
4 * 2、添加了超图发布的矢量瓦片服务
5 * @Date: 2019-12-02 09:05:50
6 * @LastEditors: jiangbotao
7 * @LastEditTime: 2019-12-04 19:56:13
8 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
9 -->
10 <template>
11 <div>
12 <div id="cesiumContainer" v-bind:style="styleObject"></div>
13 <div id='loadingbar' class="spinner">
14 <div class="spinner-container container1">
15 <div class="circle1"></div>
16 <div class="circle2"></div>
17 <div class="circle3"></div>
18 <div class="circle4"></div>
19 </div>
20 <div class="spinner-container container2">
21 <div class="circle1"></div>
22 <div class="circle2"></div>
23 <div class="circle3"></div>
24 <div class="circle4"></div>
25 </div>
26 <div class="spinner-container container3">
27 <div class="circle1"></div>
28 <div class="circle2"></div>
29 <div class="circle3"></div>
30 <div class="circle4"></div>
31 </div>
32 </div>
33 </div>
34 </template>
35
36 <script>
37 import URL_CONFIG from './../config/urlConfig.vue';
38 const Cesium=window.Cesium;
39 export default {
40 data: function(){
41 return {
42 styleObject:{
43 width: '100%',
44 position: 'absolute',
45 top: '0px',
46 bottom: '0px',
47 left: '0px',
48 backgroundColor: '#000000'
49 },
50 smviewer:{}
51 }
52 },
53 mounted: function(){
54 this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
55 // 隐藏logo
56 $(".cesium-widget-credits")[0].style.visibility="hidden";
57 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
58 // 隐藏导航工具
59 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
60
61 this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
62 mapStyle : Cesium.TiandituMapsStyle.IMG_C,
63 token: URL_CONFIG.TOKEN_TIANDITU
64 }));
65 var imageryLayers = this.smviewer.imageryLayers;
66 //初始化天地图全球中文注记服务，并添加至影像图层
67 var labelImagery = new Cesium.TiandituImageryProvider({
68 mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
69 token: URL_CONFIG.TOKEN_TIANDITU
70 });
71 imageryLayers.addImageryProvider(labelImagery);
72 // 添加超图发布的矢量瓦片图层
73 this.smviewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
74 url: 'http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China'
75 }));
76
77 var scene = this.smviewer.scene;
78 scene.camera.setView({
79 destination : Cesium.Cartesian3.fromDegrees(120.6994, 27.9938, 100000),
80 orientation : {
81 heading : 0.003361064609361364,
82 pitch : -1.5310712877149566,
83 roll : 0
84 }
85 });
86
87 $('#loadingbar').remove();
88 }
89 }
90 </script>
91
92 <style>
93
94 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * 显示基本的三维Globe
3 * 1、添加SuperMap发布的地形数据
4 * 2、添加SuperMap发布的影像数据
5 * 3、量测面积
6 * 4、淹没区分析
7 * @Author: jiangbotao
8 * @Date: 2019-12-02 09:05:50
9 * @LastEditors: jiangbotao
10 * @LastEditTime: 2019-12-04 20:09:26
11 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
12 -->
13 <template>
14 <div>
15 <div id="cesiumContainer" v-bind:style="styleObject"></div>
16 <div id="loadingbar" class="spinner">
17 <div class="spinner-container container1">
18 <div class="circle1"></div>
19 <div class="circle2"></div>
20 <div class="circle3"></div>
21 <div class="circle4"></div>
22 </div>
23 <div class="spinner-container container2">
24 <div class="circle1"></div>
25 <div class="circle2"></div>
26 <div class="circle3"></div>
27 <div class="circle4"></div>
28 </div>
29 <div class="spinner-container container3">
30 <div class="circle1"></div>
31 <div class="circle2"></div>
32 <div class="circle3"></div>
33 <div class="circle4"></div>
34 </div>
35 </div>
36 <div id="toolbar" class="param-container tool-bar">
37 <div class="param-item">
38 <label>颜色透明</label>
39 <input class="colorPicker" size="8" data-bind="value: color,valueUpdate: 'input'" id="colorPicker">
40 </div>
41 <div class="param-item">
42 <label>颜色透明容限</label>
43 <input type="range" min="0" max="1" step="0.02" data-bind="value: tolerance,valueUpdate: 'input'" id="tolerance" style="display: block;width:200px;margin: 5px 0">
44 </div>
45 <div class="param-item">
46 <button type="button" id="area" class="button black">测面</button>
47 <button type="button" id="draw" class="button black">绘面</button>
48 <button type="button" id="begin" class="button black">淹没分析</button>
49 </div>
50 </div>
51 </div>
52 </template>
53
54 <script>
55 import URL_CONFIG from "./../config/urlConfig.vue";
56 const Cesium = window.Cesium;
57 export default {
58 data: function() {
59 return {
60 styleObject:{
61 width: '100%',
62 position: "absolute",
63 top: "0px",
64 bottom: "0px",
65 left: "0px",
66 backgroundColor: "#000000"
67 },
68 smviewer:{}
69 }
70 },
71 mounted: function(){
72 this.viewer=new Cesium.Viewer("cesiumContainer", {
73 terrainProvider : new Cesium.CesiumTerrainProvider({
74 url : URL_CONFIG.SiChuan_TERRAIN,
75 isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true
76 }),
77 });
78 // 隐藏logo
79 $(".cesium-widget-credits")[0].style.visibility="hidden";
80 // 隐藏导航工具
81 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
82
83 // 添加影像数据
84 var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
85 url : URL_CONFIG.SiChuan_IMG
86 }));
87
88 var clampMode = 0; // 空间模式
89 var scene = this.viewer.scene;
90 var widget = this.viewer.cesiumWidget;
91 var handlerArea, handlePolygon;
92 // 设置相机视图
93 scene.camera.setView({
94 destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
95 orientation : {
96 heading : 1.4059101895600987,
97 pitch : -0.20917672793046682,
98 roll : 2.708944180085382e-13
99 }
100 });
101
102 // 量测面积代码
103 var stviewer = this.viewer;
104 var positions = null;
105 handlerArea = new Cesium.MeasureHandler(this.viewer, Cesium.MeasureMode.Area, clampMode);
106 handlerArea.measureEvt.addEventListener(function(result){
107 var mj = Number(result.area);
108 var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡"
109 handlerArea.areaLabel.text = "面积:" + area;
110 });
111 handlerArea.activeEvt.addEventListener(function(isActive){
112 if(isActive === true){
113 stviewer.enableCursorStyle = false;
114 stviewer._element.style.cursor = "";
115 $("body").removeClass("measureCur").addClass("measureCur");
116 }else{
117 stviewer.enableCursorStyle = true;
118 $("body").removeClass("measureCur");
119 }
120 });
121 $("#area").click(function(){
122 deactiveAll();
123 handlerArea&&handlerArea.activate();
124 });
125
126 // 绘制面
127 handlePolygon = new Cesium.DrawHandler(this.viewer, Cesium.DrawMode.Polygon);
128 handlePolygon.drawEvt.addEventListener(function(polygon){
129 var array = [].concat(polygon.object.positions);
130 positions = [];
131 for(var i = 0, len = array.length; i < len; i++){
132 var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
133 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
134 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
135 var h=cartographic.height;
136 if(positions.indexOf(longitude)===-1&&positions.indexOf(latitude)===-1){
137 positions.push(longitude);
138 positions.push(latitude);
139 positions.push(h);
140 }
141 }
142 });
143 $("#draw").click(function(){
144 deactiveAll();
145 handlePolygon && handlePolygon.activate();
146 });
147
148 var hyp = new Cesium.HypsometricSetting();
149 //设置显示模式
150 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
151 //设置线颜色为红色
152 hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
153 //设置最大/最小可见高度
154 hyp.MinVisibleValue = 0;
155 //设置颜色表的最大/最小key值,表示高度
156 hyp.ColorTableMinKey = 1;
157 hyp.ColorTableMaxKey = 9000;
158 //新建颜色表
159 var colorTable = new Cesium.ColorTable();
160 var height = 1;
161 //每隔200m向颜色表插入一个随机色
162 for(var i = 0; i<90; i++){
163 height += 200;
164 colorTable.insert(height, getRandomColor());
165 }
166 //返回随机颜色
167 function getRandomColor(){
168 return new Cesium.Color(Math.random(), Math.random(), Math.random());
169 }
170 hyp.ColorTable = colorTable;
171 hyp.Opacity = 0.8;
172 //等高线间隔为200m
173 hyp.LineInterval = 200.0;
174 // 淹没分析
175 var currentHeight = 0;
176 var maxValue = 0;
177 var minValue = 0;
178 var int = null;
179
180 function flood(positions){
181 currentHeight = 0;
182 int = self.setInterval("flood()", 100);
183 maxValue = 3300;
184 minValue = 3000;
185 hyp.MinVisibleValue = minValue;
186 currentHeight = minValue;
187 window.flood = function() {
188 if(currentHeight > maxValue) {
189 self.clearInterval(int);
190 return;
191 }
192 hyp.MaxVisibleValue = currentHeight;
193 hyp.CoverageArea = positions;
194 console.log(positions);
195 stviewer.scene.globe.HypsometricSetting = {
196 hypsometricSetting : hyp,
197 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION
198 };
199 currentHeight += (500) / 10;
200 };
201 }
202 $("#begin").click(function(){
203 flood(positions);
204 handlePolygon.polygon.show = false;
205 // handlePolygon.polyline.show=false;
206 });
207
208 function clearAll(){
209 handlerArea && handlerArea.clear();
210 handlePolygon && handlePolygon.clear();
211 }
212
213 function deactiveAll(){
214 handlePolygon && handlePolygon.deactivate();
215 handlerArea && handlerArea.deactivate();
216 }
217
218 // 颜色及透明度设置
219 $("#colorPicker").spectrum({
220 color: "rgba(255,255,255)",
221 showPalette: true,
222 showAlpha: true,
223 localStorageKey: "spectrum.demo"
224 // palette: palette
225 });
226 var viewModel = {
227 color : "#ffffff",
228 tolerance : 0
229 };
230 Cesium.knockout.track(viewModel);
231 // 通过toolbar的控件控制地图图层的展示
232 var toolbar = document.getElementById("toolbar");
233 Cesium.knockout.applyBindings(viewModel, toolbar);
234 Cesium.knockout.getObservable(viewModel, "color").subscribe(
235 function(newValue) {
236 var selectedColor = Cesium.Color.fromCssColorString(newValue);
237 layer.transperantBackColor = selectedColor;
238 }
239 );
240 Cesium.knockout.getObservable(viewModel, "tolerance").subscribe(
241 function(newValue) {
242 layer.transperantBackColorTolerance = newValue;
243 }
244 );
245 $("#loadingbar").remove();
246 $("#toolbar").show();
247 }
248 };
249 </script>
250
251 <style>
252 .cesium-infoBox-visible {
253 transform: translate(0,0);
254 visibility: hidden;
255 opacity: 1;
256 transition: opacity 0.2s ease-out,transform 0.2s ease-out;
257 }
258 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-03 22:54:10 3 * @Date: 2019-12-03 22:54:10
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-04 07:12:56 5 * @LastEditTime: 2019-12-04 19:50:11
6 * @FilePath: \superglobevue\src\config\urlConfig.vue 6 * @FilePath: \superglobevue\src\config\urlConfig.vue
7 --> 7 -->
8 <script> 8 <script>
......
...@@ -2,17 +2,17 @@ ...@@ -2,17 +2,17 @@
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 08:14:36 5 * @LastEditTime: 2019-12-04 22:35:32
6 * @FilePath: \superglobevue\src\views\Home.vue 6 * @FilePath: \superglobevue\src\views\Home.vue
7 --> 7 -->
8 <template> 8 <template>
9 <div class="home"> 9 <div id="map">
10 <viewer></viewer> 10 <viewer></viewer>
11 </div> 11 </div>
12 </template> 12 </template>
13 13
14 <script> 14 <script>
15 import viewer from "@/components/viewer.vue"; 15 import viewer from "@/components/viewer_tdt.vue";
16 16
17 export default { 17 export default {
18 name: "home", 18 name: "home",
......