如何在Mapbox Javascript中添加簡單的圖像疊加層？

Question

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>

Answer 1

我對現有的有幫助的答案所做的編輯未被接受，因此請將其發布在自己的答案中。

您必須等到樣式加載完成后才能添加圖像源和圖層。 以下代碼正在運行：

請注意：如果要在本地存儲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>

Answer 2

他們正在同一JSON中添加自定義圖層和底圖。 但是，您可以單獨添加圖像。

首先在圖片中添加一個來源：

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]
     ]})

然后添加一個顯示此源的圖層：

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

在Mapbox GL中，底圖和自定義圖層在技術上是同一件事。

如何在Mapbox Javascript中添加簡單的圖像疊加層？

問題描述

2 個解決方案

解決方案1
4 已采納 2018-06-16 04:46:42

解決方案2
1 2018-06-15 14:58:59

如何在Mapbox Javascript中添加簡單的圖像疊加層？

問題描述

2 個解決方案

解決方案1 4 已采納 2018-06-16 04:46:42

解決方案2 1 2018-06-15 14:58:59

解決方案1
4 已采納 2018-06-16 04:46:42

解決方案2
1 2018-06-15 14:58:59