mapbox-gl扩展sprites图片

在mapbox-gl.js中,通过在styles中设置sprite和glyphs,实现样式图标和字体的加载。而一旦style加载完成,如果重置地图中的style,则会导致地图全部重新加载,图层的顺序,地图上的要素,都会丢失,无法对当前地图状态进行还原。在这种情况下,通过代码方式,动态加载sprites,来实现地图样式中图标的灵活切换。

代码如下: sprite@2x.json为精灵图的配置文件

fetch('../img/custom/sprite@2x.json').then(res => res.json()).then(res => {
    for (const k in res) {
        const {
            width,
            height,
            x,
            y
        } = res[k]
        const data = ctx.getImageData(x, y, width, height).data;
        if(!map.hasImage(k)){
            map.addImage(k, {
                width,
                height,
                data
            });
        }
    }
}

在地图style中使用:

"layout": {
    "text-font": [
        "Microsoft YaHei"
    ],
    "icon-image": ["step", ["zoom"], "mountain-15", 13, "mountain-11"],
    "text-size":12,
    "icon-padding": 1,
    "text-size": 12,
    "text-anchor": "top",
    "text-offset": [0, 0.7],
    "text-field": "{name_chn}",
},

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

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

相关文章

Halcon3D表面平面度检测-平面差值法

//倾斜平面矫正 https://blog.csdn.net/m0_51559565/article/details/137146179前言 通常我们对表面平面度进行检测时,通常使用2种方式。1:通过大卷积核的高斯滤波进行拟合平面,然后求取拟合平面与3D模型间的点间的距离。2:通过平…

lua脚本在redis集群中哈希槽分片问题

上文说到,通过用redis lua脚本实现时间窗分布式限流 可以操作redis lua脚本来实现时间窗限流,在执行lua脚本的时候,参数中有个keys列表,当lua脚本中如果有操作多个key的情况,就可以传个key列表了。通常情况下&#xff…

鸿蒙OS开发实例:【消息传递】

介绍 在HarmonyOS中,参考官方指导,其实你会发现在‘指南’和‘API参考’两个文档中,对消息传递使用的技术不是一对一的关系,那么今天这篇文章带你全面了解HarmonyOS 中的消息传递 概况 参照官方指导,我总结了两部分…

python基于django的高校迎新系统 flask新生报到系统

系统的登录界面和业务逻辑简洁明了,采用一般的界面窗口来登录界面,整个系统更加人性化,用户操作更加简洁方便。本系统在操作和管理上比较容易,还具有很好的交互性等特点,在操作上是非常简单的。因此,本系统可以进行设计…

redis集群配置(精华版):主从复制模式

主从复制模式 概念:作用:为什么使用集群:动手实操1、环境准备2、配置redis.conf配置文件3、再次查看主从节点信息4、验证主从模式 概念: ​ 主从复制,是指将一台Redis服务器的数据,复制到其他的Redis服务器…

使用hexo框架快速在github上搭建静态博客

今天来说一下使用hexo框架搭建静态博客,玩玩还不错。 我的操作系统 文章目录 一、部署到本地二、新建博客三、更换主题四、部署到github五、其他 一、部署到本地 首先下载好nodejs和git工具,建议直接去清华镜像源下载 node.js git 这中间环境变量的配置…

OpenHarmony动效示例-如何使用animateTo实现显式动画。

介绍 利用ArkUI组件不仅可以实现局部属性变化产生的属性动画,也可以实现父组件属性变化引起子组件产生过渡效果式的全局动画即显式动画。效果如图所示: 相关概念 显式动画:提供全局animateTo显式动画接口来指定有闭包代码导致的状态变化插入…

Pytorch从零开始实战22

Pytorch从零开始实战——CycleGAN实战 本系列来源于365天深度学习训练营 原作者K同学 内容介绍 CycleGAN是一种无监督图像到图像转换模型,它的一个重要应用领域是域迁移,比如可以把一张普通的风景照变化成梵高化作,或者将游戏画面变化成真…

vue3封装Element导航菜单

1. 导航外层布局 AsideView.vue <template><el-menu:default-active"defaultActive"class"my-menu":collapse"isCollapse":collapse-transition"false"open"handleOpen"close"handleClose"><menu…

Netty核心原理剖析与RPC实践6-10

Netty核心原理剖析与RPC实践6-10 06-粘包拆包问题&#xff1a;如何获取一个完整的网络包 本节课开始我们将学习 Netty 通信过程中的编解码技术。编解码技术这是实现网络通信的基础&#xff0c;让我们可以定义任何满足业务需求的应用层协议。在网络编程中&#xff0c;我们经常…

QT资源添加调用

添加资源文件&#xff0c;新建资源文件夹&#xff0c;命名resource&#xff0c;然后点下一步&#xff0c;点完成 资源&#xff0c;右键add Prefix 添加现有文件 展示的label图片切换 QLabel *led_show; #include "mainwindow.h" #include<QLabel> #include&l…

mysql 常见运算符

学习了mysql数据类型&#xff0c;接下来学习mysql常见运算符。 2&#xff0c;常见运算符介绍 运算符连接表达式中各个操作数&#xff0c;其作用是用来指明对操作数所进行的运算。运用运算符 可以更加灵活地使用表中的数据&#xff0c;常见的运算符类型有&#xff1a;算…

增强现实(AR)的开发工具

增强现实&#xff08;AR&#xff09;的开发工具涵盖了一系列的软件和平台&#xff0c;它们可以帮助开发者创造出能够将虚拟内容融入现实世界的应用程序。以下是一些在AR领域内广泛使用的开发工具。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎…

【最新版RabbitMQ3.13】Linux安装基于源码构建的RabbitMQ教程

前言 linux环境 安装方式有三种&#xff0c;我们这里使用源码安装 Linux下rpm、yum和源码三种安装方式简介 个人语雀首发教程&#xff1a;https://www.yuque.com/wzzz/java/kl2zn22b42svsc6b csdn地址: https://blog.csdn.net/u013625306/article/details/137151862 安装版本…

三菱Q系列PLC以太网TCP通讯FB块源码

三菱Q系列PLC的tcp通讯&#xff0c;客户端和服务器两个变量好用的FB块&#xff0c;调用块就可以实现通讯连接&#xff0c;不需要自己写程序&#xff0c;简单配置引脚就可以。该块还集成了断网&#xff0c;连接错误&#xff0c;发送接收数据错误报警等功能。具体功能见下面介绍.…

C语言最大公约数(辗转相除法)

输入两个整数&#xff0c;求他们的最大公约数&#xff1a; 如果我们不用辗转相除法的话&#xff0c;两个整数的最大公约数&#xff0c;我们就可以定义一个整数为两个整数中最小的那个数&#xff0c;然后两个整数一起除我们新定义的整数&#xff0c;如果都除尽了&#xff0c;这…

UE5数字孪生系列笔记(三)

C创建Pawn类玩家 创建一个GameMode蓝图用来加载我们自定义的游戏Mode新建一个Pawn的C&#xff0c;MyCharacter类作为玩家&#xff0c;新建一个相机组件与相机臂组件&#xff0c;box组件作为根组件 // Fill out your copyright notice in the Description page of Project Set…

备考ICA----Istio实验13---使用 Istio Ingress 暴露应用

备考ICA----Istio实验13—使用Istio Ingress TLS暴露应用 1. 环境部署 清理之前实验遗留,并重新部署httpbin服务进行测试 # 清理之前的环境 kubectl delete vs httpbin kubectl delete gw mygateway # 部署httpbin kubectl apply -f istio/samples/httpbin/httpbin.yaml 确认…

从vivo X Fold3看vivo“质”变

撰文 | 何玺 排版 | 叶媛 vivo的气质变了&#xff01;虽然依旧内敛、低调&#xff0c;但更自信、从容&#xff0c;气场也更强大。这是玺哥在本次vivo X Fold3系列新品发布会上的一个直观感受。 是什么改变了vivo的气质&#xff1f;产品&#xff1f;技术&#xff1f;又或是其他…

衰老抑制剂原知因起源金NMN热销,“海弗里克极限”将被打破?

美国著名生物学家列奥纳多 海弗里克 , 在 1961 年研究人类胎儿的细胞群体分裂次数时提出了著名的 " 海弗里克极限 " 理论。该理论认为 , 正常细胞分裂的周期是 2-3 年 , 分裂次数大概是 50 次 , 得出人类的极限寿命高达 150 岁。半个世纪后 , 世界上最长寿的人 , 打…