Question

我正在尝试使用leafletjs和geojson绘制飞行路径。我将从流中获取几何体。这是我到目前为止所做的：

    let index = 0;
    let geoJsonLayer;
    let intervalFn = setInterval(function () {
        let point = trackData.features[index++];

        if(point) {

            let coords = point.geometry.coordinates;
            coords.pop();
            coords.reverse();

            geoFeature.geometry.coordinates.push(coords);
            if(map.hasLayer(geoJsonLayer)) map.removeLayer(geoJsonLayer);

            geoJsonLayer = L.geoJson(geoFeature, {
                onEachFeature: (feature, layer) => {
                    const content = feature.properties.title;
                    layer.bindPopup(content);
                }
            });
            geoJsonLayer.addTo(map);
            // console.log(coords);

        } else {
            clearInterval(intervalFn);
        }
    }, 100);

setInterval用于模拟我从流中获取几何体的部分。

现在当用户点击我需要显示路径的某些属性的路径时，我正在尝试使用onEachFeature，但它无法正常工作。我怀疑它是因为我正在删除图层（我这样做是为了提高性能）

还有其他更好的方法来实现我想要实现的目标吗？

Answer 1

您应该尝试addLatLng()

将一个给定点添加到折线。

您的geoFeature听起来只是一个功能，因此您的geoJsonLayer将包含单个图层（折线）：

let myPolyline;

geoJsonLayer.eachLayer(function (layer) {
    myPolyline = layer; // Will be done only once actually.
});

// When you receive a new point…
myPolyline.addLatLng([lat, lng]);

使用此功能，您不必每次都删除图层。

如果显示弹出窗口，则弹出窗口应保持打开状态。

演示：https://jsfiddle.net/3v7hd2vx/265/（点击按钮添加新点）

leaftletjs-动态添加点并绘制线串

1 个答案: