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

<template>
  <div id="mapid" style="height: 600px;"></div>
</template>
 
<script>
import L from 'leaflet';
import 'leaflet-geoman';
 
export default {
  name: 'IndoorMap',
  data() {
    return {
      map: null,
      tileLayer: null,
      geojsonLayer: null,
    };
  },
  mounted() {
    this.initMap();
    this.addTileLayer();
    this.addGeoJSON();
  },
  methods: {
    initMap() {
      this.map = L.map('mapid').setView([51.505, -0.09], 13); // 设置中心点坐标和缩放级别
    },
    addTileLayer() {
      this.tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
      }).addTo(this.map);
    },
    addGeoJSON() {
      this.geojsonLayer = L.geoJSON([{
        "type": "Feature",
        "properties": {
          "name": "房间",
          "category": "室内空间"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [100.0, 0.0],
              [101.0, 0.0],
              [101.0, 1.0],
              [100.0, 1.0],
              [100.0, 0.0]
            ]
          ]
        }
      }]).addTo(this.map);
 
      // 使用leaflet-geoman插件来进行编辑操作
      this.geojsonLayer.pm.enable();
    }
  }
};
</script>
 
<style>
/* 在这里添加CSS样式 */
</style>

这段代码展示了如何在Vue项目中使用Leaflet库来绘制一个简单的室内平面图，并使用leaflet-geoman插件来使得绘制的图形可以编辑。在mounted钩子中初始化地图，添加了一个瓦片层，并加载了一个GeoJSON对象，该对象代表了一个简单的房间或室内空间的多边形。最后，使用leaflet-geoman插件的enable方法来启用多边形的编辑功能。