vue@leaflet 创建Leaflet组件

关注公众号"seeling_GIS"，回复『前端视频』，领取前端学习视频资料

参考：https://leafletjs.com/reference-1.6.0.html

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

---

更多内容，欢迎关注公众号

seeling_GIS