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

news2024/11/13 9:52:11

记录实现过程:

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

效果图如下:此时缩放地图级别为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);

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vector - CAPL - 诊断模块函数(连接管理)

CanTpCreateConnection - 创建TP连接 功能:使用给定的地址模式(add人Mode)创建新连接,可用于诊断数据的收发。 说明:无法更改已有连接的寻址模式;如果确实有需要,可以关闭当前连接后再创建一个…

首批获得金融级行业云平台认证,天翼云深耕行业云

云计算下半场看什么? 无疑是金融、政务、制造等传统政企用户的上云与用云。随着数字经济发展和产业数字化的提速,上云已是政企用户推动其数字化转型不断深入的重要抓手,成为不可阻挡的趋势。 与互联网用户相比,政企用户上云极为…

Qt5.13引入QtWebApp的模块后报错: error C2440: “reinterpret_cast”: 无法从“int”转换为“quintptr”

1、开发环境 Win10-64 qt5.13 msvc2015-64bit-release 2、报错 新建一个demo工程。 引入QtWebApp的httpserver、logging、templateengine三个模块后。 直接运行,,此时报错如下: E:\Qt5.13.1\install\5.13.1\msvc2015_64\include\QtCore…

在腾讯云服务器OpenCLoudOS系统中安装redis(有图详解)

创建安装目录: mkdir -p /app/soft/redis 2. 下载安装包 进入安装目录 cd /app/soft/redis/ 下载安装包 wget https://download.redis.io/releases/redis-7.0.1.tar.gz 解压: tar -zxvf redis-7.0.1.tar.gz 安装gcc yum install gcc-c 进入re…

JSON:让数据传输更优雅

在东南亚海滩的阳光下,时而有一些贝壳、手工艺品等迷人的商品吸引着你。然而,语言的障碍有时会成为购买商品的阻碍。不得不用手比划以及尝试各种办法来进行交流。幸运的是,人们找到原始沟通的技巧,让彼此都能接受的信息交流方式&a…

ES6 - 对象新增的一些常用方法

文章目录 1,Object.is()2,Object.asign()3,Object.getOwnPropertyDescriptors()4,Object.setPrototypeOf()和getPrototypeOf()5,Object.keys()、values() 和 entries()6,Object.fromEntries()7,…

高效构建 vivo 企业级网络流量分析系统

作者:vivo 互联网服务器团队- Ming Yujia 随着网络规模的快速发展,网络状况的良好与否已经直接关系到了企业的日常收益,故障中的每一秒都会导致大量的用户流失与经济亏损。因此,如何快速发现网络问题与定位异常流量已经成为大型企…

在Gazebo中添加悬浮模型方法 / Gazebo中模型如何不因重力下落:修改sdf、urdf模型

目录 一、问题描述: 二、解决方法: 2.1 SDF模型: 2.2 URDF模型: 2.3 测试添加模型 三、通过Python程序在Gazebo中添加模型 一、问题描述: 在使用ros做仿真实验时,有时会需要在空间中添加一个模型文件…

1——Hive数仓项目完整流程(在线教育)

目录 前言 一、项目架构 二、软件相关作用 1.大数据相关软件 2.数仓 2.1数据仓库与数据库 2.2数据仓库和数据集市 2.3维度分析 2.4指标 3.数仓建模 3.1建模理论 3.2维度建模 3.3维度建模的三种模型 3.4缓慢渐变维 总结 前言 本专栏以大数据实战“在线教育项目”为导向系…

SAP 动态编程-动态获取结构字段对象(类模式)

实施方法 GET_DYNAMIC_FIELD_OBJECT 参数 代码 DATA: lt_source TYPE TABLE OF string.DATA: lv_name TYPE sy-repid VALUE ZTEMP_GET_DYNAMIC_OBJECT,lv_form(30) TYPE c VALUE FRM_GENERATE_OBJECT,lv_message(240) TYPE c,lv_line TYPE i,lv_word(72…

JVM GC ROOT分析

GC root原理:通过对枚举GCroot对象做引用可达性分析,即从GC root对象开始,向下搜索,形成的路径称之为 引用链。如果一个对象到GC roots对象没有任何引用,没有形成引用链,那么该对象等待GC回收,换而言之,如果减少内存泄漏,也就是切断引用链,常见的GCRoot对象如下: 1、…

基于双端口RAM的乒乓操作测试

文章目录 前言一、乒乓操作简介二、双端口RAM配置三、RAM控制模块设计四、乒乓操作验证 前言 本文将介绍基于双端口RAM的乒乓操作测试,并探索如何在AWC_C4MB开发板上实现这一测试。双端口RAM作为一种性能出色且功能强大的存储器设计,为我们提供了并发访问…

PCB布线当中的地线和电源线的规划和处理

在PCB布线中,地线和电源线的规划和布局非常重要,可以影响电路的稳定性、抗干扰能力和信号质量。下面是一些常见的规划和布局建议: 分离地平面:将地线分为模拟地和数字地两个区域,并使用两个独立的地平面来布线。这样可…

MySql007——检索数据:排序检索数据(ORDER BY的使用)

前提:使用《MySql006——检索数据:基础select语句》中创建的products表 一、抛出问题 如果我们向获得products表中所有商品名称和价格,可以这些检索数据 SELECT prod_name, prod_price FROMproducts;但是发现这些价格是乱序的,…

【计算机视觉 | 图像分割】arxiv 计算机视觉关于图像分割的学术速递(7 月 28 日论文合集)

文章目录 一、分割|语义相关(6篇)1.1 To Adapt or Not to Adapt? Real-Time Adaptation for Semantic Segmentation1.2 Towards Deeply Unified Depth-aware Panoptic Segmentation with Bi-directional Guidance Learning1.3 Semantic Image Completion and Enhancement usin…

PTC Preo creo弹出框 重新获得许可 取消弹出框方法

问题:打开proe软件之后,在使用时,会有【重新获得浮动许可证】的弹出框提示 解决办法: 1.重新打开proe 2.配置proe参数,Proe打开软件,打开选项 Proe用好多版本,打开的界面都不一样&#xff0c…

一零六六、线程池、锁

线程池: 管理线程创建,销毁的一系列池子 如何创建线程池? ExecutorService executor Executors.newFixedThreadPool(n); 创建线程有多种方法,为何要用线程池? 减少性能开销,每次执行任务都新建线程造成cpu资源浪费…

【雕爷学编程】Arduino动手做(181)---Maixduino AI开发板11

37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&am…

低代码平台的使用学习

背景 最近发现老婆每天都要捣鼓一个 excel 表格,并将表格发到群中,询问后才知道只是为了记录每天的事物变化。我想这接收方每次都要下载表格再打开看,太麻烦了,直接做个 web 表单,支持简单的增删改查就好了。 当我着…