Листовка JS: быстрый маршрут с пользовательскими точками

Question

Я работаю над проектом, где я могу позволить пользователям перемещаться по зданию моего клиента. Пути внутри здания определенно не определены на таких картах, как OSM или google.

Есть ли плагин, где я могу определить каждую точки на пути, и когда я установить начать и конечных точек, он найдет кратчайший путь?

Изображение показывает заявленные точек в зеленый цвет, начало (желтый) и конца (красные точки). Плагин или алгоритм должны связывать соответствующие точки для формирования кратчайшего маршрута (показано фиолетовым)

Большое вам спасибо! Если там нет плагина, я, вероятно, должен сам создать его.

PS. Я использую Leaflet JS, и я не зависим от OSM или Google maps, так как у меня есть собственное пользовательское изображение в качестве слоя

Answer 1

Хорошо, мне удалось это сделать благодаря внедрению JavaScript в JavaScript по алгоритму Дейкстры, который может можно найти here.

Кроме того, вот что я сделал ...

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

Шаг 1 : Добавить узлы к карте, нажав на определенные точки

Включить узел, который будет создан при нажатии на определенную точку.

map.on('click', function (e) { 
    var node = []; 
    node[0] = e.latlng.lat; 
    node[1] = e.latlng.lng; 
    addNodes(node,curr_node); 
}); 

Вы должны создать текстовое поле, так что необходимые переменные могут быть напечатаны на для использования в алгоритме Дейкстры. После того, как вы закончите со всем объявлением узлов и все такое, вы можете удалить текстовое поле и все остальные функции, которые больше не понадобятся.

Шаг 2: Функция для узлов, которые будут добавлены на карте

Каждый узел, который добавляется будет иметь «Ctr + нажмите» функцию, так что вы можете выбрать другие узлы, которые будут связаны с, что узел.

Например, если вы удерживаете CTRL и нажимаете на узел A, вы можете удерживать ALT (после удаления кнопки CTRL) и выбирать узлы B, C & D, которые будут подключены к узлу A. как только вы закончите, просто удалите держатель ALT.

Это отобразит A {B: 25, C: 15, D: 32}, на текстовом поле, которое вы сможете использовать в алгоритме Дейкстры.

число 25, 15 и 32 является расстоянием между соответствующим узлом к ​​узлу A. Это рассчитывается по функции getDistanceFromLatLonInM, который я импровизированная от here.

function addNodes(polyNodes,num){ 
var marker = L.marker([polyNodes[0], polyNodes[1]]).addTo(map); 
var myIcon = L.icon({ 
    iconUrl: 'images/point.png', 
    iconSize: [16, 16], 
    iconAnchor: [8, 8], 
    popupAnchor: [-3, -76] 
}); 
marker.setIcon(myIcon); 
marker.on('click',function(e){ 
    if(ctrlPressed){ 
     curr_ctrl_pt = [polyNodes[0], polyNodes[1]]; 
     var oldText = $('#textarea_nodes').val(); 
     $('#textarea_nodes').val(oldText + num + ':{'); 
     var myIcon_2 = L.icon({ 
      iconUrl: 'images/point_c.png', 
      iconSize: [16, 16], 
      iconAnchor: [8, 8], 
      popupAnchor: [-3, -76] 
     }); 
     this.setIcon(myIcon_2); // custom marker to show that the node has been declared. This is just for your own reference 
    } 
    if(altPressed){ 
     var oldText = $('#textarea_nodes').val(); 
     $('#textarea_nodes').val(oldText + num + ':' + getDistanceFromLatLonInM(polyNodes[0], polyNodes[1],curr_ctrl_pt[0],curr_ctrl_pt[1]) + ','); 
     } 
    }) 
} 
function getDistanceFromLatLonInM(lat1,lon1,lat2,lon2) { 
    var R = 6371; // Radius of the earth in km 
    var dLat = deg2rad(lat2-lat1); // deg2rad below 
    var dLon = deg2rad(lon2-lon1); 
    var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) + 
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2) 
    ; 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c; // Distance in km 
    return (d * 1000).toFixed(1); 
} 

function deg2rad(deg) { 
    return deg * (Math.PI/180) 
} 

Я надеюсь, что это может помочь кому-то, потому что я прошел через много размышлений, чтобы добраться до этого.

Всего наилучшего!