leaflet-uniapp 缩放地图的同时 显示当前缩放层级

记录实现过程:

需求为移动端用户在使用地图时,缩放地图的同时,可以获知地图此时缩放的级别。

效果图如下:此时缩放地图级别为13

map.on('') 有对应的诸多行为 查看官网即可,这里根据需要为--zoomstart zoom zoomend

代码如下:

// 地图缩放级别改变时
const ZoomViewer = L.Control.extend({
	options: {
	    position: 'bottomleft' //初始位置
	},
	onAdd() {
		const gauge = L.DomUtil.create('div');
		gauge.style.width = '30px';
		gauge.style.left = '3px';
		gauge.style.background = 'rgba(255,255,255,0.5)';
		gauge.style.textAlign = 'center';
		map.on('zoomstart zoom zoomend', (ev) => {
			gauge.innerHTML = `${map.getZoom().toFixed(0)}`;
		});
		return gauge;
	}
});
		 
const zoomViewer = (new ZoomViewer()).addTo(map);

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AWS多账户单点登录 IAM Identity Center(AWS SSO)

需求场景 多个aws账户,登陆麻烦且不安全,SSO单点功能并且外部身份提供者 — 如果您要管理外部身份提供者(IdP)(例如 Okta 或 Active Directory)中的用户。 官方文档:https://docs.aws.amazon.c…

【无标题】云原生在工业互联网的落地及好处!

什么是工业互联网? 工业互联网(Industrial Internet)是新一代信息通信技术与工业经济深度融合的新型基础设施、应用模式和工业生态,通过对人、机、物、系统等的全面连接,构建起覆盖全产业链、全价值链的全新制造和服务…

1.Kubernetes

文章目录 KubernetesK8S概述作用为什么使用K8S主要功能Kubernetes 集群架构与组件总结: 核心组件Master组件Kube-apiserverKube-controller-managerKube-scheduler工作 配置存储中心etcd Node组件KubeletKube-Proxydocker 或 containerd 总结: 工作流程K…

【SpringBoot】有哪些优点+配置文件如何配置?

博主简介:想进大厂的打工人博主主页:xyk:所属专栏: JavaEE进阶 Spring 的诞⽣是为了简化 Java 程序的开发的,⽽ Spring Boot 的诞⽣是为了简化 Spring 程序开发 的。Spring Boot是一个开源的Java框架,用于快速构建应用程序和微服…

ansible常见模块的运用

ansible常见模块的运用 一:Ansible简介二:ansible 环境安装部署管理端安装 ansibleansible 目录结构配置主机清单配置密钥对验证 三:ansible 命令行模块1.command 模块在远程主机执行命令,不支持管道,重定向…

LNMP安装

目录 1、LNMP简述: 1.1、概述 1.2、LNMP是一个缩写词,及每个字母的含义 1.3、编译安装与yum安装差异 1.4、编译安装的优点 2、通过LNMP创建论坛 2.1、 安装nginx服务 2.1.1、关闭防火墙 2.1.2、创建运行用户 2.1.3、 编译安装 2.1.4、 优化路…

【C#学习笔记】引用类型(2)

文章目录 ObjectEqualsGetTypeToStringGetHashCode string逐字文本复合格式字符串字符串内插 StringBuilderStringBuilder 的工作原理StringBuilder提供的方法访问字符迭代字符查询字符 dynamic Object 支持 .NET 类层次结构中的所有类,并为派生类提供低级别服务。…

物理机是什么?有什么优势?可以上堡垒机吗?

你知道物理机是什么?有什么优势?可以上堡垒机吗?今天我们就来简单聊聊。 物理机是什么? 物理机是相对于虚拟机而言的对实体计算机的称呼。物理机提供给虚拟机以硬件环境,有时也称为“寄主”或“宿主”。 物理机有什么…

万界星空科技/免费开源MES系统/免费仓库管理

仓库管理(仓储管理),指对仓库及仓库内部的物资进行收发、结存等有效控制和管理,确保仓储货物的完好无损,保证生产经营活动的正常进行,在此基础上对货物进行分类记录,通过报表分析展示仓库状态、…

软件设计师(六)结构化开发方法

结构化方法由结构化分析、结构化设计、结构化程序设计构成,它是一种面向数据流的开发方法。 分类说明结构化分析(SA)根据分解与抽象的原则,按照系统中数据处理的流程,用数据流图来建立系统的功能模型,从而…

7种有效安全的网页抓取方法,如何避免被禁止?

网页抓取是一种从互联网上抓取网页内容的过程,但在网络抓取种相信您也经常遇到障碍?尤其是做跨境业务的,在抓取国外的网站时更有难度。但我们站在您的立场上,提供七种有效的方法来进行网页抓取而不被阻止,最大限度地降…

python可以做哪些小工具,python可以做什么小游戏

大家好,小编来为大家解答以下问题,python可以做什么好玩的,python可以做什么小游戏,今天让我们一起来看看吧! 最近有几个友友问我说有没有比较好玩的Python小项目来练手,于是我找了几个比较有意思的给他们&…

CUDA编程

银河系CUDA编程指南(3)——矩阵乘法的分块实现 银河系CUDA编程指南(3)——矩阵乘法的分块实现 - 知乎0 写在前面前面一节实现了一个朴素的GPU矩阵乘法,效果和使用cublas库差距极大。其中一个原因就是因为对全局存储器 ( global memory) 的访问。全局内存通常使用DR…

亚马逊关键词的作用有哪些?

亚马逊关键词在平台上扮演着重要的作用,涵盖了消费者、卖家和整个平台的多个方面: 1、消费者的作用: 帮助消费者快速找到所需商品:通过输入关键词,消费者可以迅速找到感兴趣的商品,节省时间和精力。 支持…

百分点科技跻身中国智慧应急人工智能解决方案市场前三

近日, 全球领先的IT市场研究和咨询公司IDC发布了《中国智慧应急解决方案市场份额,2022》报告,数据显示,2022年中国智慧应急整体市场为104亿元人民币。其中,智慧应急人工智能解决方案子市场备受关注,百分点科…

day1-牛客67道剑指offer-JZ4 JZ6 JZ7 JZ9 JZ11 JZ69 JZ70 替换空格 斐波那契数列及其变形 左移/右移运算符

文章目录 1. JZ4 二维数组中的查找暴力法右上角往左下角逼近二分查找-左闭右开区间 2. 替换空格3. JZ6 从尾到头打印链表4. JZ7 重建二叉树思路1哈希加速 5. JZ9 用两个栈实现队列6. JZ11 旋转数组的最小数字常规遍历二分法 7. 斐波那契数列动态规划递归 8. JZ69 跳台阶动态规划…

PS - Photoshop 实现涂抹功能 (橡皮擦、图章、吸管、画笔)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/131997323 在 Photoshop 中,橡皮擦工具,以及吸管工具和画笔工具可以配合使用,实现涂抹功能,再通过…

AMEYA360:瑞萨电子MCU和MPU产品线将支持Microsoft Visual Studio Code

全球半导体解决方案供应商瑞萨电子宣布其客户现可以使用Microsoft Visual Studio Code(VS Code)开发瑞萨全系列微控制器(MCU)和微处理器(MPU)。瑞萨已为其所有嵌入式处理器开发了工具扩展,并将其…

zookeeper入门学习

zookeeper入门学习 zookeeper应用场景 分布式协调组件 客户端第一次请求发给服务器2,将flag值修改为false,第二次请求被负载均衡到服务器1,访问到的flag也会是false 一旦有节点发生改变,就会通知所有监听方改变自己的值&#…

ConcurrentHashMap 的简单介绍

ConcurrentHashMap是Java集合框架中的一个并发容器,它是线程安全的哈希表的实现。它被设计为比Hashtable和SynchronizedMap(通过使用同步方法或块来保证线程安全)更高效和可扩展的替代品。 ConcurrentHashMap具有以下特点: 线程…