使折线捕捉到传单中的道路

2022-01-12 00:00:00 leaflet jquery javascript

我正在从数据库中加载标记，然后在标记之间绘制一条折线.我正在使用折线来计算总距离，而不必计算从标记-a 到标记-b 到标记-c 的距离等等.

I am loading markers from a database and then drawing a polyline between markers. I am using the polyline to calculate overall distance instead of having to calculate the distance from marker-a to marker-b to marker-c and so on.

然而，我的距离并不准确，因为如果两个标记在弯曲的道路周围，多段线只是将它们连接起来，而不是沿着道路绘制.

My distance is however inaccurate because if two markers are around a curved road, the polyline just connects them instead of drawing it along the road.

我知道这在 Google Maps API 中是可能的，但使用限制不适合我，这就是我决定使用传单的原因.

I know this is possible in Google Maps API but the usage restrictions would not suit me which is why I decided to use leaflet.

我的标记相距不远，因为我的 GPS 设备每 10 秒发送一次位置.

My markers are not so far apart, because my GPS device sends location every 10 seconds.

我找到了 leaflet-routing-machine 插件，我想知道我是否可以使用它使我的折线捕捉到道路吗?

I found the leaflet-routing-machine plugin and I was wondering if I can use this to make my polyline snap to the road?

这就是我向地图添加标记的方式:

This is how I am adding markers to my map:

function getlocationsfromdb(){
      group.clearLayers();
      latlngArray.length=0;
      var deviceid = $("#selectid").val();

        $.ajax({
            type: "POST",
            url: "functionhandlers/getlocations.php",
            data: {deviceid:deviceid,start:start,end:end},
            dataType: 'json',
            cache: false,
        })
        .success(function(response) {   
            $('input').removeClass('error').next('.errormessage').html('');
            if(!response.errors && response.result) {

                $.each(response.result, function( index, value) {
                    var latlng = L.latLng(value[7], value[8]);
                    var marker = L.circleMarker(latlng,{radius:2}).addTo(group);    
                    latlngArray.push(latlng);   

               });
                  var polyline = L.polyline(latlngArray, {color: '#605ca8'}).addTo(group);  
                  map.fitBounds(group.getBounds());
                  var distancetravelled=polyline.measuredDistance();
                  $("#distancetravelled").html(distancetravelled);


            } else {
                $.each(response.errors, function( index, value) {
                    // add error classes
                    $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
                });
            }
        }); 
}

有人可以指点我正确的方向吗?

Can someone please point me in the right direction?

推荐答案

这可以通过leaflet-routing-machine 轻松完成.您可以在初始化路由控件时将 waypoints 设置为 latlngArray:

This can be done rather easily with leaflet-routing-machine. You can just set the waypoints to your latlngArray when you initialize the routing control:

var control = L.Routing.control({
  waypoints: latlngArray,
  show: false,
  waypointMode: 'snap',
  createMarker: function() {}
}).addTo(map);

这里，show: false 使控件不显示在地图上，并且空的 createMarker 函数会覆盖路由机器创建的默认标记，而不是什么都不做(尽管当我们移除控件时，标记将被移除，这只是为了防止它们在找到路线时在屏幕上闪烁).

Here, show: false keeps the control from displaying on the map, and the empty createMarker function overrides the default markers that routing machine creates, instead doing nothing (though the markers would be removed when we remove the control, this just keeps them from flashing on the screen when a route is found).

你可以通过监听routeselected事件来提取路由机结果的所有顶点，该事件会返回一个IRoute 对象，其中包含路线的所有方向和几何形状.将 .route.coordinates 放置在一个新的 L.polyline 对象中将保留路由，因此我们可以摆脱路由控制:

You can extract all the vertices of the routing machine results by listening for the routeselected event, which will return an IRoute object that contains all the directions and geometries for the route. Placing the .route.coordinates in a new L.polyline object will keep the route around, so we can then just get rid of the routing control:

control.on('routeselected', function(e) {
  L.polyline(e.route.coordinates).addTo(group);
  map.removeControl(control);
});

在您填充 latlngArray 之后，将上述代码块放在您的 .success 回调函数中应该会给您想要的路线.这是一个在工作中展示这个的小提琴:

Placing the above code blocks within your .success callback function right after you populates your latlngArray should give you the route you want. Here's a fiddle showing this at work:

http://fiddle.jshell.net/nathansnider/ygktexbj/

另外，如果您没有将路由控件用于其他任何事情，并且不想让它完全显示(在计算路由时可能仍会出现一个小的白色控件框)，您可以简单地将其隐藏在 CSS:

Also, if you're not using the routing control for anything else and want to keep it from showing up entirely (a small white control box may still appear while the route is being calculated), you can simply hide it in CSS:

.leaflet-routing-container {
  display:none;
}

相关文章