使用mapbox GL Js添加多个geoJSON源

Question

我正在尝试将另一个具有新层的源添加到地图中，地图上的类型为geoJSON(mapbox(。

我收到错误信息

错误错误：已经有一个具有此ID 的源

如何在typescript中添加除现有地理源之外的另一个具有新map.addSource的地理源？

第一个地理来源：

map.addSource("polygon", create(coordinates, 0.5, 64));
map.addLayer({
"id": "polygon",
"type": "fill",
"source": "polygon",
"layout": {},
"paint": {
'fill-color': {
type: 'identity',
property: 'color',
},
'fill-outline-color': 'rgba(200, 100, 240, 1)',
"fill-opacity": 0.090
}
});

方法：

return {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [ret]
}
}]
}
};

第二个来源：

map.addSource('places', {
'type': 'geojson',
'data': activitiesPlaces
});
var activitiesPlaces = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'name': valuesName
},
'geometry': {
'type': 'Point',
'coordinates':
valuesLon,
valuesLat
}
}
]
};

调用此源会给我错误消息

Answer 1

Map#addSource方法的第一个参数指定特定源的源ID。映射样式中的每个源ID必须是唯一的，如API参考中所述：

参数

id(字符串(要添加的源的ID。不得与现有来源冲突。

因此，为添加到映射中的每个源指定唯一的源ID将解决此错误。

Answer 2

与其添加多个源，不如尝试添加多个层。

map.addLayer({
id: 'features-fill',
type: 'fill',
source: 'features',
paint: {'fill-color': 'red', 'fill-opacity': 0.6}
});
map.addLayer({
id: 'features-fill-1',
type: 'fill',
source: 'features',
paint: {'fill-color': 'blue', 'fill-opacity': 0.8}
});

更新：

map.once('load', function loaded() {
map.batch(function batch() {
features.forEach(function eachFilter(feature, index) {
var id = 'feature-' + index;
map.addSource(id, {type: 'geojson', data: feature});
map.addLayer({
id: id + '-fill',
type: 'fill',
source: id,
paint: {'fill-color': 'red', 'fill-opacity': 0.6}
});
});
});
});

查看此问题：https://github.com/mapbox/mapbox-gl-js/issues/1484