【问题标题】:Leaflet JS: quickest path with custom pointsLeaflet JS:自定义点的最快路径
【发布时间】:2021-11-03 11:47:57
【问题描述】:

我正在开展一个项目,我可以让用户在我客户的建筑物中导航。建筑物内的路径绝对没有在 OSM 或谷歌等地图中定义。

是否有一个插件可以定义路径上的每个 point,当我设置 startend 点时,它会找到最短路径?

图像以绿色显示声明的点、开始(黄色)和结束(红色)点。插件或算法应链接相关点以形成最短路线(以紫色显示)

非常感谢!如果那里没有插件,我可能必须自己创建一个。

PS。我正在使用 Leaflet JS,我不依赖 OSM 或 Google 地图,因为我有自己的自定义图像作为图层

【问题讨论】:

    标签: leaflet


    【解决方案1】:

    好的,感谢andrewhayward 的 Dijkstra 算法的 JavaScript 实现,可以在here 找到它。

    除此之外,这就是我所做的......

    这些函数只是为了帮助我推导节点和节点之间的距离,以便在 Dijkstra 算法中使用:

    第 1 步:通过单击特定点将节点添加到地图

    当您单击特定点时启用要创建的节点。

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

    您必须创建一个文本区域,以便可以打印必要的变量以供您在 Dijkstra 算法中使用。一旦你完成了所有节点声明和所有这些,你可以删除 textarea 和所有这些不再需要的其他函数。

    第 2 步:将添加到地图上的节点的功能

    添加的每个节点都将具有“ctr+click”功能,以便您可以选择将链接到该节点的其他节点。

    例如,如果您按住 CTRL 并单击节点 A,您可以按住 ALT(移除 CTRL 按钮后)并选择将连接到节点 A 的节点 B、C 和 D。完成后,只需删除按住 ALT 按钮。

    这将在文本区域显示 A{B:25,C:15,D:32}, 供您在 Dijkstra 算法中使用。

    数字 25、15 和 32 是各个节点到节点 A 之间的距离。这是由我从 here 即兴创作的 getDistanceFromLatLonInM 函数计算得出的。

    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)
    }
    

    我希望这可以帮助那里的人,因为我经过了很多思考才能做到这一点。

    一切顺利!

    【讨论】:

      猜你喜欢
      • 2016-11-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-16
      相关资源
      最近更新 更多