mapbox创建空白底图

最新推荐文章于 2023-08-21 10:50:57 发布

niewzh

最新推荐文章于 2023-08-21 10:50:57 发布

阅读量2.1k

点赞数 2

分类专栏： Mapbox GL JS

本文链接：https://blog.csdn.net/ScapeD/article/details/88902385

版权

Mapbox GL JS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

通常在项目中我们会遇到需要空白底图的情况，如专题底图展示，特殊图层的展示等，效果如下图：

mapbox可以很方便的创建各种底图包括空白底图，也可改变空白底图的背景色。除底图是空白的，其他交互与正常无异。

以下为展示空白底图的代码：

<!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="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/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.eyJ1Ijoibmlld3poIiwiYSI6ImNqbjRvM2F4ODA5ZDEzd2xkd2oxZnB4Y2UifQ.phMvmLw9t9lDxobKyYVbPw';
    var mapStyle = {
        "version": 8,
        "name": "Dark",
        "sources": {
            "mapbox": {
                "type": "vector",
                "url": "mapbox://mapbox.mapbox-streets-v8"
            },
        },
        "sprite": "mapbox://sprites/mapbox/dark-v10",
        "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        "layers": [
        ]
    };

    var map = new mapboxgl.Map({
        container: 'map',
        zoom: 3,
        center: [0, 0],
        style: mapStyle
    });


</script>

</body>
</html>

niewzh

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
mapbox创建空白底图

通常在项目中我们会遇到需要空白底图的情况，如专题底图展示，特殊图层的展示等，效果如下图：mapbox可以很方便的创建各种底图包括空白底图，也可改变空白底图的背景色。除底图是空白的，其他交互与正常无异。以下为展示空白底图的代码：<!DOCTYPE html><html><head> <meta charset='utf-8' /...
复制链接

扫一扫

专栏目录