Leaflet自定义图片作为地图

vue中使用leaflet展示室内地图，并解决图片初始化问题；

1.初始化地图

initMap () {
      L.CRS.Simple.transformation = new L.transformation(1, 0, 1, 0) // 坐标原点切换为左上角
      this.map = L.map('map', {
        center: [0, 0],
        crs: L.CRS.Simple,
        zoomSnap: 0.1, // 比例可小数
        zoom: 0.5,
        maxZoom: 5,
        minZoom: -5,
        attributionControl: false
      })
      this.mapGroup = new L.LayerGroup()
    },

2.导入地图

 drawMap () {
      this.img.src = this.imgUrl
      // 图片导入后操作
      this.img.onload = () => {
        // 设定图片像素范围为坐标范围
        this.w = this.img.width
        this.h = this.img.height
        this.bounds = [[0,0],[this.h,this.w]]
        this.basicMap = L.imageOverlay(this.imgUrl, this.bounds)
        this.mapGroup.addLayer(this.basicMap)
        this.map.addLayer(this.mapGroup)
      }
    }

3.完整代码

<template>
  <div id="map"></div>
</template>

<script>
export default {
  data () {
    return {
      map: null,
      mapGroup: null,
      basicMap: null,
      bounds: [],
      img: new Image(),
      imgUrl: require('@/assets/map1.png'),
      w: null,
      h: null
    }
  },

  methods: {
    // 初始化地图
    initMap () {
      L.CRS.Simple.transformation = new L.transformation(1, 0, 1, 0) // 坐标原点切换为左上角
      this.map = L.map('map', {
        center: [0, 0],
        crs: L.CRS.Simple,
        zoomSnap: 0.1, // 比例可小数
        zoom: 0.5,
        maxZoom: 5,
        minZoom: -5,
        attributionControl: false
      })
      this.mapGroup = new L.LayerGroup()
    },

    // 导入地图
     drawMap () {
      this.img.src = this.imgUrl
      // 图片导入后操作
      this.img.onload = () => {
        // 设定图片像素范围为坐标范围
        this.w = this.img.width
        this.h = this.img.height
        this.bounds = [[0,0],[this.h,this.w]]
        this.basicMap = L.imageOverlay(this.imgUrl, this.bounds)
        this.mapGroup.addLayer(this.basicMap)
        this.map.addLayer(this.mapGroup)
      }
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initMap()
      this.drawMap()
    })
  }
}
</script>