单位网站的作用,重庆制作网站培训机构,第一站长网,怎么选择网站模板#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;mapbox 从入门到精通 文章目录 一、#x1f340;前言1.1 ☘️mapboxgl.Map 地图对象…⚕️ 主页 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 默认1center-thinning: 0.1, // 雪花从中心变薄系数取值0-1 默认0.4direction: [0, 50], // 雪花方向[方位角 极角] 默认[0,50]opacity: 1.0, // 雪花透明度取值0-1 默认 1color: #ffffff, // 雪花颜色 默认#ffffffflake-size: 0.71, // 雪花大取值0-5 默认0.71vignette: 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. ☘️代码样例
templatediv idmap/div
/templatescript
templatediv idmap/div
/templatescript
/** 下雪效果**/
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官网注册tokenthis.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})})}}
}
/scriptstyle scoped
#map{height: 100vh;width: 100vw;
}
/style效果如下
