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);

 

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

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

相关文章

一款能“干掉” ChatGPT 的应用「GitHub 热点速览」

1. 本周特推 1.1 AI 专场 在这波 AI 热度消退之前,热点趋势的特推部分会增加一个模块来分享新的 AI 应用。 全能 GPT:Auto-GPT 主语言:Python New 这周很火的一个项目,收割了 52k star,Auto-GPT 的 Auto 本就有自…

Kafka介绍

目录 1,kafka简单介绍 2,kafka使用场景 3,kafka基本概念 kafka集群 数据冗余 分区的写入 读取分区数据 顺序消费 顺序消费典型的应用场景: 批量消费 提交策略 kafka如何保证高并发 零拷贝技术(netty&#…

Ubuntu类IOS主题设置

1.依次执行下面三条命令&#xff1a; sudo apt install gnome-shell-extensions sudo apt install gnome-tweak-tool sudo apt install chrome-gnome-shell2.下载主题&#xff0c;也是命令&#xff1a; git clone <https://github.com/qingchendelaike/GNOME-OSX-II-Theme…

Lifecycle原理、源码解析

原理 观察者设计模式activity是被观察者。其他想知道activity生命周期状态的类是观察者 使用 被观察者继承LifecycleOwner&#xff08;AppCompatActivity已继承&#xff09;&#xff0c;观察者继承LifecycleObserver在被观察者中添加观察者到观察者列表。完成订阅关系 acti…

Web3技术入门向科普

Web3是指下一代互联网&#xff0c;它基于区块链技术&#xff0c;将各种在线活动更加安全、透明和去中心化。Web3是一个广义的概念&#xff0c;它包括了很多方面&#xff0c;如数字货币、去中心化应用、智能合约等等。在这篇文章中&#xff0c;我们将重点讨论Web3的入门知识&…

CentOS下ZLMediaKit的可视化管理网站MediaServerUI使用

一、简介 按照 ZLMediaKit快速开始 编译运行ZLMediaKit成功后&#xff0c;我们可以运行其合作开源项目MediaServerUI&#xff0c;来对ZLMediaKit进行可视化管理。通过MediaServerUI&#xff0c;我们可以实现在浏览器查看ZLMediaKit的延迟率、负载率、正在进行的推拉流、服务器…

Linux学习之正则表达式元字符和grep命令

cat /etc/redhat-release看到操作系统的版本是CentOS Linux release 7.6.1810 (Core)&#xff0c;uname -r可以看到内核版本是3.10.0-957.21.3.el7.x86_64。 正则表达式是一种搜索字符串的模式&#xff0c;通俗点理解&#xff0c;也就是普通字符和元字符共同组成的字符集合匹…

怎样将项目jar包放到服务器上

目录 1、在配置文件中配置账号密码 2.在父级的pom里面&#xff0c;加上这个标签 3. deploy部署 4. 注&#xff1a;这两个id得匹配上&#xff08;原因&#xff1a;有的人会只有上传到测试包的权限&#xff0c;id对应&#xff0c;拥有账号密码的才能有权限&#xff09; 5.子项…

Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】

一、VsCode 常见的配置 1、取消更新 把插件的更新也一起取消了 2、设置编码为utf-8&#xff1a;默认就是了&#xff0c;不用设置了 3、设置常用的开发字体&#xff1a;Consolas, 默认就是了&#xff0c;不用设置了 字体对开发也很重要&#xff0c;不同字体&#xff0c;字母形…

Day12-1-Webpack前端工程化开发

Webpack前端工程化 1 案例-webpack打包js文件 1 在index.html中编写代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><me…

学生管理系统(升级版)

import java.util.ArrayList; import java.util.Random; import java.util.Scanner;public class Demo_学生管理系统 {public static void main(String[] args) {ArrayList<User> list new ArrayList<>();Scanner sc new Scanner(System.in);while (true) {Syste…

基于ARM+FPGA (STM32+ Cyclone 4)的滚动轴承状态监测系统

状态监测系统能够在故障早期及时发现机械设备的异常状态&#xff0c;避免故障的 进一步恶化造成不必要的损失&#xff0c;滚动轴承是机械设备的易损部件&#xff0c;本文对以滚动 轴承为研究对象的状态监测系统展开研究。现有的监测技术多采用定时上传监 测数据&#xff0c;…