在 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;
    })
}