vue中leaflet自动清除上一个矩形，并显示坐标

data中数据

  data() {
    return {
      map: null,
      option: {
        //leaflet.pm配置项
        position: "topleft",
        drawPolygon: false, // 添加绘制多边形
        drawMarker: false, //添加按钮以绘制标记
        drawCircleMarker: false, //添加按钮以绘制圆形标记
        drawPolyline: false, //添加按钮绘制线条
        drawRectangle: true, //添加按钮绘制矩形
        drawCircle: false, //  添加按钮绘制圆圈
        editMode: true, //  添加按钮编辑多边形
        dragMode: true, //   添加按钮拖动多边形
        cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
        removalMode: true, // 清除图层
      },
      rectangle: null,
      rectangleBounds: null
    };
  },

    methods中的代码

    <script>
FirstCesium() {
      // 初始化二维地图
      if (this.map != null) this.map.remove();
      const map = L.map("bigdrawMap", {
        minZoom: 2,// 地图最小缩放层级
        maxZoom: 6,// 地图最大缩放层级,
        //crs: L.CRS.EPSG3857,
        crs: L.CRS.EPSG4326,
        tms:true,
        center: [40.6, 116.8],// 地图中心
        zoom: 3,// 地图默认缩放层级
        attributionControl: false,// 属性控制是否默认加载在地图上
        preferCanvas: true, //使用canvas模式渲染矢量图形
      });
      this.map = map;
      this.map.setView([14.550339, 112.114129], 2);
      L.tileLayer(baseURL.ytbaseMapUrl, {
        minZoom: 2,
        maxZoom: 6,
        tms: true,
      }).addTo(this.map);
      this.map.pm.setLang("zh");
      this.map.pm.addControls(this.option);
      map.invalidateSize();
    },
    // 坐标转换函数
    coordinateTransformation() {
      // 绘图后坐标获取
      this.map.on("pm:create", (e) => {
        if (e.shape == 'Rectangle') {
          // 把当前矩形信息储存到data中的数据
          // console.log("eeeee",e)
          this.rectangle = e.layer;
          this.rectangleBounds = e.layer.getBounds();
        }
        if (e.shape == "Circle") {
          // console.log(e.layer._latlng, e.layer._radius,1)
        } else {
            //这下面的就是矩形坐标信息
           console.log(e.layer._latlngs)
        }
      });
        this.map.on('pm:remove', () => { // 移除矩形时触发
        this.rectangle = null;
        this.rectangleBounds = null;
      });
    },
    drawRectangle() {
      // 每次点击，前面的矩形会自动清除掉
    if (this.rectangle) {
      this.map.removeLayer(this.rectangle);
      this.rectangle = null;
      this.rectangleBounds = null;
    }
    // 自定义绘制矩形点击事件
    this.map.pm.enableDraw("Rectangle", {
        snappable: true,
        snapDistance: 20,
      });
    },
<script/>

mounted()中

  mounted() {
    this.FirstCesium();
    this.coordinateTransformation();
  },

注：drawRectangle()函数是click事件，随意绑定到哪个按钮上都行,按钮是绘制按钮。初始化二维地球弄自己的，不要盲目粘贴。