地图起步

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)

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"

src/App.vue

@@ -42,4 +42,4 @@ html, body {
     overflow-y: auto;
   }
 }
-</style>
\ No newline at end of file
+</style>

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>

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

src/views/base/index.vue

+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>

src/views/base/start/index.vue

+<template>
+  <div>
+    起步
+  </div>
+</template>

src/views/home/index.vue

 <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>

src/views/test/hh/index.vue

@@ -2,4 +2,4 @@
   <div>
     hhhhhhhhhh
   </div>
-</template>
\ No newline at end of file
+</template>

src/views/test/index.vue

@@ -2,4 +2,4 @@
   <div>
     <router-view></router-view>
   </div>
-</template>
\ No newline at end of file
+</template>

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"