[Mapbox GL]添加一张图片

最新推荐文章于 2024-06-11 00:21:13 发布

龙虾天天

最新推荐文章于 2024-06-11 00:21:13 发布

阅读量3.2k

点赞数

分类专栏： Mapbox 文章标签： Mapbox iamge

Mapbox 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何使用Mapbox GL JS在黑色矢量底图上叠加雷达气象图，实现动态显示天气状况的地图效果。文章提供了完整的HTML示例代码，展示了如何设置地图样式、添加图像覆盖层等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

带有雷达气象图overlay的黑色矢量baselayer

<!DOCTYPE html>
<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>

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