問題描述

我正在從數(shù)據(jù)庫中加載標(biāo)記，然后在標(biāo)記之間繪制一條折線.我正在使用折線來計(jì)算總距離，而不必計(jì)算從標(biāo)記-a 到標(biāo)記-b 到標(biāo)記-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.

然而，我的距離并不準(zhǔn)確，因?yàn)槿绻麅蓚€(gè)標(biāo)記在彎曲的道路周圍，多段線只是將它們連接起來，而不是沿著道路繪制.

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.

我的標(biāo)記相距不遠(yuǎn)，因?yàn)槲业?GPS 設(shè)備每 10 秒發(fā)送一次位置.

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?

這就是我向地圖添加標(biāo)記的方式:

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

有人可以指點(diǎn)我正確的方向嗎?

Can someone please point me in the right direction?

推薦答案

這可以通過leaflet-routing-machine 輕松完成.您可以在初始化路由控件時(shí)將 waypoints 設(shè)置為 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 函數(shù)會(huì)覆蓋路由機(jī)器創(chuàng)建的默認(rèn)標(biāo)記，而不是什么都不做(盡管當(dāng)我們移除控件時(shí)，標(biāo)記將被移除，這只是為了防止它們?cè)谡业铰肪€時(shí)在屏幕上閃爍).

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

你可以通過監(jiān)聽routeselected事件來提取路由機(jī)結(jié)果的所有頂點(diǎn)，該事件會(huì)返回一個(gè)IRoute 對(duì)象，其中包含路線的所有方向和幾何形狀.將 .route.coordinates 放置在一個(gè)新的 L.polyline 對(duì)象中將保留路由，因此我們可以擺脫路由控制:

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 回調(diào)函數(shù)中應(yīng)該會(huì)給您想要的路線.這是一個(gè)在工作中展示這個(gè)的小提琴:

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/

另外，如果您沒有將路由控件用于其他任何事情，并且不想讓它完全顯示(在計(jì)算路由時(shí)可能仍會(huì)出現(xiàn)一個(gè)小的白色控件框)，您可以簡單地將其隱藏在 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;
}

這篇關(guān)于使折線捕捉到傳單中的道路的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！