'init

@@ -4617,6 +4617,11 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

@@ -13,6 +13,7 @@
     "@mapbox/mapbox-gl-draw": "^1.1.2",
     "@supermap/iclient-mapboxgl": "^10.0.0",
     "ant-design-vue": "^1.4.10",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.4.1",
     "mapbox-gl": "^1.6.0",
     "mapbox-gl-compare": "^0.3.0",

@@ -2,13 +2,13 @@
  * @Author: jiangbotao
  * @Date: 2019-12-12 17:40:15
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-14 10:21:51
+ * @LastEditTime: 2019-12-14 11:49:06
  * @FilePath: \mymapbox\src\App.vue
  -->
 <template>
-<a-layout id="components-layout-demo-top-side-2">
+  <a-layout id="components-layout-demo-top-side-2">
     <a-layout-header class="header">
-      <a-icon type="compass" />&nbsp;&nbsp;温州项目VUE 2DMap示例(v10.0)
+      <span class="fa fa-globe fa-lg"></span>&nbsp;&nbsp;温州项目VUE 2DMap示例(v10.0)
       <a-menu
         theme="dark"
         mode="horizontal"
@@ -17,7 +17,7 @@
       </a-menu>
     </a-layout-header>
     <a-layout>
-      <a-layout-sider width="200" style="background: #fff">
+      <a-layout-sider collapsible v-model="collapsed">
         <MyMenu></MyMenu>
       </a-layout-sider>
       <a-layout style="padding: 10px 10px 10px 10px">
@@ -47,11 +47,11 @@ export default {
 <style>
   .ant-layout-header {
     height: 64px;
-    padding: 0 10px;
+    padding: 0 25px;
     line-height: 64px;
     background: #096fd0;
     color: white;
-    font-size: 30px;
+    font-size: 26px;
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-bottom-color: #bb5905;
@@ -66,6 +66,26 @@ export default {
     margin: 16px 28px 16px 0;
     float: left;
   }
+  .ant-layout-sider {
+    position: relative;
+    min-width: 0;
+    background:white;
+    -webkit-transition: all 0.2s;
+    transition: all 0.2s;
+  }
+  .ant-layout-sider-trigger {
+    position: fixed;
+    bottom: 0;
+    z-index: 1;
+    height: 48px;
+    color: #b73c3c;
+    line-height: 48px;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    -webkit-transition: all 0.2s;
+    transition: all 0.2s;
+  }
   #app{
     height: 100%;
   }

@@ -2,7 +2,7 @@
  * @Author: jiangbotao
  * @Date: 2019-12-09 23:17:48
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-13 00:41:31
+ * @LastEditTime: 2019-12-14 12:06:23
  * @FilePath: \mymapbox\src\components\Map3857.vue
  -->
 <template>
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import $ from 'jquery';
 import mapboxgl from 'mapbox-gl';
 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
 export default {
@@ -75,6 +76,10 @@ export default {
                 .setHTML(innerHTML + "</br>")
                 .addTo(map);
         }
+
+        $('#map').on('resize', function() { 
+            console.log('resize');
+        });
     }
 }
 </script>

@@ -2,24 +2,24 @@
  * @Author: jiangbotao
  * @Date: 2019-12-13 23:53:57
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-13 23:57:11
+ * @LastEditTime: 2019-12-14 12:09:23
  * @FilePath: \supermapvue\src\components\menu\MyMenu.vue
  -->
 <template>
-    <a-menu
-        mode="inline"
-        :defaultSelectedKeys="['1']"
-        :defaultOpenKeys="['sub1']"
-        :style="{ height: '100%', borderRight: 0 }">
+    <a-menu theme="light" :defaultSelectedKeys="['1']" mode="inline">
+        <a-menu-item key="1">
+            <span class="fa fa-map fa-lg"/>
+            <router-link :to="'/'"><span>默认信息</span></router-link>
+        </a-menu-item>
         <a-sub-menu key="sub1">
-            <span slot="title"><a-icon type="user" />基本信息</span>
+            <span slot="title"><a-icon type="user" /><span>基本信息</span></span>
             <a-menu-item key="1_1"><router-link :to="'/'">地图信息</router-link></a-menu-item>
             <a-menu-item key="1_2"><router-link :to="'/rastertile'">栅格瓦片</router-link></a-menu-item>
             <a-menu-item key="1_3"><router-link :to="'/mvt'">矢量瓦片</router-link></a-menu-item>
             <a-menu-item key="1_4"><router-link :to="'/measure'">地图量测</router-link></a-menu-item>
         </a-sub-menu>
         <a-sub-menu key="sub2">
-            <span slot="title"><a-icon type="laptop" />要素查询</span>
+            <span slot="title"><a-icon type="team" /><span>要素查询</span></span>
             <a-menu-item key="2_1"><router-link :to="'/feature_bounds'">Bounds查询</router-link></a-menu-item>
             <a-menu-item key="2_2"><router-link :to="'/feature_buffer'">缓冲区查询</router-link></a-menu-item>
             <a-menu-item key="2_3"><router-link :to="'/feature_draw'">手工空间查询</router-link></a-menu-item>
@@ -27,23 +27,26 @@
             <a-menu-item key="2_5"><router-link :to="'/feature_sql'">SQL查询</router-link></a-menu-item>
         </a-sub-menu>
         <a-sub-menu key="sub3">
-            <span slot="title"><a-icon type="notification" />检索</span>
+            <span slot="title"><a-icon type="compass" /><span>要素检索</span></span>
             <a-menu-item key="3_1"><router-link :to="'/query_bounds'">Bounds检索</router-link></a-menu-item>
             <a-menu-item key="3_2"><router-link :to="'/query_distance'">距离检索</router-link></a-menu-item>
             <a-menu-item key="3_3"><router-link :to="'/query_geo'">几何检索</router-link></a-menu-item>
             <a-menu-item key="3_4"><router-link :to="'/query_sql'">SQL检索</router-link></a-menu-item>
         </a-sub-menu>
         <a-sub-menu key="sub4">
-            <span slot="title"><a-icon type="appstore" />空间</span>
+            <span slot="title"><a-icon type="appstore" /><span>空间</span></span>
             <a-menu-item key="4_1"><router-link :to="'/spatial_buffer'">构造缓冲区</router-link></a-menu-item>
             <a-menu-item key="4_2"><router-link :to="'/spatial_heatmap'">热力图</router-link></a-menu-item>
         </a-sub-menu>
         <a-sub-menu key="sub5">
-            <span slot="title"><a-icon type="setting" />专题图</span>
+            <span slot="title"><a-icon type="setting" /><span>专题图</span></span>
             <a-menu-item key="5_1"><router-link :to="'/theme_dot'">点密度</router-link></a-menu-item>
             <a-menu-item key="5_2"><router-link :to="'/theme_gra'">分级图</router-link></a-menu-item>
             <a-menu-item key="5_3"><router-link :to="'/theme_range'">分段渲染</router-link></a-menu-item>
             <a-menu-item key="5_4"><router-link :to="'/theme_label'">注记图</router-link></a-menu-item>
         </a-sub-menu>
     </a-menu>
-</template>
\ No newline at end of file
+</template>
+<style scoped>
+
+</style>
\ No newline at end of file

@@ -2,7 +2,7 @@
  * @Author: jiangbotao
  * @Date: 2019-12-12 17:40:15
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-13 23:28:46
+ * @LastEditTime: 2019-12-14 11:51:38
  * @FilePath: \supermapvue\src\main.js
  */
 // The Vue build version to load with the `import` command
@@ -12,6 +12,7 @@ import Antd from 'ant-design-vue'
 import App from './App'
 import router from './router'
 import 'ant-design-vue/dist/antd.css'
+import 'font-awesome/css/font-awesome.css'
 
 Vue.config.productionTip = false
 Vue.use(Antd)