Question

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

Answer 1

第二张图片的图层与第一张图片的ID相同：CRGradientNavigationBar.appearance().setBarTintGradientColors(colors)。

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

set

Mapbox JS：2个同时覆盖（图像）

1 个答案: