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

Question

Mapbox 使用源和图层在地图上绘制圆、线等。我很难理解来源和图层 ID。正如我在示例和教程中看到的那样，图层定义了数据在地图上的显示方式，源定义了该图层的数据。

我可以在地图上有多个来源和图层。

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

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

您可以使用 feature collection.

在一个来源中包含多行

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/

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

How do I use multiple lines in a single layer in mapbox-gl-js?

javascript

mapbox-gl-js