mapbox V3 新特性，添加下雪效果

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

---

一、🍀前言

本文详细介绍如何基于mapbox-gl v3.*.*、vue 3.*.* 版本中添加下雪效果，亲测可用。希望能帮助到您。一起学习，加油！加油！
注意：mapbox-gl V3版本 需要vue3 安装引入才可以使用，vue2 暂时没测试使用成功！

1.1 ☘️mapboxgl.Map 地图对象

mapboxgl.Map mapbox地图对象。
构造函数：
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 ☘️snow 属性说明

"snow": {
  "density": 0.85, // 雪花密度，取值0-1 默认 ["interpolate",["linear"],["zoom"],11,0,13,0.85]
  "intensity": 1.0, // 雪花下落速度，取值0-1 默认1
  "center-thinning": 0.1, // 雪花从中心变薄系数，取值0-1 默认0.4
  "direction": [0, 50], // 雪花方向[方位角 极角] 默认[0,50]
  "opacity": 1.0, // 雪花透明度取值0-1 默认 1
  "color": "#ffffff", // 雪花颜色 默认'#ffffff'
  "flake-size": 0.71, // 雪花大，取值0-5 默认0.71
  "vignette": 0.3, // 雪花空间角落大小，取值0-1 默认["interpolate",["linear"],["zoom"],11,0,13,0.3]
  "vignette-color": "#ffffff" // 雪花空间角落颜色 默认'#ffffff'
}

相关地址：
下雪效果_API

二、🍀添加绘图扩展插件，绘制任意方向矩形

1. ☘️实现思路

• 1、引入’mapbox-gl’、'mapbox-gl/dist/mapbox-gl.css’文件
• 2、添加id为map的html页面要素，定义map样式。
• 3、定义initMap初始化地图方法，方法内创建mapboxgl.Map地图对象map。map绑定‘style.load’事件，在事件内部map调用setSnow方法，设置下雪相关参数。在mounted钩子函数中调用initMap方法。

2. ☘️代码样例

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

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

<script>
/** 下雪效果**/
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
export default {
  name: 'MapboxDrawSnow',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap () {
      mapboxgl.accessToken = 'mapbox官网注册token'
      this.map = new mapboxgl.Map({
        container: 'map',
        zoom: 17,
        pitch: 74,
        minZoom: 0,
        center: [116.4, 39.9],
        style: 'mapbox://styles/mapbox/standard',
        projection: 'globe'
      })
     this.map.on('style.load', () => {
       this.map.setConfigProperty('basemap', 'lightPreset', 'dusk')

       const zoomBasedReveal = (value) => {
         return [
           'interpolate',
           ['linear'],
           ['zoom'],
           11,
           0.0,
           13,
           value
         ]
       }

       this.map.setSnow({
         density: zoomBasedReveal(0.85),
         intensity: 1,
         'center-thinning': 0.1,
         direction: [0, 50],
         opacity: 1.0,
         color: `#ffffff`,
         'flake-size': 0.71,
         vignette: zoomBasedReveal(0.3),
         'vignette-color': `#ffffff`
       })
     })
    }
  }
}
</script>

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

效果如下：