个人 网站建设方案书 备案建设网官方网站

👨‍⚕️ 主页： 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>

效果如下：