mapbox进阶，使用fill-extrusion三维填充图层，添加贴图，实现建筑外墙贴图效果

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

---

一、🍀前言

本文详细介绍如何基于mapbox-gl v3.*.* 版本，使用fill-extrusion三维填充图层，添加贴图，实现建筑外墙贴图效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

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-extrusion三维填充图层样式

"layers": [
	{
	"id": "fill-extrusion-id", // 唯一 id （必填）
	"type": "fill-extrusion", // 类型（必填）
	"metadata": { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 mapbox:）
		"mapbox:name": "test"
	},
	"source": "source-name", // 数据源的名称（除了 layer 的 type 为 background 外，source 必填）
	"source-layer": "source-layer-name", // 数据源的图层（只有数据源 source 的 type 为 vector 时，才能设置 source-layer，其他类型的不可以设置）
	"minzoom": 0, // 最小层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时，layer 将被隐藏）
	"maxzoom": 24, // 最大层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时，layer 将被隐藏）
	"filter": [], // 过滤（可选，用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expression）
	"layout": { // 布局类属性
		"visibility": "visible", // 可见性（可选，可选值为 none、visible，默认值为 visible）
	},
	"paint": { // 绘制类属性
		"fill-extrusion-opacity": 1, // 三维填充的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
		"fill-extrusion-pattern": "", // 三维填充的图案（可选，这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充，图标的高宽需要是 2 的倍数）
		"fill-extrusion-color": "#000000", // 三维填充的颜色（可选，默认值为 #000000）
		"fill-extrusion-translate": [0, 0], // 三维填充的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
		"fill-extrusion-translate-anchor": "map", // 平移的锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
		"fill-extrusion-height": 0, // 三维填充的高度（可选，值 >= 0，默认值为 0，单位：米）
		"fill-extrusion-base": 0, // 三维填充的底部高度（可选，值 >= 0，默认值为 0，单位：米。值必须小于等于 fill-extrusion-height）
		"fill-extrusion-vertical-gradient": true, // 是否开启垂直渐变（可选，默认值为 true）
	}
	}
]

fill-extrusion_API
turf_API

二、🍀使用fill-extrusion三维填充图层，添加贴图，实现建筑外墙贴图效果

1. ☘️实现思路

• 1、引入’mapbox-gl’、'mapbox-gl/dist/mapbox-gl.css’、‘@turf/turf’文件
• 2、添加id为map的html页面要素，定义map样式。
• 3、定义initMap初始化地图方法，方法内创建mapboxgl.Map地图对象map。map绑定‘load’事件，在load回调事件内部，使用turf随机生成1个面geojson数据polygons，使用polygons作为数据源添加一个fill-extrusion类型三维填充图层，设置三维填充图层相关样式、设置外墙贴图，使用polygons作为数据源再添加一个fill-extrusion类型三维填充图层，该图层图片填充属性不设置，设置颜色，并设置底部高度和高度为一样的值作为建筑物顶部。在mounted钩子函数中调用initMap方法。

注意：贴图会被平铺，外墙贴图图片要尽量做的小一点

2. ☘️代码样例

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

<script>
  import mapboxgl from 'mapbox-gl'
  import 'mapbox-gl/dist/mapbox-gl.css'
  import * as turf from '@turf/turf'
  export default {
    name: 'MapboxLoadFillExtrusionPatternLayer',
    data () {
      return {
        map: null
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.initMap()
      })
    },
    methods: {
      initMap () {
        mapboxgl.accessToken = 'mapbox官网注册token'
        this.map = new mapboxgl.Map({
          container: 'map',
          zoom: 14,
          minZoom: 0,
          center: [116.4, 39.9],
          pitch: 45,
          style: 'mapbox://styles/mapbox/light-v10'
        })
        let self = this
        this.map.on('load', function () {
          self.map.loadImage(require('@/assets/syxs3.jpg'), function (error, image) {
            if (!error && !self.map.hasImage('syxs3')) {
              self.map.addImage('syxs3', image, {})
            }
          })
          let polygons = turf.randomPolygon(1, { bbox: [116.35432847,39.88637483,116.43224041,39.93922276], num_vertices: 5, max_radial_length: 0.002 })
          self.map.addLayer({
            'id': 'fill_extrusion_id',
            'type': 'fill-extrusion',
            'source': {
              'type': 'geojson',
              'data': polygons
            },
            'layout': {
              'visibility': 'visible', // 可见性（可选，可选值为 none、visible，默认值为 visible）
            },
            'paint': {
              'fill-extrusion-opacity': 1, // 三维填充的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
              'fill-extrusion-pattern': 'syxs3', // 三维填充的图案（可选，这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充，图标的高宽需要是 2 的倍数）
              // 'fill-extrusion-color': '#FF0000', // 三维填充的颜色（可选，默认值为 #000000）
              'fill-extrusion-translate': [0, 0], // 三维填充的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
              'fill-extrusion-translate-anchor': 'map', // 平移的锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
              'fill-extrusion-height': 120, // 三维填充的高度（可选，值 >= 0，默认值为 0，单位：米）
              'fill-extrusion-base': 0, // 三维填充的底部高度（可选，值 >= 0，默认值为 0，单位：米。值必须小于等于 fill-extrusion-height）
              'fill-extrusion-vertical-gradient': true // 是否开启垂直渐变（可选，默认值为 true）
            }
          })
          self.map.addLayer({
            'id': 'fill_extrusion_top_id',
            'type': 'fill-extrusion',
            'source': {
              'type': 'geojson',
              'data': polygons
            },
            'layout': {
              'visibility': 'visible'
            },
            'paint': {
              'fill-extrusion-opacity': 1, 
              'fill-extrusion-pattern': '', 
              'fill-extrusion-color': '#D3D3D3',
              'fill-extrusion-translate': [0, 0],
              'fill-extrusion-translate-anchor': 'map',
              'fill-extrusion-height': 120,
              'fill-extrusion-base': 120,
              'fill-extrusion-vertical-gradient': false
            }
          })
        })
      }
    }
  }
</script>

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

效果如下：