Sources

Sources | Style Specification | Mapbox GL JS | Mapbox

定義要顯示的data

type屬性

vector , raster , raster-dem , geojson , image , video

Layers

how to display data on the map

type

background , fill , line , symbol , raster , circle , fill-extrusion , heatmap , hillshade , sky .

畫線

Add a line to a map using a GeoJSON source | Mapbox GL JS | Mapbox

map.current.on('load', () => {
      map.current.addSource('route', {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: [
              [-122.483696, 37.833818],
              [-122.493782, 37.833683],
            ],
          },
        },
      });
      map.current.addLayer({
        id: 'route',
        type: 'line',
        source: 'route',
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
        },
        paint: {
          'line-color': '#888',
          'line-width': 8,
        },
      });
    });