Mapbox JS：同时 2 个叠加层（图像）答案

【问题标题】：Mapbox JS : 2 Overlays (images) at same timeMapbox JS：同时 2 个叠加层（图像）
【发布时间】：2018-06-16 09:56:43
【问题描述】：

我似乎无法使用基本地图同时在地图上获得 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>

【问题讨论】：

标签： maps mapbox geospatial mapbox-gl-js

【解决方案1】：

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

它必须与第一个不同，例如：

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

【讨论】：

谢谢！我在谷歌地图上非常擅长这个，但我不得不换了，因为现在定价太疯狂了。我认为您的评论很有用，但我还是新手，所以我认为它不会出现。
知道了！我只是在学习这里的工作原理。你也帮过我。您实际上回答了我的 2 个问题，我非常感谢您。从 Google 切换到 Mapbox 是一场噩梦，但我在使用 javascript 方面做得更好。