【Vue@Leaflet】创建Leaflet组件

从这篇文章开始，将介绍vue创建leaflet组件，实现一些基本webgis开发

1 通过使用vue提供的 provide 和 inject 钩子函数配合 slot 创建LMap组件

provide 和 inject：简单的来说他俩就是在父子组件中通过provide来提供变量，组件通过inject来注入变量，需要注意的是，这里区别于通过prop，$emit传参，前者不论子组件有多深，只要调用了inject就可以注入provide里面的数据了

2 template

<template>
   <div class="map">
     <slot></slot>
   </div>
 </template>

3 引入 leaflet ,也可以在 main.js 中引入

import * as L from 'leaflet';
//或
//import { Map } from 'leaflet'

4 初始化地图对象

initMap(){
         // 初始化地图控件
         this.map = new L.Map(this.$el, {
             center:this.center,
             zoom: 4,
         });
         this.$emit('loaded', this.map);
     },

5 使用 provide 钩子函数

provide() {
     return {
       getMap: this.getMap,
     };
   },

6 完整代码如下

 <template>
  <div class="map">
    <slot></slot>
  </div>
</template>
<script>
import * as L from 'leaflet';
export default {
  data() {
    return {
      map: null,
    };
  },
  props: ['center'],
  provide() {
    return {
      getMap: this.getMap,
    };
  },
  mounted() {
    this.initMap()
  },
  methods: {
        initMap(){
            // 初始化地图控件
            this.map = new L.Map(this.$el, {
                this.center,
                zoom: 4,
            });
            this.$emit('loaded', this.map);
        },

    getMap(found) {
      let vm = this;
      function checkForMap() {
        if (vm.map) {
          found(vm.map);
        } else {
          setTimeout(checkForMap, 100);
        }
      }
      checkForMap();
    }
  },
};
</script>
<style scoped>
.map {
  background: #66666c;
  width: 100%;
  height: calc(100vh);
}
</style> 

查看相关视频