Mapbox JS:同时 2 个叠加层(图像)

Mapbox JS : 2 Overlays (images) at same time

我似乎无法使用基本地图同时在地图上叠加 2 个图像。 3 小时后我没有发现代码有任何问题,如此简单的事情让我发疯。我在这里错过了什么?

第一个图像叠加层(美国东北部的一个大图像)作为叠加层效果非常好 - 但第二个不显示。 (第二个应该覆盖在德克萨斯州新布朗费尔斯机场的国家气象服务办公室 - 它很小。但覆盖可以在任何地方,我只需要了解如何在页面加载时立即获得 2 个覆盖.) 编辑:地图加载时,此处的源 "secondimage" 未加载,但不会导致地图无法启动或其他任何情况,图像不存在。

代码:

<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8' />
<title>Add an image</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#TL {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='TL'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2lzNWl5N3RpMDNhYTNvcDFvNGVrZmZheCJ9.2X-n4Yk2XyxYqoPbP_IMnQ';

var map = new mapboxgl.Map({
container: 'TL',
maxZoom: 19,
minZoom: 1,
zoom: 5,
center: [-98.0284, 29.7039], 
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9'
});




map.on('load', function() {
map.addSource("firstimage", {
"type": "image",
"url": "kewx.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});


map.addLayer({
"id": "overlay",
"source": "firstimage",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
});





map.addSource("secondimage", {"type": "image",
"url": "secondimage.gif",
"coordinates": [
[-98.0387, 29.7125], 
[-98.0182, 29.7125],  
[-98.0387, 29.6927], 
[-98.0387, 29.6920]  
]})



map.addLayer({
"id": "overlay",
"source": "secondimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})






});

</script>

</body>

</html>

第二张图片的图层与第一张图层的 ID 相同:"id" : "overlay"

必须与第一个不同,例如:

map.addLayer({
"id": "overlay_two",
"source": "secondimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})