mapboxgl V3 Slot插槽使用介绍

news/2024/11/15 12:21:31/文章来源:https://www.cnblogs.com/echohye/p/18334464

一、介绍

插槽允许在样式中创建定义明确的插入点,如:通常“面”图层需要插入到“线”图层下方,在标准样式之前,需要通过指定图层 id 来实现,一旦 id 发生变化,则会抛出错误,而在新的标准样式中,只需要指定相应的插槽即可。

{"layers": [...,{"id": "bottom","type": "slot","metadata": {"mapbox:description": "Above polygons (land, landuse, water, etc.)"}},...]
}

当前提供的标准样式(mapbox://styles/mapbox/standard)中定义了三个插槽:bottom, middle 和 top。

bottom:突出显示路径和道路、建筑物、模型和注记下方的区域(面)。
middle:覆盖区域,或在路径和道路上方,但在建筑物、模型和注记下方添加的线条。
top:将数据放置在 POI 图层上方,但在地点和交通注记下方。

可通过map.getSlots()获取。

二、使用

在Style定义所需插槽

const map = new mapboxgl.Map({container: 'mapView',accessToken:'***',style: {sources: {},layers: [{id: 'bottom',type: 'slot',metadata: {'mapbox:description': '面',},},{id: 'middle',type: 'slot',metadata: {'mapbox:description': '线',},},{id: 'top',type: 'slot',metadata: {'mapbox:description': '点',},},],version: 8,},center: [113,23],zoom: 3,attributionControl: false,minZoom: 1,maxZoom: 18,
});

然后在添加图层的时候,指定插槽名称就可以了

this.map?.addLayer({id: layerId,type: 'symbol',slot:'top',source: layerId,layout: {'icon-image': '{icon}','icon-anchor': 'bottom',},paint: {'text-color': ['get', 'color'],'text-halo-color': 'white','text-halo-width': 2,},
});

https://docs.mapbox.com/style-spec/reference/slots

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/774559.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于 ChatGPT 的聊天软件合集打包分享

推荐了一些基于ChatGPT的聊天软件,包括ChatBox(支持多种AI模型的桌面客户端)、GPT4All(可在本地运行大型语言模型)、ChatGPT Next Web和ChatGPT Web(提供Docker支持的Web应用),以及BotGem(支持OpenAI和Azure的简单指令库)。 「基于 ChatGPT 的聊天软件合集打包」 链…

使用Velero备份K8S资源,看这篇干货就够了

一、Velero简介 Velero提供备份和恢复 Kubernetes 集群资源和持久卷的工具。 Velero功能: 对群集进行备份,并在丢失时进行还原。 将集群资源迁移到其他集群。 Velero 包括: 在群集上运行的服务器 在本地运行的命令行客户端 开源地址:https://github.com/vmware-tanzu/vele…

锐龙ai 9 hx 370性能怎么样 锐龙ai9hx370相当于什么水平

锐龙ai 9 hx 370 采用 Zen5 架构, 4nm 工艺制程,拥有 12 核 24 线程,基础频率为 2.0GHz,最大加速频率可达 5.1GHz。三级缓存 24MB 热设计功耗(TDP) 28W 集成显卡 AMD Radeon 890M锐龙ai 9 hx 370性能怎么样这些点很重要 http://www.adiannao.cn/dy

NDM 小记

NDM 1、什么是ndm Neat Download Manager(简称 NDM)是一款免费且轻量级的多线程下载工具,支持 Windows 和 macOS 操作系统。这款软件的特点在于它能够有效地提升网络下载速度,并且具有简单的用户界面,易于上手。 最重要的是: 体积小 且 免费!!! 2、安装ndm下载地址…

HarmonyOS 集成 Flutter 问题记录

1、DevEco-Studio 升级到 DevEco-Studio NEXT Developer Beta2 5.0.3 版本之后报错:> hvigor ERROR: Schema validate failed.Detail: Please check the following fields. {instancePath: modules[2].srcPath,keyword: pattern,params: { pattern: ^(\\./|\\.\\./)[\\s\\S…

在react中使用Particles

step one首先封装一个粒子效果组件,option各项配置在tsparticles/react 有介绍。 // ParticleBackground.js import React, { useEffect, useState } from "react"; import { loadSlim } from "@tsparticles/slim"; import Particles, { initParticlesEn…

Game UI Kit 游戏UI 开发套件

Game UI Kit https://assetstore.unity.com/zh-CN/search#q=Game%20UI%20Kit%20 适合个人开发者 UI 套件

FreeRtos笔记1

记录学习过程: 了解简单的Arm架构,CPU中各种寄存器的作用:堆的含义(就是空闲的内存),堆的作用是用来管理这些内存(堆函数,链表):内存的栈-->每个任务都有独属于自己的栈,在自己的任务栈中会保存函数,局部变量,还有自己的现场:任务是如何进行的:任务的调度过程:

图片弹窗放大代码

代码链接 https://www.5axxw.com/questions/simple/37xmlj 效果图展示全屏展示

【日记】9 个发箍只有 2 个能压住头发……(513 字)

正文今天下午实在有些受不了,从正大门外走了出去。抬头望着天空,望着那些悠然自在纯白无暇的云,竟然有些眼睛疼,刺激到想要流泪。我在室内待得太久太久了。似乎很久没有在这种时间段出来过了。下午快下班的时候,有个客户拿了一张远古的转账支票出来,说要转账。我懵了,我…

go安装playwright-go

写go 调用Playwright时,遇到 could not start Playwright: please install the driver (v1.45.1) and browsers first: %!w(<nil>) 报错 解决方式:安装驱动和浏览器依赖。go run github.com/playwright-community/playwright-go/cmd/playwright install --with-deps 测…