【vue+leaflet】vue项目中使用leaflet绘制室内平面图、leaflet.pm在平面图中绘制点、线、面图层(一)

效果图:

一,插件安装

JavaScript 复制代码

npm i leaflet --save   // 我的版本^1.9.4
npm i leaflet.pm --save // 我的版本^2.2.0

附官网链接:

leaflet官网: https://leafletjs.com/index.html

leaflet.pm官网: https://www.npmjs.com/package/leaflet.pm?activeTab=readme

二,模块引入

因为我是单个页面需要所有就局部引入了,也可以放全局里面引入

javascript 复制代码

<script>
import 'leaflet/dist/leaflet.css'
import 'leaflet/dist/leaflet'
import 'leaflet/dist/leaflet-src'
import 'leaflet/dist/leaflet-src.esm'
import * as L from 'leaflet'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'
import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'
const DefaultIcon = L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
})
L.Marker.prototype.options.icon = DefaultIcon
export default {
  data() {
    return {
     	map: null,
     	fillColor: '#2d75ff80',
	    bounds: [
	       [0, 0],
	       [0, 0],
	     ], // 平面图大小
    }
  }
}
</script>

三,逻辑代码

javascript 复制代码

 <div id="imageMap"></div>
 ......
   methods: {
    // 平面图初始化
    initMap() {
      this.map = L.map('imageMap', {
        minZoom: -3,
        zoom: 5,
        maxZoom: 4,
        zoomSnap: 0.1, // 缩放步长
        attributionControl: false, // 右下角图例控件
        zoomControl: true, // 缩放控件
        crs: L.CRS.Simple, // 坐标系
        center: [0, 0], // 中心点
      })
      this.map.pm.setLang('zh') // 控件提示设置中文
      this.map.pm.addControls({
        position: 'topleft', // 控件菜单位置
        drawPolygon: true, //绘制多边形
        drawMarker: true, //绘制标记点
        drawCircleMarker: true, //绘制圆形标记
        drawPolyline: true, //绘制线条
        drawRectangle: true, //绘制矩形
        drawCircle: true, //绘制圆圈
        editMode: true, //编辑多边形
        dragMode: true, //拖动多边形
        cutPolygon: true, //添加⼀个按钮以删除多边形⾥⾯的部分内容
        removalMode: true, //清除多边形
      })
      // 全局图层样式
      this.map.pm.setPathOptions({
        fillOpacity: 0.5,
        fillColor: this.fillColor,
      })
    },
    // 地图初始化
    initDate() {
      // 获取图片宽高,防止不同尺寸的图片回显在页面上有多余的留白问题
      let img = new Image()
      let url = require('../../public/home/bgc4.jpg')
      img.src = url
      img.onload = () => {
        let w = img.width
        let h = img.height
        this.bounds = [
          [0, 0],
          [h, w],
        ]
        // 创建地图
        L.imageOverlay(url, this.bounds).addTo(this.map)
        // 设置地图图层区域
        this.map.fitBounds(this.bounds)
      }
      // 给地图绑定绘制、删除的事件
      this.map.on('pm:create', this.createClick)
      this.map.on('pm:remove', this.removeClick)
      // 禁止背景图拖拽,默认是可拖拽的
      this.map.dragging.disable()
      // 禁止双击缩放,默认是可双击缩放的
      this.map.doubleClickZoom.disable()
      // 禁止滚动缩放,默认是可滚动缩放的
      this.map.scrollWheelZoom.disable()
    },
    // 图层绘制完成
    createClick(e) {
      // console.log('图层绘制完成', e)
      // 设置图层样式
      e.layer.setStyle({
        fillOpacity: 0.5,
        fillColor: this.fillColor,
        // color：线段颜色
        // weight：线段宽度
        // opacity：线段透明度
        // dashArray：虚线间隔
        // fill：是否填充内部(true/false)
        // fillColor:内部填充颜色，如不设置，默认为color颜色
        // fillOpacity：内部填充透明度
      })
      // 给图层绑定点击、拖拽、编辑事件
      e.layer.on('pm:edit', this.editLayClick).on('click', this.layClick).on('pm:dragend', this.dragendLayClick)
    },
    // 图层删除
    removeClick(e) {
      // console.log('图层删除', e)
    },
    // 区域图层点击
    layClick(e) {
      // console.log('区域图层点击', e)
    },
    // 区域图层拖拽
    dragendLayClick(e) {
      // console.log('区域图层拖拽', e)
    },
    // 区域图层编辑
    editLayClick(e) {
      // console.log('图层编辑', e)
    },
  },
  mounted() {
    this.initMap()
    this.initDate()
    // 窗口缩放,地图自适应缩放
    window.onresize = () => {
      this.map.invalidateSize(true)
      this.map.fitBounds(this.bounds)
    }
  },

到这里就可以实现效果图所展示的功能了,下节详细说明各个模块及事件函数的功能.

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

Done