Mapbox JS:2张(图像)同时覆盖的问题

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (471)

我似乎不能在一张地图上同时得到两个图像覆盖,使用一个基本的地图。3小时后,我没有发现代码有什么问题。我在这里错过了什么?

第一个图像覆盖层(在美国东北部有一个很大的图像)作为覆盖层工作得非常好-但是第二个没有出现。

代码

<!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}
})

扫码关注云+社区

领取腾讯云代金券