有人知道如何在更改地图样式后重新添加图标（符号）吗？
情况如下：
我创建了一张有两个视图的地图：街景和卫星视图。在街景中，我还添加了一个图标（符号），显示某人居住的地方。当我在两个视图之间切换时，图标会消失并且不会再次出现。如何重新加载图标？
基本上我想结合以下两个例子：
更改地图样式
https://docs.mapbox.com/mapbox-gl-js/example/setstyle/
和
点击时显示弹出窗口
https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/
怎么办？
【问题讨论】：
标签： mapbox-gl-js
非常感谢您的回答！！
我查看了您的代码并将其与我的代码进行了比较，我唯一需要更改的是将 map.on('load', ...) 更改为 map.on('style.load', ... ) 并且成功了！
以下是完整代码：
HTML
<div id='openstreetmap' style='height: 420px'>
<div id="mapbox-menu">
<input id="streets-v11" type="radio" name="rtoggle" value="streets" checked="checked" />
<label for="streets">Kaart</label>
<input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
<label for="satellite">Satelliet</label>
</div>
</div>
JavaScript
// Set an access token.
mapboxgl.accessToken = '';
// Create a map object.
var map = new mapboxgl.Map({
container: 'openstreetmap',
style: 'mapbox://styles/mapbox/streets-v11',
center: [5.880299, 51.834706],
zoom: 15
});
// Set the controls.
map.addControl(new mapboxgl.NavigationControl({showCompass: false}), 'top-right');
// Create and add a list of places.
map.on('style.load', function() {
map.addSource('places', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'description':
'<strong>Header</strong><p>text</p>',
'icon': 'music'
},
'geometry': {
'type': 'Point',
'coordinates': [5.880299, 51.834706]
}
}
]
}
});
// Add a layer showing the places.
map.addLayer({
'id': 'places',
'type': 'symbol',
'source': 'places',
'layout': {
'icon-image': '{icon}-15',
'icon-size': 1.25,
'icon-allow-overlap': true
}
});
// Show a popup.
map.on('click', 'places', function(e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer.
map.on('mouseenter', 'places', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Reset the cursor.
map.on('mouseleave', 'places', function() {
map.getCanvas().style.cursor = '';
});
});
// Switch between street view and satellite view.
var layerList = document.getElementById('mapbox-menu');
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;
}
</script>
唯一的（小）问题是关闭按钮不再起作用。对此有什么想法吗？
【讨论】：
Mapbox-GL-JS 不区分作为底图一部分的图层和您添加的图层。所以如果你想“保留”额外的层，你真的只需要再次添加它们。
编写一个函数来添加您的附加层。然后，每当您更改底图时，只需再次调用该函数即可。
【讨论】：
再次感谢！！
我将以下三个块 移出函数 map.on('style.load', ...):
map.on('click', 'places', ...)
map.on('mouseenter', 'places', ...)
map.on('mouseleave', 'places', ...)
就是这样！ 谢谢你帮助我！
【讨论】：