3a1f7960 by unknown

'20191212'

1 parent a3e46c8c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 * @Author: jiangbotao 4 * @Author: jiangbotao
5 * @Date: 2019-12-07 14:24:01 5 * @Date: 2019-12-07 14:24:01
6 * @LastEditors: jiangbotao 6 * @LastEditors: jiangbotao
7 * @LastEditTime: 2019-12-10 10:17:09 7 * @LastEditTime: 2019-12-12 14:00:47
8 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue 8 * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
9 --> 9 -->
10 <template> 10 <template>
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
30 <div class="circle4"></div> 30 <div class="circle4"></div>
31 </div> 31 </div>
32 </div> 32 </div>
33 <div id="footer">坐标信息</div>
33 </div> 34 </div>
34 </template> 35 </template>
35 36
...@@ -53,15 +54,16 @@ export default { ...@@ -53,15 +54,16 @@ export default {
53 } 54 }
54 }, 55 },
55 mounted: function(){ 56 mounted: function(){
56 this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true }); 57 var __this = this;
57 var scene = this.smviewer.scene; 58 __this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
58 var widget = this.smviewer.cesiumWidget; 59 var scene = __this.smviewer.scene;
60 var widget = __this.smviewer.cesiumWidget;
59 // 隐藏logo 61 // 隐藏logo
60 $(".cesium-widget-credits")[0].style.visibility="hidden"; 62 $(".cesium-widget-credits")[0].style.visibility="hidden";
61 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden"; 63 $(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
62 // 隐藏导航工具 64 // 隐藏导航工具
63 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; 65 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
64 this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ 66 __this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
65 mapStyle : Cesium.TiandituMapsStyle.IMG_C, 67 mapStyle : Cesium.TiandituMapsStyle.IMG_C,
66 token: URL_CONFIG.TOKEN_TIANDITU 68 token: URL_CONFIG.TOKEN_TIANDITU
67 })); 69 }));
...@@ -74,11 +76,13 @@ export default { ...@@ -74,11 +76,13 @@ export default {
74 //设置图层的阴影模式 76 //设置图层的阴影模式
75 scene.camera.setView({ 77 scene.camera.setView({
76 //将经度、纬度、高度的坐标转换为笛卡尔坐标 78 //将经度、纬度、高度的坐标转换为笛卡尔坐标
77 destination : new Cesium.Cartesian3(-2323607.7945701713, 5386182.530303348, 2505814.811681112), 79 destination : Cesium.Cartesian3.fromDegrees(113.3232, 23.1305, 830.0),
78 orientation : { 80 orientation : {
79 heading : 4.844795866469065, 81 // 指向
80 pitch : -0.58125995096984, 82 heading:Cesium.Math.toRadians(45, 0),
81 roll :1.2504663970958063e-11 83 // 视角
84 pitch:Cesium.Math.toRadians(-60),
85 roll:0.0
82 } 86 }
83 }); 87 });
84 }, function(e){ 88 }, function(e){
...@@ -93,6 +97,24 @@ export default { ...@@ -93,6 +97,24 @@ export default {
93 widget.showErrorPanel(title, undefined, e); 97 widget.showErrorPanel(title, undefined, e);
94 } 98 }
95 } 99 }
100
101 var handler = new Cesium.ScreenSpaceEventHandler(__this.smviewer.canvas);
102 var ellipsoid = __this.smviewer.scene.globe.ellipsoid;
103 handler.setInputAction(function(e) {
104 var cartesian = __this.smviewer.camera.pickEllipsoid(e.endPosition, ellipsoid);
105 if(cartesian){
106 //将笛卡尔三维坐标转为地图坐标(弧度)
107 var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
108 //将地图坐标(弧度)转为十进制的度数
109 var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
110 var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
111 var alti_String = (__this.smviewer.camera.positionCartographic.height).toFixed(2);
112 console.log(lat_String+' '+log_String);
113
114 $('#footer').text('经度 : ' + log_String +' | 纬度 : ' + lat_String + ' | 高度 : ' + alti_String);
115 }
116 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
117
96 $('#loadingbar').remove(); 118 $('#loadingbar').remove();
97 } 119 }
98 } 120 }
...@@ -111,4 +133,15 @@ export default { ...@@ -111,4 +133,15 @@ export default {
111 .sm-zoom { 133 .sm-zoom {
112 top: 130px; 134 top: 130px;
113 } 135 }
136 #footer {
137 height: 20px;
138 width: 100%;
139 bottom: 0px;
140 margin: 0px;
141 padding-left: 10px;
142 position: absolute;
143 background-color: rgba(173, 173, 173, 0.3);
144 color: white;
145 text-align: left;
146 }
114 </style> 147 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * 添加倾斜摄影场景和倾斜摄影图层 3 * 添加倾斜摄影场景和倾斜摄影图层
4 * @Date: 2019-12-02 09:05:50 4 * @Date: 2019-12-02 09:05:50
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-07 14:03:39 6 * @LastEditTime: 2019-12-12 14:02:01
7 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue 7 * @FilePath: \WebGL_Webpack_Vue\components\viewer.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-09 09:46:34 6 * @LastEditTime: 2019-12-12 13:46:50
7 * @FilePath: \superglobevue\src\components\viewer.vue 7 * @FilePath: \superglobevue\src\components\viewer.vue
8 --> 8 -->
9 <template> 9 <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-10 11:23:56 5 * @LastEditTime: 2019-12-12 14:00:31
6 * @FilePath: \superglobevue\src\views\Home.vue 6 * @FilePath: \superglobevue\src\views\Home.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 </template> 10 </template>
11 11
12 <script> 12 <script>
13 import viewer from "@/components/viewer_ymo.vue"; 13 import viewer from "@/components/viewer_ms3m.vue";
14 export default { 14 export default {
15 name: "home", 15 name: "home",
16 data() { 16 data() {
......