【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)

看效果展示:

【vue+leaflet】第二节效果展示视频

1.平面图切换,多个平面图切换展示

    <div class="select">
      <span>平面图：</span>
      <el-select v-model="pic" placeholder="全部" clearable filterable @change="initDate">
        <el-option :label="item.name" v-for="(item, index) in picArr" :key="index" :value="item.id"> </el-option>
      </el-select>
    </div>
    ...
    pic: 0,
      picArr: [
        { id: 0, name: '1楼平面图', points: [] },
        { id: 1, name: '2楼平面图', points: [] },
        { id: 2, name: '3楼平面图', points: [] },
      ],
      imageOverlay: '',

来一个select展示多个平面图的下拉列表,点击切换更换平面图

initDate(){
	// 这段是为了切换的时候把上一个平面图中所有图层全删掉,防止携带到下一个平面图中
	  // 循环遍历图层删除
      this.map.eachLayer((layer) => {
        if (layer._latlngs != null || layer._latlng != null) {
          layer.remove()
        }
      })
      ...
      // select切换时,获取v-model绑定的id,动态更新平面图
      let url = require(`../../public/home/bgc${this.pic}.jpg`)
      ...
      // imageOverlay有值代表已经绘制过地图和平面图,切换平面图就换换url和尺寸就可以了
      // else 没值,就初始化加载一遍平面图到地图中.
       // 添加图片,更换图片
       if (this.imageOverlay) {
         this.imageOverlay.setUrl(url)
         this.imageOverlay.setBounds(this.bounds)
       } else {
         this.imageOverlay = L.imageOverlay(url, this.bounds).addTo(this.map)
       }
}

2.存储绘制图层的点位信息 (地图事件)

项目中是掉接口进行保存的,这里用本地缓存替换一下.都是一样的步骤

this.map.on('pm:create', this.createClick)//通过这个绑定的,这个写在initDate方法中
   // 图层绘制完成事件
    createClick(e) {
      // console.log('图层绘制完成', e)
      // 获取缓存的图层数据,看看之前有没有绘制过,本次绘制完push到改集合中
      let res = JSON.parse(localStorage.getItem('layers')) || []
      // 没有值没有绘制,赋个值初始值
      if (!res[this.pic]) res[this.pic] = []
      // 只要两个参数即可保存该图层信息,id和经纬度
      let obj = {
        _leaflet_id: e.layer._leaflet_id,
        latlngs: e.layer._latlngs,
      }
      res[this.pic].push(obj)
      localStorage.setItem('layers', JSON.stringify(res))
      // 给图层绑定点击、拖拽、编辑事件
      e.layer.on('pm:edit', this.editLayClick).on('click', this.layClick).on('pm:dragend', this.dragendLayClick)
    },

3.回显存储过的图层点位信息

回显就在平面图初始化的时候回显就可以了

initDate(){
	...
	      // 获取本地存储的图层数据
      let res = JSON.parse(localStorage.getItem('layers')) || []
      // 当前平面图下如果有绘制的图层,就进行回显
      if (res[this.pic]) {
        // 循环绘制图层
        res[this.pic].forEach((e) => {
          let lay = L.polygon(e.latlngs).addTo(this.map).on('pm:edit', this.editLayClick).on('click', this.layClick).on('pm:dragend', this.dragendLayClick)
          // 这个id每次刷新,来回切换平面图,都会改变,所以要更新一下,如果不更新,下面删除,拖拽,编辑,的时候就找不到图层了
          e._leaflet_id = lay._leaflet_id
        })
        localStorage.setItem('layers', JSON.stringify(res))
      }
      ...
}

4.图层删除事件 (地图事件)

 this.map.on('pm:remove', this.removeClick) // 在initDate方法中注册
 removeClick(){
	     // console.log('图层删除', e)
      let res = JSON.parse(localStorage.getItem('layers')) || []
      res[this.pic].forEach((d, i) => {
        if (d._leaflet_id == e.layer._leaflet_id) {
          res[this.pic].splice(i, 1)
        }
      })
      localStorage.setItem('layers', JSON.stringify(res))
 }

5.图层拖拽、编辑事件(图层事件)

拖拽和编辑其实差不多,拖拽后会走拖拽事件和编辑事件,因为项目没什么特殊要求,所以把拖拽和编辑后的逻辑处理统一写在编辑事件里面了
拖拽走过dragendLayClick方法后还会走editLayClick方法,编辑只会走editLayClick方法
// 在createClick图层绘制的方法中注册绑定的
   // 区域图层拖拽
    dragendLayClick(e) {
      console.log('图层拖拽', e)
    },
    // 区域图层编辑
    editLayClick(e) {
      console.log('图层编辑', e)
      let res = JSON.parse(localStorage.getItem('layers'))
      // 循环遍历更新一下id和经纬度就可以了
      res[this.pic].forEach((d) => {
        if (d._leaflet_id == e.target._leaflet_id) {
          d.latlngs = e.target._latlngs
          d._leaflet_id = e.target._leaflet_id
        }
      })
      localStorage.setItem('layers', JSON.stringify(res))
    },

所有示例代码已上传,点击前往获取
Done!