在Leaflet中绘制一个跟随移动标记的折线。

Question

我有一个问题，我正在使用Leaflet并每2秒获得一次GPS坐标，与地图上的移动对象相关联，我成功地基于每2秒的GPS坐标创建了一个移动标记，但是我无法绘制跟随标记的折线。您有任何想法吗？谢谢。

     var redraw = function(p3DMessage){

            lat = parseFloat(p3DMessage.lat);
            lng = parseFloat(p3DMessage.lon);
            console.log(lat)
            console.log(lng)


            if (theMarker != undefined) {
                  mymap.removeLayer(theMarker);
            };


            var polylinePoints = [[lat, lng]];

            //failed to draw polyline...
            //L.polyline([[lat, lng]]).addTo(mymap);      

            theMarker = L.marker([lat,lng]).addTo(mymap);  
        };

- bluewonder

Answer 1

Polyline.addLatLng 可以让你向现有的折线添加一个点。

因此，建立你的地图，添加折线，并在每个绘制函数的刻度中添加一个点。请注意，您也可以重复使用您的标记。类似于：

var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = null;
var line = L.polyline([]).addTo(map);

function redraw (p3DMessage) {
    var lat = parseFloat(p3DMessage.lat),
        lng = parseFloat(p3DMessage.lon),
        point = {lat: lat, lng: lng};

    if (!marker) {
        marker = L.marker(point).addTo(map)
    }

    line.addLatLng(point);
    marker.setLatLng(point);
}

还有一个演示

var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 15);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var points = [
        {lat: 48.857, lon:2.2922926},
        {lat: 48.858, lon:2.291},
        {lat: 48.859, lon:2.293},
        {lat: 48.860, lon:2.294},
        {lat: 48.862, lon:2.294},
    ];

    var marker = null;
    var line = L.polyline([]).addTo(map);

    function redraw(point) {
        if (!marker) {
            marker = L.marker(point).addTo(map)
        }
        line.addLatLng(point);
        marker.setLatLng(point);
    }

    function update() {
        if (points.length) {
            redraw(points.shift());
            setTimeout(update, 1000);
        }
    }
    setTimeout(update, 1000);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.js"></script>

<div id='map'></div>

- nikoshr

---

非常感谢您的帮助，我现在有了想法，但是我只有一个问题，就是当程序开始时，我没有出发坐标（在您的示例中是p0），我会得到第一个坐标，并从那里画线。所以我必须在重绘函数中重新初始化标记和折线吗？提前致谢。 - bluewonder

@bluewonder 你可以从一个空的折线和一个空的标记开始。我已经修改了我的答案，展示了一种可能的实现方式。 - nikoshr

非常感谢你的帮助。我会查看并修改我的代码。 - bluewonder