在小册子中选择两个标记并在它们之间画线

Question

我对单张非常陌生。

我在地图上的小册子上绘制了多个标记/圆圈标记。

现在我必须在两个标记之间绘制线条//我选择标记的时候。

任何人都可以帮助做到这一点。

var map = L.map('map').setView([51.49521, -0.10062], 13); 
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { 
     maxZoom: 18, 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' 
    }).addTo(map); 

// get all 6 points 
    var points = new Array(
[51.49346, -0.11518], 
[51.49827, -0.06763], 
[51.48331, -0.08154], 
[51.52284, -0.09974], 
[51.51932, -0.06695], 
[51.50949, -0.1363] 
    ); 

    // centerpoint 
    var centerPoint = new L.LatLng(51.49521, -0.10062); 
    var marker1 = L.marker([51.49521, -0.10062]).addTo(map); 


    // adding allo points to map 
    for (var i =0 ; i < points.length; i++) 
    { 
    // here I can use marker also(if solution is possible with markers) 
L.circleMarker([points[i][0],points[i][1]]).addTo(map); 
var point = new L.LatLng(points[i][0],points[i][1]); 
var pointList = [point, centerPoint]; 

    var firstpolyline = new L.Polyline(pointList, { 
    color: 'red', 
    weight: 5, 
    smoothFactor: 1 

    }).addTo(map); 
    } 

Answer 1

您必须存储选择（但它可以是polyline点或标志在您的标记）。当您选择两个或更多标记时，您必须为您添加点polyline - 它会在地图上绘制线条，否则您必须从polyline中删除点。查看详情polyline：http://leafletjs.com/reference.html#polyline。

例如参见下面的代码：

// Init map 
var map = L.map('map').setView([53.902257, 27.561640], 13); 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); 

// Init selection and lines logic 
var selection = []; 
var polyline = L.polyline([], {color: 'red'}).addTo(map); 

var onClick = function() { 
    var index = selection.indexOf(this); 
    if (index !== -1) { 
     this.setRadius(10); 
     selection.splice(index, 1); 
     polyline.spliceLatLngs(index, 1); 
    } else { 
     this.setRadius(25); 
     selection.push(this); 
     polyline.addLatLng(this.getLatLng()) 
    } 
}; 

// Init circle markers 
L.circleMarker([53.90, 27.56]).on('click', onClick).addTo(map); 
L.circleMarker([53.92, 27.60]).on('click', onClick).addTo(map); 
L.circleMarker([53.88, 27.60]).on('click', onClick).addTo(map); 

// Init selection droping on ESC pressed 
L.DomEvent.on(document, 'keydown', function (e) { 
    if (e.keyCode === 27) { 
     var oldSelection = selection.slice(0); 
     for (var i = 0, l = oldSelection.length; i < l; i++) { 
      oldSelection[i].fire('click'); 
     } 
    } 
}); 

UPD：

它的类比，看到更新的代码：

var map = L.map('map').setView([51.49521, -0.10062], 13); 
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' 
}).addTo(map); 

// get all 6 points 
var points = [ 
    [51.49346, -0.11518], 
    [51.49827, -0.06763], 
    [51.48331, -0.08154], 
    [51.52284, -0.09974], 
    [51.51932, -0.06695], 
    [51.50949, -0.1363] 
]; 

// polyline 
var selection = []; 
var polyline = new L.Polyline([], { 
    color: 'red', 
    weight: 5, 
    smoothFactor: 1 
}).addTo(map); 

var changeMarkerState = function (marker, select) { 
    if (marker instanceof L.CircleMarker) { 
     if (select) { 
      marker.setRadius(25); 
     } else { 
      marker.setRadius(10); 
     } 
    } 
    if (marker instanceof L.Marker) { 
     if (select) { 
      marker.options.title = 'selected'; 
     } else { 
      marker.options.title = 'unselected'; 
     } 
     marker.setIcon(new L.Icon.Default()); 
    } 
}; 

var onClick = function() { 
    var index = selection.indexOf(this); 
    if (index !== -1) { 
     changeMarkerState(this, false); 
     selection.splice(index, 1); 
     polyline.spliceLatLngs(index, 1); 
    } else { 
     changeMarkerState(this, true); 
     selection.push(this); 
     polyline.addLatLng(this.getLatLng()) 
    } 
}; 

// centerpoint 
var centerPoint = new L.LatLng(51.49521, -0.10062); 
var marker1 = L.marker([51.49521, -0.10062], 
     {title: 'unselected'}).on('click', onClick).addTo(map); 


// adding allo points to map 
for (var i = 0, l = points.length; i < l; i++) 
{ 
    // here I can use marker also(if solution is possible with markers) 
    L.circleMarker(points[i]).on('click', onClick).addTo(map); 
}