当前位置：首页 > news >正文

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

news 来源：原创 2025/5/9 21:52:07

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

文章目录

一、🍀前言
- 1.1 ☘️mapboxgl.Map 地图对象
- 1.2 ☘️mapboxgl.Map style属性
- 1.3 ☘️snow 属性说明
二、🍀添加绘图扩展插件，绘制任意方向矩形
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于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>

效果如下：
在这里插入图片描述

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

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象…...

编程日记 2025/5/9 21:52:07

谈谈云计算、DeepSeek和哪吒

我不会硬蹭热点，去分析自己不擅长的跨专业内容，本文谈DeepSeek和哪吒，都是以这两个热点为引子，最终仍然在分析的云计算。这只是个散文随笔，没有严谨的上下游关联关系，想到哪里就写到哪里。 “人心中的成见…...

编程日记 2025/5/1 22:37:57

深入HBase——引入

引入前面我们通过深入HDFS到深入MapReduce ，从设计和落地，去深入了解了大数据最底层的基石——存储与计算是如何实现的。这个专栏则开始来看大数据的三驾马车中最后一个。通过前面我们对于GFS和MapReduce论文实现的了解，我们知道GFS在数…...

编程日记 2025/4/30 23:29:55

【前端】【vue】vue2/3，nuxt的插槽使用详解

插槽在Vue2、Vue3和不同版本Nuxt中的使用 Vue2中的插槽基础插槽在Vue2中，基础插槽允许在组件的模板中定义一个占位符，然后在使用组件时插入自定义内容。例如，创建一个简单的MyBox组件： <template><div class"…...

编程日记 2025/5/9 6:29:02

逆境、情绪低落时可用的锦囊、咒语

《浮生一梦》（一） 大多数人都经历过逆境低谷、失败、挫折、看似无端情绪低落、抑郁… 人逢情绪低落时，几乎任何话都听不进去，再正的能量也塞不进脑子，笑话笑不出来，食不知味… 复原力不强者很难走出来&am…...

编程日记 2025/5/8 17:12:35

【目标检测json2txt】label从COCO格式json文件转YOLO格式txt文件

目录 🍀🍀1.COCO格式json文件 🌷🌷2.YOLO格式txt文件 💖💖3.xml2json代码（python） 🐸🐸4.输入输出展示 🙋🙋4.1输入json 🍂🍂4.2输出txt 整理不易，欢迎一键三连！！！送你们一条美丽的--分割线-- 🍀🍀1.COCO格式json文件 COCO数…...

编程日记 2025/5/6 2:59:49

ASP.NET Core SixLabors.ImageSharp 位图图像创建和下载

从 MVC 控制器内部创建位图图像并将其发送到浏览器；用 C# 编写并与 Linux 和 Windows 服务器兼容。使用从 ASP.NET MVC 中的控制器下载任何文件类型File。此示例创建一个位图 (jpeg) 并将其发送到浏览器。它需要 NuGet 包SixLabors.ImageSharp v1.0.4。另请参…...

编程日记 2025/5/7 6:11:32

Java开发实战：使用IntelliJ IDEA 开发Spring Boot + MyBatis + MySQL的详细实现步骤

使用IntelliJ IDEA 开发Spring Boot MyBatis MySQL的详细实现步骤在本文中，我们将一步步讲解如何在IntelliJ IDEA 2024.2.3中使用Spring Boot、MyBatis和MySQL来开发一个简单的Web应用。通过本文，你将学会如何设置项目、配置数据库、创建实体类、编写…...

编程日记 2025/5/6 21:06:00

python-leetcode-在排序数组中查找元素的第一个和最后一个位置

34. 在排序数组中查找元素的第一个和最后一个位置 - 力扣（LeetCode） class Solution:def searchRange(self, nums: List[int], target: int) -> List[int]:def find_first(nums, target):left, right 0, len(nums) - 1result -1while left < rig…...

编程日记 2025/5/7 10:32:33

Oracle RHEL 7.8 安装

前言 Red Hat Enterprise Linux Server release 7.8 为企业级 SO 镜像。绝大部分企业如果使用Oracle数据库均会使用其企业版 OS ，能够很好的支持数据库的运行文档目的当前文档仅针对 VMware Workstation Pro 进行 OS 介质安装。镜像下载地址注意&#xff1…...

编程日记 2025/5/6 22:28:46

Java多线程交替打印

1. 双线程交替打印奇偶数 class Printer{private int num1; //要打印的数字private Object myLock new Object();public static void main(String[] args){Printer pnew Printer();Thread t1new Thread( ()->p.printNum(true), "threadA");t1.start();Thread t…...

编程日记 2025/5/9 11:05:01

华为2288H V5服务器无法启动问题处理

问题：通电后服务器前面显示888，点击电源键没有反应一.通过管理口管理服务器硬件设备华为2288H V5它默认的IP是192.168.2.100 网关是255.255.255.0 2.将网线一头连接服务器的Mgmt口，另一头来连接笔记本的网口，将笔记本的的本地…...

编程日记 2025/5/9 21:32:55

阿里巴巴对deepseek回应

行业背景与发布契机当杭州的DeepSeek在相关领域展现实力时，阿里巴巴为了在技术竞争中占据一席之地，推出新的视觉 - 语言模型，试图吸引行业关注。 Qwen2.5 - VL系列模型发布详情模型介绍：阿里巴巴发布Qwen2.5 - VL系列视觉 - 语…...

编程日记 2025/5/9 21:32:02

如何使用UniApp实现页面跳转和数据传递？

在 UniApp 中，页面跳转和数据传递是基本的功能，允许用户在应用中浏览不同的页面并传递必要的信息。以下是如何实现页面跳转和数据传递的详细步骤和示例。一、页面跳转 UniApp 提供了几种方式来进行页面跳转，主要包括： uni.nav…...

编程日记 2025/5/9 21:35:56

STM32：迎接汽车与AI时代MCU新挑战

作为通用32位MCU市场最受关注的产品系列，意法半导体（ST）的STM32 MCU从2007年问世之后就迎来爆发式增长，成功占据通用32位MCU市占率领头羊的位置，并且不断引领着通用MCU技术与应用的新思维开拓。本文引用地址&#xf…...

编程日记 2025/5/9 10:25:51

【操作系统】深入理解Linux物理内存

物理内存的组织结构我们平时所称的内存也叫随机访问存储器也叫 RAM 。RAM 分为两类： 一类是静态 RAM（ SRAM ），这类 SRAM 用于 CPU 高速缓存 L1Cache，L2Cache，L3Cache。其特点是访问速度快，访…...

编程日记 2025/5/1 10:37:12

K8s组件

一、Kubernetes 集群架构组件 K8S 是属于主从设备模型（Master-Slave 架构），即有 Master 节点负责集群的调度、管理和运维，Slave 节点是集群中的运算工作负载节点。主节点一般被称为 Master 节点，master节点上有 apis…...

编程日记 2025/5/3 21:01:08

【ESP32接入国产大模型之Deepseek】

【ESP32接入国产大模型之Deepseek】 1. Deepseek大模型1.1 了解Deepseek api1.2 Http接口鉴权1.3. 接口参数说明1.3.1 请求体(request)参数1.3.2 模型推理 2. 先决条件2.1 环境配置2.2 所需零件 3. 核心代码3.1 源码分享3.2 源码解析3.3 连续对话修改后的代码代码说明示例输出注…...

编程日记 2025/5/7 12:14:24

Vue 2 路由指南：从基础到高级

注意：对于代码看不清的部分，用鼠标选中就能看到了，背景颜色和字体颜色过于接近，我也不知道怎么调，只能这样子先看着了一、Vue Router 是什么？ Vue Router 是 Vue.js 官方的路由管理器，它允许…...

编程日记 2025/4/25 3:44:38

2025最新深度学习pytorch完整配置：conda/jupyter/vscode

从今天开始，开始一个新的专栏，更新深度学习相关的内容，从入门到精通，首先的首先是关于环境的配置指南：工欲善其事必先利其器！ PyTorch 是由 Facebook（现 Meta）开发的开源深度学习框…...

编程日记 2025/5/5 23:40:19

Python教学-最常用的标准库之一——OS库

os 库是 Python 标准库中的一个模块，它提供了一种方便的方式来使用操作系统相关的功能。os 模块提供了很多函数，可以用来处理文件和目录、访问环境变量、执行系统命令等。以下是一些常用的 os 模块的功能和示例： 1. 文件和目录操作 1.1 当前…...

编程日记 2025/5/9 9:11:50

尚硅谷爬虫note006

一、ajax的get请求 1. ajax的get请求—豆瓣电影第一页 # _*_ coding : utf-8 _*_ # Time : 2025/2/13 15:14 # Author : 20250206-里奥 # File : demo23_ajax的get请求 # Project : PythonProject10-14import urllib.requestfrom demo17_qingqiuduixaingdedingzhi import hea…...

编程日记 2025/5/9 3:02:04

LeetCode刷题---字符串---859

亲密字符串 859. 亲密字符串 - 力扣（LeetCode） 题目： 给你两个字符串 s 和 goal ，只要我们可以通过交换 s 中的两个字母得到与 goal 相等的结果，就返回 true ；否则返回 false 。交换字母的定义是&…...

编程日记 2025/5/5 2:58:45

探索大数据处理：利用 Apache Spark 解锁数据价值

探索大数据处理：利用 Apache Spark 解锁数据价值大家好，我是你们熟悉的大数据领域自媒体创作者Echo_Wish。今天，我们来聊聊如何利用Apache Spark进行大规模数据处理。Apache Spark作为一个快速、通用的集群计算框架，以其出色的性…...

编程日记 2025/5/5 8:39:03

伯克利 CS61A 课堂笔记 08 —— Strings and Dictionaries

本系列为加州伯克利大学著名 Python 基础课程 CS61A 的课堂笔记整理，全英文内容，文末附词汇解释。目录 01 Strings 字符串 Ⅰ Strings are An Abstraction. Ⅱ Strings Literals have Three Forms Ⅲ String are Sequences 02 Dictionaries 字典 …...

编程日记 2025/4/28 14:02:25

V93K测试机

爱德万V9300（又称V93K）是Advantest公司推出的高端可扩展SoC测试平台，在半导体测试领域具有标杆地位。以下为该设备的详细介绍： ### 一、核心性能与技术优势 1. **高速高精度测试能力** V9300支持高达112 Gbps PAM4信号&…...

编程日记 2025/5/5 6:06:01

在 CentOS 上更改 SSH 默认端口以提升服务器安全性

🚀 作者主页： 有来技术 🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template 🌺 仓库主页： GitCode︱ Gitee ︱ Github 💖 欢迎点赞 👍 收藏 ⭐评论 …...

编程日记 2025/5/5 17:21:02

基于逻辑概率的语义信道容量（Semantic Channel Capacity）和语义压缩理论（Semantic Compression Theory）

基于逻辑概率的语义信道容量（Semantic Channel Capacity）和语义压缩理论（Semantic Compression Theory）是语义通信（Semantic Communication, SemCom）的核心研究方向，它们旨在优化通信效率&#…...

编程日记 2025/5/5 17:27:52

Golang GORM系列：GORM事务及错误处理

在数据库管理领域，确保数据完整性至关重要。GORM是健壮的Go对象关系映射库，它为开发人员提供了维护数据一致性和优雅地处理错误的基本工具。本文是掌握GORM事务和错误处理的全面指南。我们将深入研究如何使用事务来保证原子性，并探索有效处理…...

编程日记 2025/5/6 4:52:24

51单片机-C语言扩展及最小系统

1、C-51的数据类型扩充定义 sfr：特殊功能寄存器声明 sfr：变量名地址值； 特殊功能寄存器在reg51.H这个头文件里面都帮我们定义好了，所以平时我们就不要自己去定义寄存器的名字。 sbit：特殊功能位声明sbit 变量名地址…...

编程日记 2025/5/9 13:32:10

日常问题-pnpm install执行没有node_modules生成

日常问题-pnpm install执行没有node_modules生成 1.问题2.解决方法 1.问题执行pnpm i后，提示Scope: all 3 workspace projects Done in 503ms，而且没有node_modules生成。很奇怪 2.解决方法确保根目录有 pnpm-workspace.yaml 文件： 把这…...

编程日记 2025/3/20 14:49:00

FreeRTOS低功耗总结

前言 Cortex-M核的MCU一般支持以下三种低功耗方式： ● 睡眠(Sleep)模式 ● 停止(Stop)模式 ● 待机(Standby)模式睡眠模式进入睡眠模式有两种指令：WFI(等待中断)和WFE(等待事件)， WFI进入睡眠模式后，任意中断都可唤醒。 WFE进…...

编程日记 2025/5/7 7:49:45

UniApp 实现炫酷导航栏：选中图标上移并隐藏文字

在移动应用开发中，导航栏是用户与应用交互的重要组成部分，一个美观且交互性强的导航栏能大大提升用户体验。本文将详细介绍如何使用 UniApp 实现一个独特的导航栏，当用户选中某个导航项时，对应的图标会上移并隐藏文字，…...

编程日记 2025/5/9 14:40:13

Django 操作表中的数据（增删改查）

1.新建数据我之前已经在数据库中创建了两张表，如下在urls.py文件中添加一行代码，然后再在views.py文件中编写函数 （将 URL 路径 orm/ 映射到 Django 视图函数 views.orm，当用户访问 orm/ 时，Django 会调用 orm 视图…...

编程日记 2025/5/9 14:47:12

优选驾考小程序

第2章　系统分析 2.1系统使用相关技术分析 2.1.1Java语言介绍 Java语言是一种分布式的简单的开发语言，有很好的特征，在安全方面、性能方面等。非常适合在Internet环境中使用，也是目前企业级运用中最常用的一个编程语言，具有很大…...

编程日记 2025/5/9 14:26:29

vue开发06：前端通过webpack配置代理处理跨域问题

1.定义在浏览器尝试请求不同源（域名、协议、端口号不同）的资源时，浏览器的同源策略会阻止这种跨域请求。（比如前端端口15500，后端端口5050，前端界面不可以直接调用5050端口） 2.解决方案使用前…...

编程日记 2025/5/9 18:04:59

C++基础 | 线程`std::thread`

什么是std::thread？ std::thread是C11中引入的一个类，用于表示和管理线程。通过std::thread，我们可以创建一个新的线程来执行指定的任务。线程是操作系统调度的基本单位，多个线程可以并发执行，从而提高程序的效率。创…...

编程日记 2025/5/9 15:28:24

体验 DeepSeek-R1：解密 1.5B、7B、8B 版本的强大性能与应用

文章目录 🍋引言🍋DeepSeek 模型简介🍋版本更新：1.5B、7B、8B 的区别与特点🍋模型评估🍋体验 DeepSeek 的过程🍋总结 🍋引言随着大规模语言模型的持续发展，许多模型在性…...

编程日记 2025/5/7 9:52:52

2024年认证杯SPSSPRO杯数学建模A题(第二阶段)保暖纤维的保暖能力全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 A题保暖纤维的保暖能力原题再现： 冬装最重要的作用是保暖，也就是阻挡温暖的人体与寒冷环境之间的热量传递。人们在不同款式的棉衣中会填充保暖材料，从古已有之的棉花、羽绒到近年来各种各样的人造纤维。不…...

编程日记 2025/5/9 13:41:25

P1878 舞蹈课（详解）c++

题目链接：P1878 舞蹈课 - 洛谷 | 计算机科学教育新生态 1.题目解析 1：我们可以发现任意两个相邻的都是异性，所以他们的舞蹈技术差值我们都要考虑，4和2的差值是2，2和4的差值是2，4和3的差值是1，根…...

编程日记 2025/5/9 14:23:25

或非门组成的SR锁存器真值表相关问题

PS：主要是给大家抛砖引玉，不喜勿喷。问题描述：或非门组成的SR锁存器，为什么当SD和RD等于0时候的真值表一个是Q0，Q0.一个结果是Q1，Q1？...

编程日记 2025/5/9 15:01:48

机器学习算法 - 随机森林之决策树初探（1）

随机森林是基于集体智慧的一个机器学习算法，也是目前最好的机器学习算法之一。随机森林实际是一堆决策树的组合（正如其名，树多了就是森林了）。在用于分类一个新变量时，相关的检测数据提交给构建好的每个分类树。每个…...

编程日记 2025/5/9 15:22:34

webpack构建流程

文章目录 [TOC](文章目录) 运行流程初始化流程编译构建流程compile编译make 编译模块build module 完成模块编译输出流程seal输出资源emit输出完成小结运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来在运行过程中会广播事件，插件只…...

编程日记 2025/5/9 14:58:06

服务器之连接简介（Detailed Explanation of Server Connection）

一台服务器最大能支持多少连接？一台客户端机器最多能发起多少条连接？？ 我们知道TCP连接，从根本上看其实就是client和server端在内存中维护的一组【socket内核对象】（这里也对应着TCP四元组：源IP、源端口、…...

编程日记 2025/5/9 15:08:43

第1章大型互联网公司的基础架构——1.5 服务发现

讲到这里，我们已经对一个客户端请求进入业务HTTP服务的过程有了较为详细的了解。业务HTTP服务在处理请求的过程中免不了与其他下游服务通信——可能会调用其他业务服务，可能需要访问数据库，可能会向消息中间件投递消息等，所以业务…...

编程日记 2025/5/9 15:18:43

uniapp PDF 预览和下载

创建 index.vue <template><view><view class"box"><view class"item" ><view class"title"><span></span><text>文件</text></view><view class"list" v-for"(…...

编程日记 2025/5/9 7:49:33

ubuntu服务器部署

关闭欢迎消息服务器安装好 ubuntu 系统后，进行终端登录，会显示出很多的欢迎消息通过在用户的根目录下执行 touch .hushlogin 命令，再次登录终端就不会出现欢迎消息修改hostname显示修改 /etc/hostname 文件内容为主机名，保…...

编程日记 2025/5/9 14:40:13

Deepseek 本地部署

准备环境设备：家用笔记本电脑，8核/16G/1Tb SSD/无独显系统：windows10 软件环境（非源码部署不需要）：conda 4.8.5、python3.7、git2.13 步骤下载安装Ollama 下载地址：OllamaGet up and r…...

编程日记 2025/5/9 9:21:51

[Linux][问题处理]修改密码报You must wait longer to change your password

一、问题描述在Linux控制台中修改密码，键入旧密码，设置并确认新密码后，却提示You must wait longer to change your password（您必须等待更长时间才能更改密码） 二、原因当前修改时间 < Minimum number of da…...

编程日记 2025/5/9 14:52:27

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-22- 操作鼠标拖拽 - 下篇（详细教程）

1.简介上一篇中，宏哥说的宏哥在最后提到网站的反爬虫机制，那么宏哥在自己本地做一个网页，没有那个反爬虫的机制，谷歌浏览器是不是就可以验证成功了，宏哥就想验证一下自己想法，其次有人私信宏哥说是有那种…...

编程日记 2025/5/9 14:09:16