Я хочу научиться делать простую линейку (измерение) на Листовке. ⇐ Jquery

[Anonymous]

Я хочу создать простую линейку на основе примера ниже:


Я знаю множество плагинов по измерению в Leaflet, но по каким-то причинам я хочу обойтись без плагина. Для этого мне нужен совет и помощь.
Это мой код функции:

Код: Выделить всё

var markersRulerGroup = L.layerGroup();
markersRulerGroup.addTo(map);

var tooltipRulerGroup = L.layerGroup();
tooltipRulerGroup.addTo(map);

var rulerIcon = L.divIcon({className: 'bi bi-dot text-ruler-map', iconSize: [0, 0], iconAnchor: [26, 36]});
var markerRuler;
var markersCount;
var tooltipRuler;

function measureDistance(){
if ($('#measureDistanceCheckedState').is(":checked")) {
$('#measureDistanceCheckedState').prop('checked', false);
btnMeasureDistance.style.backgroundColor = '#ffffff';

// markersRulerGroup.removeLayer(markerRuler);
map.eachLayer(function(layer) {
if(layer.options.alt === "markerRuler") layer.removeFrom(markersRulerGroup);
if(layer.options.alt === "tooltipRuler") layer.removeFrom(tooltipRulerGroup);
});

map.off('click');
}   else {
$('#measureDistanceCheckedState').prop('checked', true);
btnMeasureDistance.style.backgroundColor = '#dbdbdb';

map.on('click', function(e){
markerRuler = new L.marker(e.latlng, {alt: 'markerRuler', icon: rulerIcon});
markersRulerGroup.addLayer(markerRuler);

markersCount = markersRulerGroup.getLayers().length;

tooltipRuler = new L.tooltip(e.latlng, {alt: 'tooltipRuler', permanent: true, direction:'bottom', offset:[1,6]})
.setContent("THIS MARKER:" +markersCount);
tooltipRulerGroup.addLayer(tooltipRuler);
});
};
};

Основываясь на моей функции выше, когда я нажимаю на карту, я добавляю маркер, как показано на рисунке ниже:


На самом деле моя проблема в том, что я не знаю, как определить маркер[ до] и маркер[после]. Это важно для расчета расстояния и добавления линии между двумя маркерами. Если я знаю, как определить маркер[до] и маркер[после], я ожидал, что мой следующий результат будет ниже:
[img]https:/ /i.sstatic.net/34urilDe.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/791 ... on-leaflet