https://project-gc.com/lib/leaflet-plugins/Leaflet.MeasureControl-…?v=37bb82b9bf.1789203143

1L.Polyline.Measure = L.Draw.Polyline.extend({
2    addHooks: function() {
3        L.Draw.Polyline.prototype.addHooks.call(this);
4        if (this._map) {
5            this._markerGroup = new L.LayerGroup();
6            this._map.addLayer(this._markerGroup);
7
8            this._markers = [];
9            this._map.on('click', this._onClick, this);
10            this._startShape();
11        }
12    },
13
14    removeHooks: function () {
15        L.Draw.Polyline.prototype.removeHooks.call(this);
16
17        this._clearHideErrorTimeout();
18
19        //!\ Still useful when control is disabled before any drawing (refactor needed?)
20        this._map.off('mousemove', this._onMouseMove);
21        this._clearGuides();
22        this._container.style.cursor = '';
23
24        this._removeShape();
25
26        this._map.off('click', this._onClick, this);
27    },
28
29    _startShape: function() {
30        this._drawing = true;
31        this._poly = new L.Polyline([], this.options.shapeOptions);
32
33        this._container.style.cursor = 'crosshair';
34
35        this._updateTooltip();
36        this._map.on('mousemove', this._onMouseMove, this);
37    },
38
39    _finishShape: function () {
40        this._drawing = false;
41
42        this._cleanUpShape();
43        this._clearGuides();
44
45        this._updateTooltip();
46
47        this._map.off('mousemove', this._onMouseMove, this);
48        this._container.style.cursor = '';
49    },
50
51    _removeShape: function() {
52        if (!this._poly)
53            return;
54        this._map.removeLayer(this._poly);
55        delete this._poly;
56        this._markers.splice(0);
57        this._markerGroup.clearLayers();
58    },
59
60    _onClick: function(e) {
61        if (!this._drawing) {
62            this._removeShape();
63            this._startShape();
64            return;
65        }
66
67        L.Draw.Polyline.prototype._onClick.call(this, e);
68    },
69
70    _getTooltipText: function() {
71        var labelText = L.Draw.Polyline.prototype._getTooltipText.call(this);
72        if (!this._drawing) {
73            labelText.text = '';
74        }
75        return labelText;
76    }
77});
78
79L.Control.MeasureControl = L.Control.extend({
80
81    statics: {
82        TITLE: 'Measure distances'
83    },
84    options: {
85        position: 'topleft',
86        handler: {}
87    },
88
89    toggle: function() {
90        if (this.handler.enabled()) {
91            this.handler.disable.call(this.handler);
92        } else {
93            this.handler.enable.call(this.handler);
94        }
95    },
96
97    onAdd: function(map) {
98        var className = 'leaflet-control-draw';
99
100        this._container = L.DomUtil.create('div', 'leaflet-bar');
101
102        this.handler = new L.Polyline.Measure(map, this.options.handler);
103
104        this.handler.on('enabled', function () {
105            L.DomUtil.addClass(this._container, 'enabled');
106        }, this);
107
108        this.handler.on('disabled', function () {
109            L.DomUtil.removeClass(this._container, 'enabled');
110        }, this);
111
112        var link = L.DomUtil.create('a', className+'-measure', this._container);
113        link.href = '#';
114        link.title = L.Control.MeasureControl.TITLE;
115
116        L.DomEvent
117            .addListener(link, 'click', L.DomEvent.stopPropagation)
118            .addListener(link, 'click', L.DomEvent.preventDefault)
119            .addListener(link, 'click', this.toggle, this);
120
121        return this._container;
122    }
123});
124
125
126L.Map.mergeOptions({
127    measureControl: false
128});
129
130
131L.Map.addInitHook(function () {
132    if (this.options.measureControl) {
133        this.measureControl = L.Control.measureControl().addTo(this);
134    }
135});
136
137
138L.Control.measureControl = function (options) {
139    return new L.Control.MeasureControl(options);
140};
141