Javascript Mapbox GL-高亮显示要素和queryRenderedFeatures（），同时允许更改底图样式

我需要能够使用Mapbox GL高亮显示边界框中的要素，如中所示。我的地图还需要能够更改样式层，例如从

mapbox://styles/mapbox/light-v10

至

mapbox://styles/mapbox/satellite-v9

。这一直是一个挑战，因为Mapbox GL不支持“底图”的概念，例如传单

我的解决方案，经过大量搜索（我相信我最终遵循了github发布的解决方案），涉及：

使用

map.on（'style.load'）

而不是示例中所示的

map.on（'load'）

（我相信

map.on（'style.load'）

不是他们公共API的一部分，但我可能是错的）和

迭代源/层数组（请参见下面代码中的

vectorTileLayers

变量），以便在每次加载新样式时向地图添加矢量平铺层

这在某些方面对我来说非常有效——我可以将任意数量的矢量平铺源添加到阵列中，如果基础样式发生更改，它们都会被添加回贴图中。但是，如果源/层以数组形式添加到地图中并按如下所示进行迭代，则无法按照Mapbox提供的示例添加查询功能。边界特性可以工作，但是当它被绘制和释放时，我通过运行下面的代码段看到了错误

这是我实际问题的简化版本，允许其他人运行和操作代码。实际上，我正在添加自己的矢量平铺层（存储在

vectorTileLayers

数组中，该数组工作正常。当我尝试添加另一个具有相同源代码和不同样式的层时，如示例所示，我无法实际查询所需的层。如有任何帮助，将不胜感激。仅供参考-此代码片段中不会显示toggleable layers按钮，但解决这个问题并不重要

mapboxgl.accessToken='pk.eyj1ijoiamftzxljc21pdggilcjhijoi2p4ntrzdtczmda1dzrhbxbzdmfpzv6ecj9.-k7Um-xmyyyy4xhndn6kdvpg'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v10',
中间：[-9838.88]，
minZoom:2，
缩放：3
});
变量vectorTileLayers=[{
资料来源：{
键入：“向量”，
网址：'mapbox://mapbox.82pkq93d'
},
图层：{
id:'县'，
类型：“填充”，
资料来源：“县”，
“源层”：“原始”，
油漆：{
“填充轮廓颜色”：“rgba（0,0,0,0.1）”，
“填充颜色”：“rgba（0,0,0,0.1）”
},
}
},
{
资料来源：{
键入：“向量”，
网址：'mapbox://mapbox.82pkq93d'
},
图层：{
id:'突出显示的县'，
类型：“填充”，
资料来源：“县”，
“源层”：“原始”，
油漆：{
“填充轮廓颜色”：“484896”，
“填充颜色”：“6e599f”，
“填充不透明度”：0.75
},
过滤器：['in'，'FIPS'，']
}
}
]
map.on（'style.load'，function（）{
对于（变量i=0；iError: There is already a source with this ID

map.on('style.load', function () {
            for (var i = 0; i < vectorTileLayers.length; i++) {
                var tileLayer = vectorTileLayers[i];
                if (!map.getSource(tileLayer.layer.source,)) //FIX
                    map.addSource(tileLayer.layer.source, tileLayer.source);
                map.addLayer(tileLayer.layer);
            }

            var layerList = document.getElementById('basemapmenu');
            var inputs = layerList.getElementsByTagName('input');

            function switchLayer(layer) {
                var layerId = layer.target.id;
                map.setStyle('mapbox://styles/mapbox/' + layerId);
            }
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].onclick = switchLayer;
            }

        });