javascript - 使多段线与传单中的道路对齐

Question

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

然而，我的距离不准确，因为如果两个标记围绕一条弯曲的道路，折线只是连接它们而不是沿着道路绘制。

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

我的标记之间并没有那么远，因为我的 GPS 设备每 10 秒发送一次位置。

我找到了 leaflet-routing-machine插件，我想知道我是否可以使用它来使我的多段线捕捉到道路上？

这就是我在 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>')
                });
            }
        }); 
}

有人能给我指出正确的方向吗？

Answer 1

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

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

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

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

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

在填充 latlngArray 后立即将上述代码块放入 .success 回调函数中，应该会为您提供所需的路线。这是一个在工作中展示这一点的 fiddle :

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

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

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