leaflet中的工具条:放大、缩小、画笔、线量、面量、全屏

import "leaflet-measure-path";
import "leaflet-measure-path/leaflet-measure-path.css";//要引入样式
import "leaflet-editable";

 fullscreenElement() {
      //判断是否全屏状态
      var fullscreenEle =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
      return fullscreenEle;
    },
    showFullscreen(fullscreen) {
      // console.log(111);
      //全屏显示
      if (fullscreen) {
        //进入全屏
        this.isfullsereen = true;
        var element = document.getElementById("myMap");
        var requestMethod =
          element.requestFullScreen ||
          element.webkitRequestFullScreen ||
          element.mozRequestFullScreen ||
          element.msRequestFullScreen;
        if (requestMethod) {
          requestMethod.call(element);
        } else if (typeof window.ActiveXObject !== "undefined") {
          var wscript = new ActiveXObject("WScript.Shell");
          if (wscript !== null) {
            wscript.SendKeys("{F11}");
          }
        }
      } else {
        //退出全屏
        this.isfullsereen = false;
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },
 onToolbarClick(type) { //工具条方法
      let self = this;
      switch (type) {
        case "zoomIn": //缩小
          this.omap.zoomOut(); //减小地图的缩放倍数
          break;
        case "zoomOut": //放大
          this.omap.zoomIn(); //增加地图的缩放倍数
          break;
        case "fullextent":
          this.showFullscreen(true);
          break;
        // case "measure-line": //线
        //   this.omap.dragging.disable();
        //   var line = this.omap.editTools.startPolyline();
        //   line.addTo(this.measureLayer);
        //   break;
        // case "gon": //面
        //   this.omap.dragging.disable();
        //   var gon = this.omap.editTools.startPolygon();
        //   gon.addTo(this.measureLayer);
        //   break;
        case "measure-line":
        case "gon":
          this.isCanClickPipePoint = false;
          this.isCanClickPipeLine = false;
          this.omap.getContainer().style.cursor = "";
          let feature =
            type == "measure-line"
              ? this.omap.editTools.startPolyline()
              : this.omap.editTools.startPolygon();
          feature.addTo(this.measureLayer);
          let tempPolyline = null;
          feature.on("editable:drawing:move editable:vertex:drag", (e) => {
            if (tempPolyline != null) {
              //self.measureLayer.removeLayer(tempPolyline);
            }
            let latlngs = feature._latlngs;
            let latlng = latlngs[latlngs.length - 1];
            let latlng2 = e.latlng;
            let nlatlngs = [latlng, latlng2];
            let lyrs = self.omap._layers;
            for (var key in lyrs) {
              let lyr = lyrs[key];
              if (lyr._latlngs && lyr._latlngs.length == 2) {
                lyr.showMeasurements();
                lyr.updateMeasurements();
              }
            }
            //console.log(lyrs);
            //tempPolyline = L.polyline(nlatlngs, {color: 'blue',opacity:0}).addTo(self.measureLayer);
            //tempPolyline.showMeasurements();
            //tempPolyline.updateMeasurements();
            feature.showMeasurements();
            feature.updateMeasurements();
          });
          feature.on("editable:drawing:commit", () => {
            console.log("click");
            feature.showMeasurements();
            feature.updateMeasurements();
            feature.disableEdit();
          });
          break;
        case "reset": //刷新 (清除)
          this.measureLayer.clearLayers();
          this.omap.removeLayer(this.drawFreePolyLine);
          break;
        case "pen":
          this.omap.getContainer().style.cursor = "";
          this.drawFreeLine();
          break;
        // this.isCanClickPipePoint = false;
        // this.isCanClickPipeLine = false;
        // this.omap.dragging.disable();
        // this.omap.getContainer().style.cursor = "";
        // break;
      }
    },