首页 > 其他 > 详细

MapboxGL 加载空白底图

时间:2021-08-03 15:16:52      阅读:19      评论:0      收藏:0      [点我收藏+]

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 加载空白底图

原文:https://www.cnblogs.com/unlockth/p/15093203.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!