'20191205'

@@ -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"
   },

@@ -101,5 +101,16 @@ export default {
 </script>
 
 <style>
-
+.sm-compass {
+    pointer-events: auto;
+    position: absolute;
+    right: 10px;
+    top: 70px;
+    width: 128px;
+    height: 128px;
+    overflow: hidden;
+}
+.sm-zoom {
+	top: 190px;
+}
 </style>

@@ -2,7 +2,7 @@
  * @Author: jiangbotao
  * @Date: 2019-12-03 22:52:56
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-04 23:31:19
+ * @LastEditTime: 2019-12-05 13:16:55
  * @FilePath: \superglobevue\src\components\viewer.vue
  -->
 <template>
@@ -168,9 +168,9 @@ export default {
 
 <style>
 .compass {
-    top: 10px;
+    top: 60px;
 }
 .navigation-controls {
-    top: 120px;
+    top: 180px;
 }
 </style>

@@ -4,7 +4,7 @@
  * 2、添加了超图发布的矢量瓦片服务
  * @Date: 2019-12-02 09:05:50
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-04 22:37:19
+ * @LastEditTime: 2019-12-05 13:14:46
  * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
  -->
 <template>
@@ -90,5 +90,16 @@ export default {
 </script>
 
 <style>
-
+.sm-compass {
+    pointer-events: auto;
+    position: absolute;
+    right: 10px;
+    top: 70px;
+    width: 128px;
+    height: 128px;
+    overflow: hidden;
+}
+.sm-zoom {
+	top: 190px;
+}
 </style>
\ No newline at end of file

+/*
+ * @Author: jiangbotao
+ * @Date: 2019-12-03 22:31:08
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-05 11:16:09
+ * @FilePath: \superglobevue\src\main.js
+ */
 import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
 import router from './router'
 
 Vue.config.productionTip = false
+Vue.use(ElementUI)
 
 new Vue({
   router,

@@ -2,22 +2,108 @@
  * @Author: jiangbotao
  * @Date: 2019-12-03 22:31:08
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-05 10:46:13
+ * @LastEditTime: 2019-12-05 13:17:59
  * @FilePath: \superglobevue\src\views\Home.vue
  -->
 <template>
-    <div id="map">
-        <viewer></viewer>
-    </div>
+    <el-container style="height: 100%; border: 1px solid #eee">
+        <el-container>
+            <el-header style="text-align: left; font-size: 28px">
+                <i class="el-icon-map-location"></i>三维
+            </el-header>
+            <el-main>
+                <el-aside width="66px" style="background-color: white">
+                    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse">
+                        <el-submenu index="1">
+                            <template slot="title">
+                                <i class="el-icon-location"></i>
+                                <span slot="title">地图操作</span>
+                            </template>
+                            <el-menu-item-group>
+                                <span slot="title">分组一</span>
+                                <el-menu-item index="1-1">选项1</el-menu-item>
+                                <el-menu-item index="1-2">选项2</el-menu-item>
+                            </el-menu-item-group>
+                            <el-menu-item-group title="分组2">
+                                <el-menu-item index="1-3">选项3</el-menu-item>
+                            </el-menu-item-group>
+                            <el-submenu index="1-4">
+                                <span slot="title">选项4</span>
+                                <el-menu-item index="1-4-1">选项1</el-menu-item>
+                            </el-submenu>
+                        </el-submenu>
+                        <el-menu-item index="2">
+                            <i class="el-icon-menu"></i>
+                            <span slot="title">空间查询</span>
+                        </el-menu-item>
+                        <el-submenu index="3">
+                            <template slot="title">
+                                <i class="el-icon-location"></i>
+                                <span slot="title">地图操作</span>
+                            </template>
+                            <el-menu-item-group>
+                                <span slot="title">分组一</span>
+                                <el-menu-item index="3-1">淹没分析</el-menu-item>
+                                <el-menu-item index="3-2">选项2</el-menu-item>
+                            </el-menu-item-group>
+                            <el-menu-item-group title="分组2">
+                                <el-menu-item index="3-3">选项3</el-menu-item>
+                            </el-menu-item-group>
+                            <el-submenu index="3-4">
+                                <span slot="title">选项4</span>
+                                <el-menu-item index="3-4-1">选项1</el-menu-item>
+                            </el-submenu>
+                        </el-submenu>
+                    </el-menu>
+                </el-aside>
+                <div id="map">
+                    <viewer></viewer>
+                </div>
+            </el-main>
+        </el-container>
+    </el-container>
 </template>
 
 <script>
-import viewer from "@/components/viewer_tdt.vue";
+import viewer from "@/components/viewer_s3m_single.vue";
 
 export default {
     name: "home",
+    data() {
+      return {
+        isCollapse: true
+      };
+    },
     components: {
         viewer
     }
 };
 </script>
+
+<style scoped>
+.el-header {
+    padding: 12px 20px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    position: absolute;
+    z-index: 99;
+    background-color: white;
+    width: 100%;
+    margin-top: -1px;
+    border-bottom: red;
+    border-bottom-style: solid;
+    border-bottom-width: 2px;
+}
+.el-aside {
+    width: 200px;
+    position: absolute;
+    height: 100%;
+    z-index: 98;
+    margin-top: 39px;
+    margin-left: -20px;
+    background-color: white;
+    /* background-color: rgb(238, 241, 246); */
+}
+</style>