带有雷达气象图overlay的黑色矢量baselayer
![[Mapbox GL]添加一张图片](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwybHRaeTVpYkc5bkxtTnpaRzR1Ym1WMEx6SXdNVFl4TWpJd01UYzFNRE00T1Rnd1AzZGhkR1Z5YldGeWF5OHlMM1JsZUhRdllVaFNNR05FYjNaTU1rcHpZakpqZFZrelRtdGlhVFYxV2xoUmRtSnRSbkJqUjFaMVduYzlQUzltYjI1MEx6VmhOa3cxVERKVUwyWnZiblJ6YVhwbEx6UXdNQzltYVd4c0wwa3dTa0pSYTBaRFRVRTlQUzlrYVhOemIyeDJaUzgzTUM5bmNtRjJhWFI1TDBObGJuUmxjZz09.jpg?w=700&webp=1 "[Mapbox GL]添加一张图片")
<!DOCTYPE html>原文： https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/
<html>
<head>
<meta charset='utf-8' />
<title></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.28.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.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 = '<your access token here>';
var mapStyle = {
"version": 8, /* 版本号：必须是8 */
"name": "Dark",
"sources": { /* 下面是sources对象内容,这里直接写在样式里面而不是通过addSource()函数添加 */
"mapbox": { /* source ID */
"type": "vector", /* source 类型：vector*/
"url": "mapbox://mapbox.mapbox-streets-v6"
},
"overlay": {
"type": "image", /* source 类型：image */
"url": "https://www.mapbox.com/mapbox-gl-js/assets/radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
}
},
"sprite": "mapbox://sprites/mapbox/dark-v9", /* style样式的sprite属性作用：渲染background-pattern、fill-pattern、line-pattern和icon-image*/
/* 样式属性时加载小图片提供URL模版 */
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"layers": [ /* 下面是layers对象内容,这里直接写在样式里面而不是通过addLayer()函数添加 */
{
"id": "background",
"type": "background",
"paint": {"background-color": "#111"} /* 背景颜色 */
},
{
"id": "water",
"source": "mapbox",
"source-layer": "water", /* 从矢量瓦片资源中使用的layer，如果资源支持multiple layer，那么需要设置该属性 */
"type": "fill",
"paint": {"fill-color": "#2c2c2c"}
},
{
"id": "boundaries",
"source": "mapbox",
"source-layer": "admin",
"type": "line",
"paint": {"line-color": "#797979", "line-dasharray": [2, 2, 6, 2]},
"filter": ["all", ["==", "maritime", 0]] /* all表示逻辑与 */
},
{
"id": "overlay",
"source": "overlay",
"type": "raster",
"paint": {"raster-opacity": 0.85} /* 透明度 */
},
{
"id": "cities",
"source": "mapbox",
"source-layer": "place_label",
"type": "symbol",
"layout": {
"text-field": "{name_en}", /* 文本域，使用{}包含 */
"text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"], /* 文本字体栈*/
"text-size": {"stops": [[4, 9], [6, 12]]} /* 文本字号，使用Zoom function，这里的属性值含义是：zoom是4时text-size为9，zoom是6时text-size是12 */
},
"paint": {
"text-color": "#969696", /* 文本颜色 */
"text-halo-width": 2, /* 字体光晕宽度 */
"text-halo-color": "rgba(0, 0, 0, 0.85)" /* 字体光晕颜色 */
}
},
{
"id": "states",
"source": "mapbox",
"source-layer": "state_label",
"type": "symbol",
"layout": {
"text-transform": "uppercase", /* 字体大小写，uppercase表示所有字母均大写 */
"text-field": "{name_en}",
"text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
"text-letter-spacing": 0.15, /* 字符间的空白，单位是ems */
"text-max-width": 7, /* 文本最大宽度，单位是ems */
"text-size": {"stops": [[4, 10], [6, 14]]}
},
"filter": [">=", "area", 80000],
"paint": {
"text-color": "#969696",
"text-halo-width": 2,
"text-halo-color": "rgba(0, 0, 0, 0.85)"
}
}
]
};
var map = new mapboxgl.Map({ /* 使用构造器创建地图 */
container: 'map',
maxZoom: 5.99,
minZoom: 4,
zoom: 5,
center: [-75.789, 41.874],
style: mapStyle,
hash: false
});
</script>
</body>
</html>