Mapbox JS :同时提供2个覆盖图(图像)
Mapbox JS :同时提供2个覆盖图(图像)
提问于 2018-06-16 17:56:44
我似乎不能在使用基本地图的同时在地图上获得2个图像覆盖。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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50886867
复制相关文章
相似问题