diff --git a/README.md b/README.md
index 677a50da938ce9b210826d91c6875ba59128ac29..b626b71305fd4678e0a2efd2e82db6b4db5282d6 100644
--- a/README.md
+++ b/README.md
@@ -13,8 +13,9 @@
 > 本项目采用插件``leaflet.js``和高德地图开发gis应用。
 
 - [leaflet.js使用文档](https://leafletjs.com/)
+- [高德地图API](https://lbs.amap.com/api/javascript-api/summary)
 
-项目使用
+项目使用：
 
 ```bash
 # yarn
@@ -29,4 +30,11 @@
 
 ## 使用起步
 
-安装
+安装插件
+
+```javascript
+yarn add leaflet
+yarn add leaflet.chinatmsproviders
+```
+
+[leaflet.chinatmsproviders](https://www.npmjs.com/package/leaflet.chinatmsproviders)
diff --git a/package.json b/package.json
index 6362cb4bdf3eaa0edf67e94d3b7a20bb0a190c1a..f4ca32c43c041e9aa47667be74eb3b9bf1347f52 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "core-js": "^3.4.3",
     "element-ui": "^2.13.0",
     "leaflet": "^1.6.0",
+    "leaflet.chinatmsproviders": "^2.0.3",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2"
diff --git a/src/App.vue b/src/App.vue
index 34f8887868c3ad54487f791ecee67d8a70be14c8..0a3f308339a4adb389bf0573809ea3ff3e518c02 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,4 +42,4 @@ html, body {
     overflow-y: auto;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/layout/siderbar/index.vue b/src/components/layout/siderbar/index.vue
index f1789d6182ed20815aed26e2173f54a194b4855b..1f066385f56581aa45655ce8badc09ba37ad7008 100644
--- a/src/components/layout/siderbar/index.vue
+++ b/src/components/layout/siderbar/index.vue
@@ -4,7 +4,7 @@ import routes from '@/router/routes'
 export default {
   name: 'Siderbar',
   methods: {
-    renderItem() {
+    renderItem () {
       return (
         routes.map(item => {
           // 由于只有2层，所以简单写了
@@ -37,7 +37,7 @@ export default {
       )
     }
   },
-  render() {
+  render () {
     return (
       <div>
         <div class="header">vue-gis案例demo</div>
@@ -66,4 +66,4 @@ export default {
 .el-menu {
   border: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 74a73c86536396dde95836d6a7871ea6ac936d66..64087e9fb11fcb5419312beb7ed6b06bf0e5458a 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -6,6 +6,22 @@ const routes = [
     icon: 'el-icon-s-home',
     component: () => import('@/views/home')
   },
+  {
+    path: '/base',
+    redirect: '/base/start',
+    name: 'base',
+    text: '基础',
+    icon: 'el-icon-s-help',
+    component: () => import('@/views/base'),
+    children: [
+      {
+        path: '/base/start',
+        name: 'start',
+        text: '起步',
+        component: () => import('@/views/base/start')
+      }
+    ]
+  },
   {
     path: '/test',
     redirect: '/test/test1',
@@ -36,4 +52,4 @@ const routes = [
   }
 ]
 
-export default routes
\ No newline at end of file
+export default routes
diff --git a/src/views/base/index.vue b/src/views/base/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bfb461552ff0ace0675b70029839025e69fe2bd7
--- /dev/null
+++ b/src/views/base/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
diff --git a/src/views/base/start/index.vue b/src/views/base/start/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a179b940b1910e2cd475f9f95d0a0db0abe373d5
--- /dev/null
+++ b/src/views/base/start/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    起步
+  </div>
+</template>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a2a87e3aba95e07b3f263dc7f8cacfe14f06ee25..1a61c2671c5844cd603dbcececfecf2dba59e2a5 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,14 +1,69 @@
 <template>
-  <div class="home siderbar">
-    home
-    <div class="header">111</div>
-  </div>
+  <div class="map" id="map"></div>
 </template>
 
 <script>
+import L from 'leaflet'
+import 'leaflet.chinatmsproviders'
+import 'leaflet/dist/leaflet.css'
+
+// 常量
+// 定位中心点
+const center = [30.659791980587134, 104.0633797645569]
+
 export default {
-  name: 'home',
-  components: {
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      const normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
+        maxZoom: 18,
+        minZoom: 1,
+        ak: '123321'
+      })
+      const imgm = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
+        maxZoom: 18,
+        minZoom: 1
+      })
+      const imga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
+        maxZoom: 18,
+        minZoom: 1
+      })
+
+      const normal = L.layerGroup([normalm])
+      const image = L.layerGroup([imgm, imga])
+
+      const baseLayers = {
+        '地图': normal,
+        '影像': image
+      }
+
+      const map = L.map('map', {
+        center: center, // 初始化定位点
+        zoom: 13, // 初始化显示级别
+        maxZoom: 18, // 最大缩放
+        minZoom: 1, // 最小缩放
+        layers: [normal], //
+        zoomControl: false,
+        attributionControl: false
+      })
+
+      L.control.layers(baseLayers, null).addTo(map)
+      L.control
+        .zoom({
+          zoomInTitle: '放大',
+          zoomOutTitle: '缩小'
+        })
+        .addTo(map)
+    }
   }
 }
 </script>
+
+<style scoped>
+.map {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/test/hh/index.vue b/src/views/test/hh/index.vue
index 111293cc42fc69b460902c860383e3c0882c3a01..df45597ab553d5cae2f06e767499423e473959df 100644
--- a/src/views/test/hh/index.vue
+++ b/src/views/test/hh/index.vue
@@ -2,4 +2,4 @@
   <div>
     hhhhhhhhhh
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/test/index.vue b/src/views/test/index.vue
index bc0a792d85a212f67bf6ce397e5d80f172a8fafb..bfb461552ff0ace0675b70029839025e69fe2bd7 100644
--- a/src/views/test/index.vue
+++ b/src/views/test/index.vue
@@ -2,4 +2,4 @@
   <div>
     <router-view></router-view>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/yarn.lock b/yarn.lock
index 963d929565e40fcc0888d41bb3d3807662dd1e1a..df2cab2abf5ac38db8dca2fc815bc5418741ce1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4910,6 +4910,11 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
+leaflet.chinatmsproviders@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/leaflet.chinatmsproviders/-/leaflet.chinatmsproviders-2.0.3.tgz#352988a44f4b6ba167f3bde1ea0e3ff280cc28e3"
+  integrity sha512-dB9SI3Y/W2IB1TRdyeYU286EDMW4MwH5n89xv9Q0DtzKqMyul13p9sOLYRurCbFKYgBcTYQPq71Q4hbvdFHtQg==
+
 leaflet@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"