传单 - 如何在拖放时匹配标记和折线 [英] Leaflet - How to match marker and polyline on drag and drop

问题描述

我有一个带有leafletJS 的项目.例如，我在地图中有 2 个点(A，B).我将其显示为 2 个标记我必须画一条从 A 到 B 的折线.我移动了标记 A，我想要标记 A 的折线头部与标记 A 匹配(移动跟随标记 A).我怎样才能做到这一点?对不起，我的英语不好.非常感谢.

I have a project with leafletJS. For example, I have 2 points (A, B) in map. I display it as 2 Markers I must draw a polyline from A to B. I moved marker A and I want to the head of polyline of marker A match to marker A (moved follow marker A). How can I do this? Sorry for my bad English. Thanks all very much.

Truong M.

推荐答案

给定以下 L.Latlng's, L.Marker's 和 L.折线:

Given the following L.Latlng's, L.Marker's and L.Polyline:

var a = new L.LatLng(-45, -90),
    b = new L.LatLng(45, 0),
    c = new L.LatLng(-45, 90);

var marker_a = new L.Marker(a, {draggable: true}).addTo(map),
    marker_b = new L.Marker(b, {draggable: true}).addTo(map),
    marker_c = new L.Marker(c, {draggable: true}).addTo(map);

var polyline = new L.Polyline([a, b, c]).addTo(map);

您需要将事件监听器和回调附加到您的 L.Marker 中.您可以自动执行此操作，但我暂时保持简单:

You'll need to attach eventlisteners and callbacks to your L.Marker's. You could automate this, but i'll keep it simple for now:

marker_a
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);

marker_b
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);

marker_c
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);

现在在 dragstart 上，您需要从与标记的 latlng 对应的折线中找到 latlng，并将其键存储在标记实例中，以便以后使用:

Now on dragstart you'll need to find the latlng from the polyline which corresponds with your marker's latlng and store it's key in your marker instance so you can use it later on:

function dragStartHandler (e) {

    // Get the polyline's latlngs
    var latlngs = polyline.getLatLngs(),

        // Get the marker's start latlng
        latlng = this.getLatLng();

    // Iterate the polyline's latlngs
    for (var i = 0; i < latlngs.length; i++) {

        // Compare each to the marker's latlng
        if (latlng.equals(latlngs[i])) {

            // If equals store key in marker instance
            this.polylineLatlng = i;
        }
    }
}

现在您知道折线的 latlng 的键，您可以在拖动事件上拖动标记时更改它:

Now you know the key of the polyline's latlng you can change it when dragging the marker on the dragevent:

function dragHandler (e) {

    // Get the polyline's latlngs
    var latlngs = polyline.getLatLngs(),

        // Get the marker's current latlng
        latlng = this.getLatLng();

    // Replace the old latlng with the new
    latlngs.splice(this.polylineLatlng, 1, latlng);

    // Update the polyline with the new latlngs
    polyline.setLatLngs(latlngs);
}

只是为了干净整洁删除dragend上存储的密钥:

Just to be clean and tidy remove the stored key on dragend:

function dragEndHandler (e) {

    // Delete key from marker instance
    delete this.polylineLatlng;
}

就是这样.这是 Plunker 上的一个工作示例:http://embed.plnkr.co/SJRec3/preview

That's it. Here's a working example on Plunker: http://embed.plnkr.co/SJRec3/preview

这篇关于传单 - 如何在拖放时匹配标记和折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！