Maps Mapbox JS:2个重叠（图像）同时出现_Maps_Mapbox_Geospatial_Mapbox Gl Js

Maps Mapbox JS:2个重叠（图像）同时出现

maps mapbox

Maps Mapbox JS:2个重叠（图像）同时出现,maps,mapbox,geospatial,mapbox-gl-js,Maps,Mapbox,Geospatial,Mapbox Gl Js,我似乎无法使用基本地图同时在地图上获得两个图像覆盖。3个小时后，我看不出代码有任何问题，而如此简单的事情让我发疯。我错过了什么第一个图像覆盖（美国东北部的一个大图像）作为覆盖效果非常好，但第二个图像没有显示出来。（第二个应该覆盖在德克萨斯州新布朗费尔斯机场的国家气象局办公室上-它很小。但是覆盖可以在任何地方，我只需要了解如何在页面加载时同时获得两个覆盖。）编辑：地图加载时，这里的源“secondimage”没有加载，但这并没有导致地图无法启动或其他任何事情，图像就是不存在守则： <!D

我似乎无法使用基本地图同时在地图上获得两个图像覆盖。3个小时后，我看不出代码有任何问题，而如此简单的事情让我发疯。我错过了什么

第一个图像覆盖（美国东北部的一个大图像）作为覆盖效果非常好，但第二个图像没有显示出来。（第二个应该覆盖在德克萨斯州新布朗费尔斯机场的国家气象局办公室上-它很小。但是覆盖可以在任何地方，我只需要了解如何在页面加载时同时获得两个覆盖。）编辑：地图加载时，这里的源“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>


添加图像
身体{
保证金：0；
填充：0；
}
#热释光{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
mapboxgl.accessToken='pk.eyj1ijoizm9ybxvsytqilcjhijoi2lznl5n3rpmdnhytnvcdfvngvrzmzhecj9.2X-n4yk2xyxyxyyqopbp_IMnQ'；
var map=new mapboxgl.map({
容器：“TL”，
maxZoom:19，
minZoom:1，
缩放：5，
中心：[-98.0284,29.7039]，
风格：'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9'
});
map.on（'load'，function（））{
map.addSource（“firstimage”{
“类型”：“图像”，
“url”：“kewx.gif”，
“坐标”：[
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
“id”：“覆盖”，
“来源”：“firstimage”，
“类型”：“光栅”，
“油漆”：{
“光栅不透明度”：0.85
}
});
addSource（“secondimage”，类型“：“image”，
“url”：“secondimage.gif”，
“坐标”：[
[-98.0387, 29.7125], 
[-98.0182, 29.7125],  
[-98.0387, 29.6927], 
[-98.0387, 29.6920]  
]})
map.addLayer({
“id”：“覆盖”，
“来源”：“第二图像”，
“类型”：“光栅”，
“绘制”：{“光栅不透明度”：0.85}
})
});

第二个图像的图层与第一个图层的ID相同：

“ID”：“叠加”

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

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

非常感谢。我在谷歌地图上做得很好，但我不得不改变，因为现在的定价太疯狂了。我认为你的评论很有用，但我还是新的，所以我不认为它会出现。明白了！我只是在学习这里的情况。你也帮了我。你实际上回答了我的两个问题，我非常感谢你。从Google切换到Mapbox是一场噩梦，但我对javascript的使用越来越好。