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

Question

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

Dav*_*id 5 javascript maps geospatial mapbox mapbox-gl-js

Mapbox Javascript API 中的以下链接描述了如何在地图上添加图像叠加层，非常简单：

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

这有效！但是，我正在尝试在自定义地图上添加图像叠加层。我想在不创建瓷砖或任何类似东西的情况下做到这一点。

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

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

pat*_*per 8

My edits to the helpfull existing answer were not accepted, so posting this in an own answer.

You have to wait until the style is done loading before adding the image source and layer. The following code is working:

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，4 月前
查看次数：	8262 次
最近记录：	7 年，4 月前