如何在 Mapbox Javascript 中添加简单的图像叠加层？

Question

下面Mapbox中的link Javascript API介绍了如何在地图上添加图片叠加层，非常简单：

https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/

这行得通！但是，我正在尝试在自定义地图上添加图像叠加层。我想在不创建图块或类似内容的情况下执行此操作。

我找不到在卫星地图上叠加图像的方法（这是我的目标，只是卫星地图上的天气雷达 GIF），但我似乎无法在任何其他地图上使用它除了上面 link 中的地图！我该怎么做呢？我不想要他们在示例中使用的地图。我只是想将其覆盖在任何自定义地图上，而不会像他们的示例中那样出现不必要的复杂性。感谢您的帮助。

编辑：这是代码 - 我试图在此处发表评论后更改它，但我仍然做错了。

<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>

Answer 1

他们正在同一个 JSON 中添加自定义图层和底图。但是，您可以单独添加图像。

先加一个source with your image:

mapBoxMap.addSource("myImageSource", {"type": "image",
    "url": "/mapbox-gl-js/assets/radar.gif",
     "coordinates": [
        [-80.425, 46.437],
        [-71.516, 46.437],
        [-71.516, 37.936],
        [-80.425, 37.936]
     ]})

然后 add a layer 显示此来源：

mapBoxMap.addLayer({
  "id": "overlay",
  "source": "myImageSource",
  "type": "raster",
  "paint": {"raster-opacity": 0.85}
})

在 Mapbox GL 中，底图和自定义图层在技术上是一回事。

Answer 2

我对有用的现有答案的编辑未被接受，因此将其发布在自己的答案中。

您必须等到样式完成加载后才能添加图像源和图层。以下代码有效：

请注意：如果您在本地存储 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>

如何在 Mapbox Javascript 中添加简单的图像叠加层？

How do I add a simple image overlay in Mapbox Javascript?

javascript

maps

geospatial

mapbox

mapbox-gl-js