問題描述

我正在從數據庫中加載標記，然后在標記之間繪制一條折線.我正在使用折線來計算總距離，而不必計算從標記-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;
}

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