使用leaflet+graphhopper进行路径规划

最新推荐文章于 2025-06-17 15:25:58 发布

wang720813

最新推荐文章于 2025-06-17 15:25:58 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wang720813/article/details/102982153

本文详细介绍了使用Ajax进行路径规划请求的过程，解析了从后台获取的路径数据，并将其转换为地图上可显示的路线。通过JavaScript操作，实现了路径点坐标提取、路径绘制及指令信息的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 $("#go").click(function(){
        $.ajax({

            url:"/findPath?idS="+idS+"&&idE="+idE,
            success:function(data){
                /**
                 * 后台返回的路径规划数据
                 * 可以console.log看一下
                 * 包括路径信息，指令信息等
                 * 重点：以下为同一层数据
                 **/

                var path=data.paths;
                var coordinates=[];
                for(var i =0 ; i < path.points.length;i++){
                    // coordinates.push({latLng: L.latLng(path.points[i][0],path.points[i][1])});
                    coordinates.push({lat:path.points[i][0],lng:path.points[i][1]});
                }
                var inputWaypoints=[];
                inputWaypoints.push({latLng: L.latLng(path.points[1][0],path.points[1][1])});
                inputWaypoints.push({latLng: L.latLng(path.points[(path.points.length)-1][0],path.points[(path.points.length)-1][1])});
                inputWaypoints.push({latLng: L.latLng(path.points[1][0],path.points[1][1])});
                var routes={
                    name:"",
                    coordinates:coordinates,
                    inputWaypoints:inputWaypoints,
                    instructions: _convertInstructions(path.instructions),
                    summary: {
                        totalDistance: path.distance,
                        totalTime: path.time / 1000,
                    },
                    waypoints:inputWaypoints
                };
                console.log(routes);
                L.Routing.line(routes).addTo(mymap);

            }

        })

    })