我如何在 Mapbox GL 中创建一条线？

Question

我想在 mapbox-gl 中画一条线。像这样：

const line = new Polyline({
  points: [
    { lat: 0, lng: 0},
    { lat: 1, lng: 1},
  ]
});
line.addTo(map);

line.remove();

我到处搜索，发现这涉及 GeoJson 和图层，非常复杂。

Answer 1

原来很复杂，确实需要GeoJson和Layers。这可能会让你觉得你做错了什么。无论如何，您可以相当轻松地制作自己的多段线 class.

export interface IPolylineProps {
    id: string;
    points: Array<[number, number] | { lat: number, lng: number }>
    layout?: mapboxgl.LineLayout;
    paint?: mapboxgl.LinePaint;
}

export class Polyline {
    constructor(private props: IPolylineProps) {}

    protected map: mapboxgl.Map;

    public addTo(map: mapboxgl.Map) {
        if (this.map) {
            this.remove();
        }
        this.map = map;
        map.addLayer({
            'id': this.props.id,
            'type': 'line',
            'source': {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': this.props.points.map((point) => {
                            return Array.isArray(point) ? point : [point.lng, point.lat]
                        })
                    }
                }
            },
            'layout': this.props.layout || {
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': this.props.paint || {
                'line-color': '#888',
                'line-width': 3
            }
        })
    }

    public remove() {
        if (!this.map) { return; }
        this.map.removeLayer(this.props.id);
        this.map.removeSource(this.props.id);
        this.map = undefined;
    }
}

我如何在 Mapbox GL 中创建一条线？

How do I create a line in Mapbox GL?

mapbox-gl