leaflet - 选择两个标记并在传单中在它们之间画线

Question

我对传单很陌生。

我在传单中的 map 上绘制了多个标记/圆圈标记。

现在，当我选择两个标记//圆标记时，我必须在它们之间画线。

谁能帮忙做这件事。

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 - 它会在 map 上绘制线，否则您必须从 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');
        }
    }
});

更新:

以此类推，查看更新后的代码:

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