mapbox基础，加载background背景图层

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：mapbox 从入门到精通

---

一、🍀前言

本文详细介绍如何基于mapbox-gl v3.*.* 版本，加载background背景图层，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️mapboxgl.Map 地图对象

mapboxgl.Map 地图对象。
构造函数：
new Map class(options: Object)
本例使用属性：

1.2 ☘️mapboxgl.Map style属性

本例使用属性：

• version：版本号，当前固定值为8。
• sources：数据源集合（必填，用于包含一系列数据源
  source，这些数据源提供了在地图上显示的数据）。值为{}对象。{}中的属性名是数据源的名称。
  每个数据源 source 有的属性：
  type：数据源类型
  tiles：数据源地址
  tileSize：数据源切片大小
• layers：图层集合（必填，包含了一系列图层 layer，这些图层指定了如何渲染数据源提供的数据）
  每个layer的属性（当前示例用到的）：
  id：图层id
  type：图层类型
  source：数据源名称

1.3 ☘️Fill面图层样式

"layers": [
	{
	"id": "background-id", // 唯一 id （必填）
	"type": "background", // 类型（必填）
	"metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 mapbox:）
		"mapbox:name": "test"
	},
	"minzoom": 0, // 最小层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时，layer 将被隐藏）
	"maxzoom": 24, // 最大层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时，layer 将被隐藏）
	"layout": { // 布局类属性
		"visibility": "visible", // 可见性（可选，可选值为 none、visible，默认值为 visible）
	},
	"paint": { // 绘制类属性
		"background-color": "#000000", // 背景颜色（可选，默认值为 #000000。如果设置了 background-pattern，则 background-color 将无效）
		"background-pattern": "", // 背景图案（可选，这里填写在 sprite 雪碧图中图标名称。为了背景图案能无缝填充，图标的高宽需要是 2 的倍数）
		"background-opacity": 1 // 背景不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
	}
	}
]

background_API

二、🍀加载background背景图层

1. ☘️实现思路

• 1、引入’mapbox-gl’、'mapbox-gl/dist/mapbox-gl.css’文件
• 2、添加id为map的html页面要素，定义map样式。
• 3、定义initMap初始化地图方法，方法内创建mapboxgl.Map地图对象map，添加背景图层，设置图层填充图片。map绑定‘load’事件，在load回调事件内部，map调用loadImage方法加载‘GIS.png’贴图。在mounted钩子函数中调用initMap方法。

2. ☘️代码样例

<template>
    <div id='map'></div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
export default {
  name: 'MapboxLoadBackgroundLayer',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap () {
      mapboxgl.baseApiUrl = null
      this.map = new mapboxgl.Map({
        container: 'map',
        zoom: 12,
        minZoom: 0,
        center: [116.4, 39.9],
        style: {
          version: 8,
          sources: {},
          layers: [
            {
              'id': 'background',
              'type': 'background',
              'paint': {
                'background-opacity': 1, // 背景不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
                'background-pattern': 'gis', // 背景图案（可选，这里填写在 sprite 雪碧图中图标名称。为了背景图案能无缝填充，图标的高宽需要是 2 的倍数）
                // 'background-color': '#808080' // 背景颜色（可选，默认值为 #000000。如果设置了 background-pattern，则 background-color 将无效）
              }
            }
          ]
        }
      })
      let self = this
      this.map.on('load', function () {
        self.map.loadImage(require('@/assets/GIS.png'), function (error, image) {
          if (!error && !self.map.hasImage('gis')) {
            self.map.addImage('gis', image, {})
          }
        })
      })
    }
  }
}
</script>

<style scoped>
#map{
    height: 100vh;
    width: 100vw;
}
</style>

效果如下：
设置‘background-pattern’背景填充图

设置‘background-color’背景颜色为#808080