Mapbox GL-JS：使用外部.js文件

Question

我有一个简单的javascript函数，可将geoJSON多边形添加到我的地图中。如何在地图标签下获得多边形？我已经读过This tutorial by Mapbox，但是我试图在JS函数而不是主页中执行此操作，由于某种原因，我无法使它正常工作。我已经多次使用 firstSymbolId 尝试了他们的示例，导致以下代码无法正常工作。我想了解为什么。下面也是我拍摄的示例屏幕截图（您可以看到，我希望城市标签位于多边形上方。）

function addSPC_CONVECTIVE_toB(){

var layers = map.getStyle().layers;
var firstSymbolId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol') {
firstSymbolId = layers[i].id;
break;
}
}

map.addLayer({
 'id': 'SPC_DAY_1_CONVECTIVE_GENERAL_THUNDER',

'type': 'fill',
'source': {
'type': 'geojson',
'data': 'json/SPC_DAY_1_CONVECTIVE_GENERAL_THUNDER.json'
},
'layout': {},
  'paint': {
 'fill-color': 'rgba(192, 232 ,192, 0.2)',
 'fill-outline-color': 'rgba(192, 232 ,192, 0.1)'
   }

}, firstSymbolId);
});


}

（下面是现在的样子，尽管上面的代码实际上甚至没有加载地图。这是非常错误的。）

编辑：下图显示了多边形如何仍然位于文本标签上方，这是我想避免的。