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>
