自己封装一层leaflet.draw界面_leaflet组件封装-优快云博客

介绍

环境Vue2 ，在使用leaflet.draw组件时，遇到了操作界面不好调整的问题，通过自己编写一层界面进行显示，也初始化leaflet.draw，但初始化后隐藏，自定义界面的事件，会调用原leaflet.draw的事件。

封装类

var XDrawToolBar = function () {
    this.defaultOpts = {
        drawTypes: ["marker", "polyline", "polygon", "rectangle", "clear"],
        drawTypesTitle: {
            marker: "绘制点",
            polyline: "绘制多段线",
            polygon: "绘制面",
            rectangle: "绘制矩形",
            clear: "清空绘制"
        },
        onDrawStart: function () { },
        onClear: function () { }
    };
    this.optionsUse = {};
    this.container = null;

    this.init = function (container, options) {
        this.container = container;
        for (var k in this.defaultOpts) {
            this.optionsUse[k] = this.defaultOpts[k];
        }
        for (var k in options) {
            this.optionsUse[k] = options[k];
        }
        //
        this.addButton();
    };

    this.addButton = function () {
        var that = this;
        for (var i = 0; i < this.optionsUse.drawTypes.length; i++) {
            var button = document.createElement("div");
            button.classList.add("XDrawButton");
            button.classList.add(this.optionsUse.drawTypes[i]);
            button.setAttribute("title", this.optionsUse.drawTypesTitle[this.optionsUse.drawTypes[i]]);
            button.dataset["drawType"] = this.optionsUse.drawTypes[i];
            button.addEventListener("click", function () {
                var dt = this.dataset["drawType"];
                if (dt != "clear") {
                    that.container.parentNode.querySelector(".leaflet-draw-draw-" + dt).click();
                    try { that.optionsUse.onDrawStart(dt); } catch (e) { }
                } else {
                    try { that.optionsUse.onClear(dt); } catch (e) { }
                }

            })
            this.container.appendChild(button);
        }
    }

    return this;
}

export default XDrawToolBar

用法，基于 vue2环境

<template>
   <div>
        <div class="lDrawContainer"></div>
        <div class="xDrawContainer"></div>
   </div>
</template>

<script>

<script>
export default { 
  components: {}, 
  data() {
    return {
      map: null,
      L: null,
      drawControl: null,
      xDrawToolBar: new XDrawToolBar(),
	  drawLayers: null
 
    };
  },
  mounted() {
    this.map = this.getMap();
    this.L = this.getLeaflet();
    
    this.init();  
    this.xDrawToolBar.init(this.$el.querySelector(".xDrawContainer"), {
      drawTypes: ["marker", "polyline", "polygon", "rectangle", "clear"],
      onClear: this.clearAllDrawings,
    });
 
  },
  beforeDestroy() {
    try {
      this.map.off(this.L.Draw.Event.DRAWSTART);
      this.map.off(this.L.Draw.Event.CREATED);
    } catch (e) { }
    this.map.removeControl(this.drawControl);
	
  },
  methods: {
    init() {
      var tVue = this;

      // init draw

      this.drawLayers = new this.L.FeatureGroup();
      this.map.addLayer(this.drawLayers);

      var customMarker = this.L.Icon.extend({
        options: {
          shadowUrl: markerShadow,
          iconAnchor: new L.Point(12, 12),
          iconSize: new L.Point(24, 41),
          iconUrl: MarkerIcon,
        },
      });

      this.drawControl = new this.L.Control.Draw({ 
        position: "topleft",  
        draw: {
          // marker: false,
          marker: {
            icon: new customMarker(),
          },
          circlemarker: false,
          circle: false,
        },
      });
      this.map.addControl(this.drawControl);
      var drawUI = document.getElementsByClassName("leaflet-draw")[0];
      this.$el.querySelector(".lDrawContainer").appendChild(drawUI);

      // draw event
      this.map.on(this.L.Draw.Event.DRAWSTART, this.onDrawStartHandler);
      this.map.on(this.L.Draw.Event.CREATED, this.onDrawCreatedHandler);
 
    },

	cancelDraw(){
		//绘制中途取消绘制
		this.drawControl._toolbars.draw.disable();
	},

    onDrawStartHandler(e) { 
      this.pipeLayers.clearLayers();
      this.drawLayers.clearLayers();
    },
    onDrawCreatedHandler(e) { 
      var tVue = this; 
      var latlngs = e.layer._latlngs;
      var type = e.layerType,
        layer = e.layer; 

      tVue.drawLayers.addLayer(layer);

      // flyto
      switch (type) {
        case "circlemarker":
        case "marker":
        case "circle":
          tVue.map.flyTo(e.layer._latlng);
          break;
        case "polyline":
        case "polygon":
        case "rectangle":
          tVue.map.fitBounds(e.layer.getBounds());
          break;
      }
 
    },
 

    clearAllDrawings() {
       
    },
   
  },
};
</script>
<style>
/* ------------XDrawButton-------------- */
.XDrawButton:first-child {
    margin-left: 0;
}

.XDrawButton {
    width: 46px;
    height: 45px;
    border: 2px solid #203774;
    border-radius: 4px;
    display: inline-block;
    margin: 5px 8px;
    cursor: pointer;
    /*  */

    background-size: 26px 25px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    filter: brightness(150%);

}

.XDrawButton:hover {
    background-color: #0440a0;
    border: 2px solid #0440a0;
    filter: brightness(200%);
}


.XDrawButton.clear:hover {
    background-color: #71262c;
    border: 2px solid #71262c;
    filter: brightness(200%);
}

.XDrawButton.marker {
    background-image: url(../assets/img/drawToolbar/marker-enabled.png);
}

.XDrawButton.polyline {
    background-image: url(../assets/img/drawToolbar/polyline-enabled.png);
}

.XDrawButton.polygon {
    background-image: url(../assets/img/drawToolbar/polygon-enabled.png);
}

.XDrawButton.rectangle {
    background-image: url(../assets/img/drawToolbar/rectangle-enabled.png);
}

.XDrawButton.clear {
    background-image: url(../assets/img/drawToolbar/clear-enabled.png);
}

.XDrawButton.marker:hover {
    background-image: url(../assets/img/drawToolbar/marker.png);
}

.XDrawButton.polyline:hover {
    background-image: url(../assets/img/drawToolbar/polyline.png);
}

.XDrawButton.polygon:hover {
    background-image: url(../assets/img/drawToolbar/polygon.png);
}

.XDrawButton.rectangle:hover {
    background-image: url(../assets/img/drawToolbar/rectangle.png);
}

.XDrawButton.clear:hover {
    background-image: url(../assets/img/drawToolbar/clear.png);
}

.lDrawContainer {
    margin-top: 30px;
}

.xDrawContainer {
    position: relative;
    /* top: -35px; */
    z-index: 2000;
}

.lDrawContainer {
    display: none;
}

.leaflet-marker-icon.leaflet-mouse-marker.leaflet-zoom-animated.leaflet-interactive.leaflet-div-icon.leaflet-editing-icon.leaflet-pin-marker {
    margin-left: -4px !important;
    margin-top: -4px !important;
    width: 4px !important;
    height: 4px !important;
}

.lDrawContainer .leaflet-draw-toolbar {
    opacity: 0;
}
</style>