Vue-Leaflet全屏缩放组件

插件安装

安装leaflet

// An highlighted block
npm install leaflet --save

安装leaflet-fullscreen

// An highlighted block
npm install leaflet-fullscreen --save

安装vue2-leaflet

// An highlighted block
npm install vue2-leaflet --save

组件代码

<template>
  <el-main></el-main>
</template>

<script>
import * as L from 'leaflet'
import {OptionsMixin, ControlMixin, propsBinder, optionsMerger} from 'vue2-leaflet'
import 'leaflet-fullscreen'
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css'
/**
 * 地图全屏缩放组件
 *
 * @author gao'shuai
 * @since 2021年04月15日
 * @version 0.0.1 页面首次开发
 */
export default {
  name: 'LControlFullscreen',
  mixins: [
    ControlMixin,
    OptionsMixin
  ],
  data () {
    return {}
  },
  computed: {},
  mounted: function () {
    const options = optionsMerger({
      ...this.controlOptions,
      options: this.options
    }, this)
    this.mapObject = new L.Control.Fullscreen(options)
    propsBinder(this, this.mapObject, this.$options.props)
    this.mapObject.addTo(this.$parent.mapObject)
  },
  render () {
    return null
  },
  methods: {}
}
</script>

<style scoped>

</style>