Mapbox Javascript API 中的以下链接描述了如何在 map 上添加图像叠加层，而且非常简单:
https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/
这行得通!但是，我正在尝试在自定义 map 上添加图像叠加层。我想在不创建图 block 或类似内容的情况下执行此操作。
我找不到在卫星 map 上叠加图像的方法(这是我的目标，只是卫星 map 上的天气雷达 GIF)，但我似乎无法在任何其他 map 上使用它上面链接中的那个!我该怎么做呢？我不想要他们在示例中使用的 map 。我只是想将其覆盖在任何自定义 map 上，而不会像他们的示例中那样出现不必要的复杂性。感谢您的帮助。
编辑:这是代码 - 我在这里发表评论后尝试更改它，但我仍然做错了。
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css'
rel='stylesheet' />
</head>
<body>
<div id='map' style='width: 100%; height: 100%;'></div>
<script>
mapboxgl.accessToken =
'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2lzNWl5N3RpMDNhYTNvcDFvNGVrZmZheCJ9.2X-
n4Yk2XyxYqoPbP_IMnQ';
var map = new mapboxgl.Map({
container: 'map',
zoom: 4,
style: 'mapbox://styles/mapbox/satellite-v9',
center: [-80.425, 37.437]
});
map.addSource("myImageSource", {"type": "image",
"url": "radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]})
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
</script>
</body>
</html>
最佳答案
我对有用的现有答案所做的编辑未被接受，因此将其发布在自己的答案中。
您必须等到样式完成加载后才能添加图像源和图层。以下代码正在运行:
请注意:
如果您将 HTML 和 GIF 文件存储在本地，则可能由于某些浏览器限制而无法显示 GIF。你可以试试在这方面没有 Chrome 严格的 Firefox 浏览器。
<!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;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2lzNWl5N3RpMDNhYTNvcDFvNGVrZmZheCJ9.2X-n4Yk2XyxYqoPbP_IMnQ';
var map = new mapboxgl.Map({
container: 'map',
maxZoom: 5.99,
minZoom: 4,
zoom: 5,
center: [-75.789, 41.874],
style: 'mapbox://styles/mapbox/satellite-v9'
});
map.on('load', function() {
map.addSource("myImageSource", {
"type": "image",
"url": "radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
});
});
</script>
</body>
</html>
关于javascript - 如何在 Mapbox Javascript 中添加简单的图像叠加层？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50874220/