云狄网站建设会计培训班一般多少钱

👨‍⚕️ 主页： 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 = nullthis.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 = thisthis.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