如何在 mapbox-gl-js 的单层中使用多条线？

Question

Mapbox 在map 上使用source 和layer 画圆、线等。我很难理解source 和layer id。 正如我在示例和教程中看到的那样，层定义了数据应如何显示在 map 上，源定义了该层的数据。

我可以在 map 上有多个源和层。

我想在 map 上创建多个线层，所以我这样做了。

map.addSource('11111111',{
                'type':'geojson',
                'data':{
                    'type':'Feature',
                    'properties':{},
                    'geometry':{
                        'type':'LineString',
                        'coordinates':[
                            [76.993894,31.781929]
                        ]
                    }
                }
            });
    
            map.addLayer({
                'id': '11111111',
                'type': 'line',
                'source': '11111111',
                'layout': {
                'line-join': 'round',
                'line-cap': 'round'
                },
                'paint': {
                'line-color': 'red',
                'line-width': 4
                }
            });

这里的 addSource 方法采用源 ID (11111111) 。 我如何在一层中添加多个线源，因为每个源必须具有唯一的 ID。

Answer 1

通过使用要素集合，您可以在一个源中包含多行。

map.addSource('multiple-lines-source', {
  'type': 'geojson',
  'data': {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'properties': {},
        'geometry': {
          'type': 'LineString',
          'coordinates': [
            [-104.4140625, 43.32517767999296],
            [-58.35937499999999, -9.79567758282973]
          ]
        }
      },
      {
        'type': 'Feature',
        'properties': {},
        'geometry': {
          'type': 'LineString',
          'coordinates': [
            [20.390625, 10.487811882056695],
            [15.468749999999998, 49.83798245308484]
          ]
        }
      }
    ]
  }
});

这是一个工作示例： https://jsfiddle.net/oh8Ld1ry/1/