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

16.02.2022

3234

В библиотеке 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