'20191207'

unknown
Showing 7 changed files with 59 additions and 27 deletions
package-lock.json
package.json
src/components/viewer_s3m_single.vue
src/components/viewer_s3m_wz.vue
src/main.js
src/views/Home.vue
vue.config.js
--- a/package-lock.json
View file @71a1381
+++ b/package-lock.json
View file @71a1381
--- a/package.json
View file @71a1381
+++ b/package.json
View file @71a1381
@@ -9,8 +9,8 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "ant-design-vue": "^1.4.8",
    "core-js": "^3.4.3",
-    "element-ui": "^2.13.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  },
--- a/src/components/viewer_s3m_single.vue
View file @71a1381
+++ b/src/components/viewer_s3m_single.vue
View file @71a1381
@@ -6,7 +6,7 @@
 * 3、使用Popup来弹出倾斜摄影覆盖面的信息
 * @Date: 2019-12-03 22:52:56
 * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-05 21:30:15
+ * @LastEditTime: 2019-12-07 11:56:15
 * @FilePath: \superglobevue\src\components\viewer.vue
 -->
 <template>
@@ -127,7 +127,23 @@ export default {
            queryByPoint(queryPoint);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-        $("#close").click(function(){ // 关闭气泡
+        var ellipsoid = this.viewer.scene.globe.ellipsoid;
+        handler.setInputAction(function(e) {
+            var cartesian = smviewer.camera.pickEllipsoid(e.endPosition, ellipsoid);
+            if(cartesian){
+                //将笛卡尔三维坐标转为地图坐标（弧度）
+                var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
+                //将地图坐标（弧度）转为十进制的度数
+                var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
+                var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
+                var alti_String = (smviewer.camera.positionCartographic.height).toFixed(2);
+                $('.ant-layout-footer').text('经度 : ' + log_String +' |  纬度 : ' + lat_String + ' |  高度 : ' + alti_String);
+            }
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+        $("#close").click(function(){
+            // 关闭气泡
+            smviewer.entities.removeAll();
            $("#bubble").hide();
        });
        // 每一帧都去计算气泡的正确位置
@@ -221,7 +237,11 @@ export default {
    top: 180px;
 }
 .bubble {
-    padding: 10px;
+    padding: 5px;
-    border-radius: 10px;
+    border-radius: 5px;
+}
+#tab {
+    height: unset;
+    text-align: left;
 }
 </style>
--- a/src/components/viewer_s3m_wz.vue
View file @71a1381
+++ b/src/components/viewer_s3m_wz.vue
View file @71a1381
@@ -2,7 +2,7 @@
 * @Author: jiangbotao
 * @Date: 2019-12-03 22:52:56
 * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-04 22:23:44
+ * @LastEditTime: 2019-12-07 12:44:32
 * @FilePath: \superglobevue\src\components\viewer.vue
 -->
 <template>
--- a/src/main.js
View file @71a1381
+++ b/src/main.js
View file @71a1381
@@ -2,17 +2,17 @@
 * @Author: jiangbotao
 * @Date: 2019-12-03 22:31:08
 * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-05 11:16:09
+ * @LastEditTime: 2019-12-07 11:44:35
 * @FilePath: \superglobevue\src\main.js
 */
 import Vue from 'vue'
-import ElementUI from 'element-ui'
+import Antd from 'ant-design-vue'
-import 'element-ui/lib/theme-chalk/index.css'
+import App from './App'
-import App from './App.vue'
+import 'ant-design-vue/dist/antd.css'
 import router from './router'
 Vue.config.productionTip = false
-Vue.use(ElementUI)
+Vue.use(Antd)
 new Vue({
  router,
--- a/src/views/Home.vue
View file @71a1381
+++ b/src/views/Home.vue
View file @71a1381
@@ -2,23 +2,23 @@
 * @Author: jiangbotao
 * @Date: 2019-12-03 22:31:08
 * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-05 21:29:53
+ * @LastEditTime: 2019-12-07 12:44:47
 * @FilePath: \superglobevue\src\views\Home.vue
 -->
 <template>
-    <el-container>
+    <a-layout>
-        <el-header style="height: 50px;">
+        <a-layout-header>
-            <i class="el-icon-s-opportunity"></i>&nbsp;&nbsp;三维地理信息系统
+            <a-icon type="global" />&nbsp;&nbsp;三维地理信息系统
-        </el-header>
+        </a-layout-header>
-        <el-main style="padding: 0px;">
+        <a-layout-content style="padding: 0px;">
            <viewer></viewer>
-        </el-main>
+        </a-layout-content>
-        <el-footer style="height: 22px;">Footer</el-footer>
+        <a-layout-footer style="height: 22px;">Footer</a-layout-footer>
-    </el-container>
+    </a-layout>
 </template>
 <script>
-import viewer from "@/components/viewer_s3m_wz.vue";
+import viewer from "@/components/viewer_s3m_single.vue";
 export default {
    name: "home",
@@ -34,20 +34,20 @@ export default {
 </script>
 <style scoped>
-.el-header {
+.ant-layout-header {
-    height: 50px;
+    height: 60px;
    top: 0px;
    position: absolute;
    width: 100%;
    background-color: #2d8cf0;
    color: white;
    text-align: left;
-    padding: 10px 0px;
+    padding: 0px 0px;
    padding-left: 10px;
    z-index: 99;
-    font-size: 20pt;
+    font-size: 18pt;
 }
-.el-footer {
+.ant-layout-footer {
    height: 22px;
    bottom: 0px;
    position: absolute;
--- a/vue.config.js
View file @71a1381
+++ b/vue.config.js
View file @71a1381
@@ -2,7 +2,7 @@
 * @Author: jiangbotao
 * @Date: 2019-12-03 22:40:09
 * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-04 08:09:04
+ * @LastEditTime: 2019-12-07 11:50:48
 * @FilePath: \superglobevue\vue.config.js
 */
 module.exports = {
@@ -16,5 +16,17 @@ module.exports = {
        port:7000,
        hot: true,
        openPage: 'index.html'
+    },
+    css: {
+        loaderOptions: {
+          less: {
+            modifyVars: {
+              'primary-color': '#1DA57A',
+              'link-color': '#1DA57A',
+              'border-radius-base': '2px',
+            },
+            javascriptEnabled: true
+          }
+        }
      }
 }
\ No newline at end of file