Leaflet中最近顶点和最短路径functino的问题

如何解决Leaflet中最近顶点和最短路径functino的问题

我是 Leaflet 的新用户，我面临着通过 pgrouting、geoserver 和 Leaflet 作为前端应用程序来获得最短路径的挑战。我跟着这个教程 pgRouting + Geoserver + Leaflet JS 作为参考，我在 geoserver 上发布了图层，并按照视频中的说明成功地为每个函数（最近的顶点、最短路径）创建了 sql 视图。

店铺名称：路由 图层名称：nearest_vertex 图层名称：shortest_path

我在最后一步的问题，在传单js文件中我不知道问题的原因是什么以及如何解决。

var geoserverUrl = "http://localhost:8080/geoserver";
var selectedPoint = null;

var source = null;
var target = null;

// initialize our map
var map = L.map("map",{
    center: [30.00073607,31.40345240],zoom: 16 //set the zoom level
});

//add openstreet map baselayer to the map
var OpenStreetMap = L.tileLayer(
    "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
        maxZoom: 19,attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }
).addTo(map);

// empty geojson layer for the shortes path result
var pathLayer = L.geoJSON(null);

// draggable marker for starting point. Note the marker is initialized with an initial starting position
var sourceMarker = L.marker([30.00572470,31.38871190],{
    draggable: true
})
    .on("dragend",function(e) {
        selectedPoint = e.target.getLatLng();
        getVertex(selectedPoint);
        getRoute();
    })
    .addTo(map);

// draggbale marker for destination point.Note the marker is initialized with an initial destination positon
var targetMarker = L.marker([30.00476310,31.39870580],function(e) {
        selectedPoint = e.target.getLatLng();
        getVertex(selectedPoint);
        getRoute();
    })
    .addTo(map);

// function to get nearest vertex to the passed point
function getVertex(selectedPoint) {
    var url = `${geoserverUrl}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=routing:nearest_vertex&outputformat=application/json&viewparams=x:${
        selectedPoint.lng
    };y:${selectedPoint.lat};`;
    $.ajax({
        url: url,async: false,success: function(data) {
            loadVertex(
                data,selectedPoint.toString() === sourceMarker.getLatLng().toString()
            );
        }
    });
}

// function to update the source and target nodes as returned from geoserver for later querying
function loadVertex(response,isSource) {
    var features = response.features;
    map.removeLayer(pathLayer);
    if (isSource) {
        source = features[0].properties.id;
    } else {
        target = features[0].properties.id;
    }
}

// function to get the shortest path from the give source and target nodes
function getRoute() {
    var url = `${geoserverUrl}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=routing:shortest_path&outputformat=application/json&viewparams=source:${source};target:${target};`;

    $.getJSON(url,function(data) {
        map.removeLayer(pathLayer);
        pathLayer = L.geoJSON(data);
        map.addLayer(pathLayer);
    });
}

getVertex(sourceMarker.getLatLng());
getVertex(targetMarker.getLatLng());
getRoute();