MapboxGL 加载空白底图
mapboxgl 在初始化时添加一张空白底图，这样可以快速创建 map 对象，通过 map 对象加载其他图层，提升地图加载速度
<!DOCTYPE HTML>
<html>
<head>
<meta charset=‘utf-8‘>
<title>MapboxGL 空白地图</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id=‘map‘></div>
</body>
<script>
const blankStyle = {
version: 8,
name: ‘BlankMap‘,
sources: {},
layers: [
{
id: ‘background‘,
type: ‘background‘,
paint: {
// ‘background-color‘: ‘#08294A‘ /* 背景颜色 */
‘background-color‘: ‘rgba(255, 255, 255, 0)‘ /* 背景颜色-透明 */
}
}
]
};
const map = new mapboxgl.Map({
container: ‘map‘,
zoom: 8,
center: [116, 32],
style: blankStyle
})
</script>
</html>
MapboxGL 加载空白底图