MapboxGL 加载空白底图

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>
posted @ 2021-08-03 10:32  xustch  阅读(733)  评论(1)  编辑  收藏  举报