将标记与Mapbox GL中的多线线连接

Question

我正在使用Mapbox GL开发Web应用程序，更具体地说，它对React的绑定，React Map-Gl。

该应用程序的计划功能之一是添加标记并连接它们。

但是，我很难连接标记。

当我单击标记时，我想开始绘制线路，当我单击其他位置时，将断点添加到线路上，然后在单击另一个标记时完成行。

我可以用什么？

Answer 1

我也在从事同样的工作，您可以使用deck.gl在地图上绘制线路，也可以使用Geojson。

Answer 2

我最终要做的是使用Editablegeojsonlayer以及标记的功能以及它们之间的连接，如下所示：

data: {
    type: "FeatureCollection",
    features: markers.flatMap((marker) => {
        // Map markers
        let features = [
            {
                geometry: {
                    type: "Point",
                    coordinates: marker.coordinates
                },
                type: "Feature",
                node: marker
            }
        ];

        // Map connections
        if (marker.connections.length > 0) {
            features = features.concat(
                marker.connections.flatMap((endMarker) => [
                    {
                        geometry: {
                            type: "LineString",
                            coordinates: [
                                marker.coordinates,
                                endMarker.coordinates
                            ]
                        },
                        type: "Feature"
                    }
                ])
            );
        }

        return features;
    })
}