解决Leaflet.draw中polyline绘制无法结束的问题

        阅读过之前的文章基于Leaflet.draw的gis图形标绘实战和干货!基于Leaflet.draw的自定义绘制，也许你大致知道了如何扩展自己的基本绘制以及在无draw按钮的情况下激活绘制组件。但是你有没有自己扩展过polyline，比如需要额外增加一个数据编辑图层，用于保存一条线或者一个面。那此时我们该怎么做呢？

        解决思路如下：

        1、扩展polyline对象。

        2、扩展map的创建函数，将draw组件注册的对象类型和自定义对象的type分开，并可以单独处理。

        3、针对需求创建自定义处理函数。

        第一步、创建扩展对象类，在Draw.Polyline.js平级目录下新增Draw.Diy.js类，代码如下：

/**
 * @class L.Draw.Polyline4Diy
 * @aka Draw.Polyline4Diy
 * @inherits L.Draw.Polyline
 */
L.Draw.Polyline4Diy = L.Draw.Polyline.extend({
  statics: {
    TYPE: 'polyline4diy'
  },
​
  options: {
    allowIntersection: true,
    repeatMode: false,
    drawError: {
      color: '#b00b00',
      timeout: 2500
    },
    icon: new L.DivIcon({
      iconSize: new L.Point(8, 8),
      className: 'leaflet-div-icon leaflet-editing-icon'
    }),
    touchIcon: new L.DivIcon({
      iconSize: new L.Point(20, 20),
      className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon'
    }),
    guidelineDistance: 20,
    maxGuideLineLength: 4000,
    shapeOptions: {
      stroke: true,
      color: '#3388ff',
      weight: 4,
      opacity: 0.5,
      fill: false,
      clickable: true
    },
    metric: true, // Whether to use the metric measurement system or imperial
    feet: true, // When not metric, to use feet instead of yards for display.
    nautic: false, // When not metric, not feet use nautic mile for display
    showLength: true, // Whether to display distance in the tooltip
    zIndexOffset: 2000, // This should be > than the highest z-index any map layers
    factor: 1, // To change distance calculation
    maxPoints: 0 // Once this number of points are placed, finish shape
  },
​
  // @method initialize(): void
  initialize: function (map, options) {
    // if touch, switch to touch icon
    if (L.Browser.touch) {
      this.options.icon = this.options.touchIcon;
    }
​
    // Need to set this here to ensure the correct message is used.
    this.options.drawError.message = L.drawLocal.draw.handlers.polyline.error;
​
    // Merge default drawError options with custom options
    if (options && options.drawError) {
      options.drawError = L.Util.extend({}, this.options.drawError, options.drawError);
    }
​
    // Save the type so super can fire, need to do this as cannot do this.TYPE :(
    this.type = L.Draw.Polyline4Diy.TYPE;
​
    L.Draw.Feature.prototype.initialize.call(this, map, options);
  },
​
  // calculate if we are currently within close enough distance
  // of the closing point (first point for shapes, last point for lines)
  // this is semi-ugly code but the only reliable way i found to get the job done
  // note: calculating point.distanceTo between mouseDownOrigin and last marker did NOT work
  _calculateFinishDistance: function (potentialLatLng) {
    var lastPtDistance;
    if (this._markers.length > 0) {
      var finishMarker;
      if (this.type === L.Draw.Polyline.TYPE) {
        finishMarker = this._markers[this._markers.length - 1];
      } else if (this.type === L.Draw.Polygon.TYPE) {
        finishMarker = this._markers[0];
      } else {
        return Infinity;
      }
      var lastMarkerPoint = this._map.latLngToContainerPoint(finishMarker.getLatLng()),
        potentialMarker = new L.Marker(potentialLatLng, {
          icon: this.options.icon,
          zIndexOffset: this.options.zIndexOffset * 2
        });
      var potentialMarkerPint = this._map.latLngToContainerPoint(potentialMarker.getLatLng());
      lastPtDistance = lastMarkerPoint.distanceTo(potentialMarkerPint);
    } else {
      lastPtDistance = Infinity;
    }
    return lastPtDistance;
  }
  
});

        上述代码可以从Draw.PolyLine.js中复制而来，只需要将不同的代码修改即可。比如声明不同的类型（必须要，相当于给当前类进行一个类型申明）。

statics: {
    TYPE: 'polyline4diy'
  },

// @method initialize(): void
  initialize: function (map, options) {
    // if touch, switch to touch icon
    if (L.Browser.touch) {
      this.options.icon = this.options.touchIcon;
    }
​
    // Need to set this here to ensure the correct message is used.
    this.options.drawError.message = L.drawLocal.draw.handlers.polyline.error;
​
    // Merge default drawError options with custom options
    if (options && options.drawError) {
      options.drawError = L.Util.extend({}, this.options.drawError, options.drawError);
    }
​
    // Save the type so super can fire, need to do this as cannot do this.TYPE :(
    this.type = L.Draw.Polyline4Diy.TYPE;
​
    L.Draw.Feature.prototype.initialize.call(this, map, options);
  },

        第二步、绘制激活

function drawLine(){
    diyDrawLayers.clearLayers();
    new L.Draw.Polyline4Diy(map).enable();
}

        第三步、自定义对象和默认对象分开定义

// Object created - bind popup to layer, add to feature group
 map.on(L.Draw.Event.CREATED, function(event) {
      var layer = event.layer;
      var layerType = event.layerType;
      var content = getPopupContent(layer);
      if (content !== null) {
          layer.bindPopup(content);
      }
      if(layerType == L.Draw.Rectangle4Diy.TYPE || layerType == L.Draw.Polyline4Diy.TYPE){
        diyDrawLayers.addLayer(layer);
      }else{
        drawnItems.addLayer(layer);
      }
  });

        通过以上步骤可完成自定义polyline扩展，功能如下图：

        实际操作时，你会发现，当点击最后一个绘制的点，绘制动作并未停下，而polyline绘制时却可以停下。是哪里出现了问题呢？

        在Draw.Diy.js文件中，我们去查找绘制结束的计算方法，并debug看下发生了什么？

        debug发现，其lastPtDistance是INfinity,继续往前看，

        仔细观察发现，我们在计算时，忘记了将type修改成为我们自己定义的类型，因此会导致计算失误，无法绘制结束，只需要将type修改为如下即可

if (this.type === L.Draw.Polyline4Diy.TYPE)

        清空缓存，在此进行绘制就会发现，点击线的最后一个点可以正常结束。

        总结：通过本文，可以了解如何自定义Draw.PolyLine对象，以及在扩展时需要注意的一些坑，知道如何调试函数并定位问题，最终完成我们的需求