通常在项目中我们会遇到需要空白底图的情况,如专题底图展示,特殊图层的展示等,效果如下图:
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>