我似乎不能在使用基本地图的同时在地图上获得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>
发布于 2018-06-17 00:29:31
第二个图像的层与第一个层具有相同的ID:"id" : "overlay"
。
它必须与第一个不同,例如:
map.addLayer({
"id": "overlay_two",
"source": "secondimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
https://stackoverflow.com/questions/50886867
复制相似问题