【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._latlngsd._leaflet_id = e.target._leaflet_id}})localStorage.setItem('layers', JSON.stringify(res))},