如何在Mapbox Javascript中添加简单的图像叠加层? [英] How do I add a simple image overlay in Mapbox Javascript?
问题描述
Mapbox Javascript API中的以下链接描述了如何在地图上添加图像叠加层，这很简单:
The following link in the Mapbox Javascript API describes how to add an image overlay on a map, and it is very simple :
https://www.mapbox. com/mapbox-gl-js/example/image-on-a-map/
这有效！但是，我试图在自定义地图上添加图像叠加层.我想这样做而不创建图块或类似的东西.
This works! However, I am trying to add an image overlay on a custom map. I am wanting to do this without creating tiles or anything of the like.
我找不到在卫星地图上叠加图像的方法(这是我的目标，只是在卫星地图上设置了天气雷达GIF)，但是我似乎无法在其他任何地图上使用此方法上面链接中的那个！我该怎么做呢?我不希望他们在示例中使用的地图.我只是想在没有任何复杂性的情况下将其覆盖在任何自定义地图上，就像他们在示例中那样.谢谢您的帮助.
I can't find a way to overlay an image on a satellite map (that's my goal, just a weather radar GIF on a satellite map), but I can't seem to get this to work on any other map besides the one in the link above! How do I do this? I don't want the map they are using in their example. I just would like to overlay this on any custom map without needless complexity as they have in their example. Thank you for any help.
这是代码-我在这里发表评论后尝试更改它，但我仍然做错了事.
EDIT : This is the code - I tried to change it after a comment here but I still am doing something wrong.
<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>
推荐答案
我对现有的有帮助的答案所做的编辑未被接受，因此将其发布在自己的答案中.
在添加图像源和图层之前，必须等到样式加载完成.以下代码可以正常工作:
You have to wait until the style is done loading before adding the image source and layer. The following code is working:
请注意:
如果要在本地存储HTML和GIF文件，可能由于某些浏览器限制而未显示GIF.您可以尝试在这方面不如Chrome严格的Firefox浏览器.
Please note:
If you are storing the HTML and the GIF file locally, maybe the GIF is not displayed because of some browser restrictions. You may try the Firefox browser which is less strict than Chrome in this regard.
<!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>
这篇关于如何在Mapbox Javascript中添加简单的图像叠加层?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
