В моем приложении Laravel 6 / blade / jquery 3 / leaflet / turf мне нужно 1) показать набор маркеров и 2) соединить их с полилиниями. Далее мне нужно 3) когда пользователь нажимает на карту, чтобы определить, является ли это полилинией, и если да, 4) показывать всплывающее меню действий и с выбранной опцией «Добавить элемент» 5) разбивать точки на краю выбранной полилинии на 2 полилинии и еще 1 маркер , Я делаю это так:
const points = [
{title:'title #1 ', lat:52.509, lng:-3.08},
{title:'title #2 ', lat:51.503, lng:-1.06},
{title:'title #3 ', lat:49.51, lng:-2.47}
];
var mymap = L.map('mapid').setView([51.505, -0.09], 7);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
drawPoints()
function drawPoints() {
points.forEach(point => {
const latlngs = L.marker([point.lat, point.lng]).addTo(mymap)
.bindPopup(point.title);//.openPopup();
// const ret= L.polyline(latlngs, { color: 'red' }).addTo(mymap)
// var polyline = new L.Polyline(latlngs, {
// weight: 10, // THIS WAY DOES NOT WORK TOO
// }).addTo(mymap);
var polyline = new L.Polyline(point.lat, point.lng, {
weight: 10,
}).addTo(mymap);
})
} // function drawPoints () {
В результате у меня есть множество маркеров, а не полилинии между маркерами. Как показать полилинии и, пожалуйста, дайте подсказки, как сделать шаги 3), 4), 5) с какими методами?
ИЗМЕНЕНО: Я нашел, как можно выполнить шаг 2:
points.forEach(point => {
const latlngs = L.marker([point.lat, point.lng]).addTo(mymap)
.bindPopup(point.title);//.openPopup();
polylinePoints[polylinePoints.length]=[point.lat, point.lng]
})
var polyline = L.polyline(polylinePoints, {color: 'red'}).addTo(mymap);
mymap.fitBounds(polyline.getBounds());
Любые подсказки, как для шагов 3,4,5, пожалуйста.
Спасибо!