Leaflet.js – линия между маркерами

Leaflet.js – линия между маркерами

В библиотеке Leaflet имеются стандартные инструменты для реализации данной задачи.

Понадобятся два маркера (marker) и включенной функцией перетаскивания {draggable: true} и линия (polyline). Остаётся только назначить маркерам событие «drag» для перерисовки линии при перетаскивании маркеров.

<div id="map" style="width: 100%; height: 400px"></div>
 
<link rel="stylesheet" href="/leaflet/leaflet.css">
<script src="/leaflet/leaflet.js"></script>
 
<script>
L.Control.prototype._refocusOnMap = function _refocusOnMap(ev) {
	if (this._map && ev && ev.screenX > 0 && ev.screenY > 0) {
		this._map.getContainer().focus({ preventScroll: true });
	}
};

var map = L.map('map', {
	center: [38.89, -77.03],
	zoom: 5,
	minZoom: 1,
	maxZoom: 18
});

var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker_a = L.marker([38.00, -70.00], {draggable: true}).addTo(map);
var marker_b = L.marker([39.00, -78.00], {draggable: true}).addTo(map);

var line = L.polyline([marker_a.getLatLng(), marker_b.getLatLng()], {color: 'red', weight: 1}).addTo(map);

marker_a.on('drag', function(e){
	line.setLatLngs([marker_a.getLatLng(), marker_b.getLatLng()]);	
});

marker_b.on('drag', function(e){
	line.setLatLngs([marker_a.getLatLng(), marker_b.getLatLng()]);	
});
</script>
HTML

Результат:

Пунктирная линия

Задать стиль линии можно с помощью параметров dashArray и dashOffset.

<div id="map" style="width: 100%; height: 400px"></div>
 
<link rel="stylesheet" href="/leaflet/leaflet.css">
<script src="/leaflet/leaflet.js"></script>
 
<script>
L.Control.prototype._refocusOnMap = function _refocusOnMap(ev) {
	if (this._map && ev && ev.screenX > 0 && ev.screenY > 0) {
		this._map.getContainer().focus({ preventScroll: true });
	}
};

var map = L.map('map', {
	center: [38.89, -77.03],
	zoom: 5,
	minZoom: 1,
	maxZoom: 18
});

var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker_a = L.marker([38.00, -70.00], {draggable: true}).addTo(map);
var marker_b = L.marker([39.00, -78.00], {draggable: true}).addTo(map);

var line = L.polyline([marker_a.getLatLng(), marker_b.getLatLng()], {color: 'red', weight: 1, dashArray: '5, 5', dashOffset: '0'}).addTo(map);

marker_a.on('drag', function(e){
	line.setLatLngs([marker_a.getLatLng(), marker_b.getLatLng()]);	
});

marker_b.on('drag', function(e){
	line.setLatLngs([marker_a.getLatLng(), marker_b.getLatLng()]);	
});
</script>
HTML

Результат:

16.02.2022, обновлено 25.04.2022
512

Комментарии

, чтобы добавить комментарий.

Другие публикации

Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
27460
+30
Коды клавиш клавиатуры для JQuery событий keydown, keyup и keypress
Список кодов клавиш стандартной клавиатуры на Windows и MacOS...
38727
-1
Таблица символов ASCII + Windows 1251
Список из 256 символов и их коды в ASCII.
520622
+44
Виртуальные коды клавиш (Virtual-Key Codes)
В следующей таблице приведены имена констант (VK Codes), десятичные и шестнадцатеричные значения для кодов виртуальных...
5808
+2
Таблица Alt-кодов
Alt-код – метод вставки символа сочетанием нажатой клавиши Alt и числа, набранного на цифровой клавиатуре (Num Lock должен быть включен).
2284
+2
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
81324
+24