Javascript 如何在传单中实时制作线串，每个点上都有标记？

我想要下面的图片： 不知道在哪里定义linestring。如果有人能指引我，那就太好了。此外，我想更改linestring的颜色。 这是我的密码：-

function createRealtimeLayer(url, container) {
    return L.realtime(url, {
        interval: 5 * 1000,
        getFeatureId: function(f) {
            return f.properties.id;
        },
        cache: true,
        container: container,
        onEachFeature(f, l) {
            date = f.properties.date;
            l.bindPopup(date);
            l.on("mouseover", function () {
                l.openPopup();
            });
            l.on("mouseout", function () {
                l.closePopup();
            });
        }
    });
}
    realtime1 = createRealtimeLayer('getPosition').addTo(map),
    realtime2 = createRealtimeLayer('getUserPositionHistory').addTo(map);

L.control.layers(null, {
    'Current': realtime1,
    'History': realtime2
}).addTo(map);

realtime1.once('update', function() {
    map.fitBounds(realtime1.getBounds(), {maxZoom: 18});
});

---

要在每个点上设置标记，请将其添加到onEachFeature：

if(layer instanceof L.Path){      
      l.getLatLngs().forEach(function(latlng){
        L.marker(latlng).addTo(map);
      })
    }

如果要为线条着色，必须像这样拆分线条，但不要将geojson图层附加到地图上：

if(layer instanceof L.Path){
      var lastlatlng = null;
      layer.getLatLngs().forEach(function(latlng, i){
        if(lastlatlng !== null){
             L.polyline([lastlatlng,latlng],{color: getColor(i)}).addTo(map);
        }
        lastlatlng = latlng;
      })
    }

---

更新

询问者希望从geojson创建逐点直线

可以使用

poly.addLatLng（latlng）

---

谢谢您的时间，但我可以在每个点显示标记，但如何添加点并将其显示为像轨迹一样的线串。那么，这就是适合您的库，但问题是数据是正确的。它是这样的：{“类型”：“特征集合”，“特征”：[{“类型”：“特征”，“几何体”：{“类型”：“点”，“坐标”：[77.206323,28.564685]}，“属性”：{“日期”：“02-12-2019 02:48:59”，“id”：1}，{“类型”：“特征”，“几何体”：{“类型”：“点”，“坐标”：[78.206323,29.564685]}，“属性”：{“日期”：“02-12-2019 02:49:01”，“id”：2}}谢谢。我将尝试实施它。请帮助。我收到此错误。添加不是一个函数

var oldcolor = null;
var polys = [];

function onEachFeature(feature, layer) {
    if(feature.properties.color && oldcolor != feature.properties.color){
        oldcolor = feature.properties.color;

      var lastlatlng = [];

      //This block gets the last latlng from the line before. so you have one line.
      // If you  want to seperate the lines by color, deleted this block
      if( polys.length > 0){
        var lastpoly = polys[polys.length-1];
        if(lastpoly.getLatLngs() && lastpoly.getLatLngs().length > 0){
          var lastlatlngs = lastpoly.getLatLngs();
          lastlatlng = lastlatlngs[0][lastlatlngs[0].length-1];
        }
      }
      //End of block

      polys.push(L.polyline([lastlatlng],{color: oldcolor}).addTo(mymap));
    }

    var poly = polys[polys.length-1]; //get last line
    poly.addLatLng(layer.getLatLng());
}