Question

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

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

line.remove();

在我搜索的任何地方，涉及GeoJson和Layers的情况都非常复杂。

Answer 1

事实证明，这非常复杂，并且确实需要GeoJson和Layers。这可能会使您看起来好像做错了什么。无论如何，您都可以轻松创建自己的Polyline类。

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中创建线？

1 个答案: