Openlayers实战:自定义放大缩小,显示zoom等级

news2024/10/7 16:24:59

Openlayers地图中,默认的zoom组件是在左上角,这个组件很重要,方便大家来操控地图。在实际项目中,大家往往要改写这个组件,通常会放置到右下角,方便鼠标操作。 在我们的实战课程里,自定义了放大缩小,并增加了显示zoom等级的功能,实际的项目中往往都是这样办理的。

效果图

在这里插入图片描述

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-07-05
*/
<template>
    <div class=

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

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

相关文章

4、CCesium鼠标点击事件

在地图中添加鼠标点击事件&#xff0c;与web端cesium基本类似&#xff0c;我们使用上一个的示例&#xff0c;在上一个的示例中进行修改。 1、建一个类Handler&#xff0c;类中又个静态函数mouseUp&#xff0c;函数只在控制台输出信息 2、声明变量handler&#xff0c;并创建Scr…

java环境配置为1.8jdk为什么cmd java -version查看版本是17或者11

1、查看你的环境变量中Path的配置&#xff0c;确认%java_home%/bin在path值的第一个。 2、在cmd中输入echo %path%&#xff0c;看一下实际有效的path值是什么&#xff0c;其中的java配置对不对 3、oracle也自带一个jdk&#xff0c;如果你在配置环境变量时&#xff0c;将jdk配在…

m4a格式怎么转换成mp3,这几个方法分享给大家!

m4a是一种音频格式&#xff0c;它与mp3格式有一些区别。据说m4a是AAC的扩展名之一&#xff0c;它是Apple对MP3的回应&#xff0c;主要用于Mac环境下的压缩音频格式。随着iTunes Store的兴起&#xff0c;m4a在通过在线音乐商店购买音乐方面变得非常流行。然而&#xff0c;尽管许…

正则表达式测试(一)

一、匹配上1,2,3 三种字符串 测试地址&#xff1a;访问 二、匹配上1,2,3 三种字符串 三、匹配上1,2,3 三种字符串 四、匹配上第一个字符串 五、反向引用 反向引用还可以将通用资源指示符 (URI) 分解为其组件 举例&#xff1a;将下面的 URI 分解为协议&#xff08;ftp、http 等…

Stable Diffusion 图生图-蒙版重绘,Controlnet未生效的一个场景

首先感谢秋叶大佬的整合包&#xff01;&#xff01;&#xff01; 致敬所有在为AI绘画付出努力的大佬&#xff01;&#xff01;&#xff01; 省流&#xff1a;绘图时禁用插件sd-webui-segment-anything 场景&#xff1a;在电商换装场景下&#xff0c;为图中角色换衣服,使用了2个…

力扣 -- 198. 打家劫舍

题目链接&#xff1a;198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 在看这道题之前可以先看看按摩师的博文&#xff0c;写的细节更详细。(4条消息) 力扣 -- 面试题 17.16. 按摩师_高比拜仁0824的博客-CSDN博客 下面是用动态规划的思想解决这道题的过程&#xff0c…

MySQL:数据库的基本操作及数据库的三大数据类型

目录 一、创建数据库 二、删除数据库 三、查询数据 四、在数据库使用Linux命令 五、数据库的编码方式以及校验规则 1、查看MySQL支持的所有编码方式 2、查看某一种编码方式支持的所有校验规则 3、查看所有的编码方式和校验规则 4、查看本地数据库使用的编码方式和校验规…

-Xss / -XX:ThreadStackSize

-Xss / -XX:ThreadStackSize指定线程最大栈空间jdk1.4里默认的栈大小是256KBjdk1.5里默认的栈大小为1M这个参数直接会影响创建线程数量&#xff0c;值越小创建线程数越多&#xff1b; &#xff08;估算jvm进程的最大线程数&#xff09;这个参数直接决定了函数可调用的最大深度&…

【Docker】完整的搭建和发布过程

【Docker】完整的搭建和发布过程 【一】shell和ftp工具选择【二】安装Docker【1】查看系统的内核版本【2】yum更新到最新版本【3】安装Docker所需的依赖包【4】设置Docker的yum的源【5】查看仓库所有Docker版本【6】安装Docker【7】启动Docker并添加开机自启动【8】查看Docker版…

秋招提前批!大厂offer的捷径!

前言 又是一年秋招季&#xff01;年年岁岁花相似&#xff0c;岁岁年年人不同。 今天&#xff0c;博主在牛客上看到一个帖子&#xff0c;24届校招提前批已经开始了&#xff01; 24届大厂提前批 首先&#xff0c;跟大家科普一下提前批的概念&#xff0c;提前批是指企业在校园招…

TCP / IP 参考模型

TCP / IP 参考模型 5层参考模型5层参考模型5层模型的数据封装 5层参考模型 5层参考模型 综合 OSI 和 TCP/IP 的优点应用层: 支持各种网络应用 FTP, SMTP, HTTP 传输层: 进程-进程的数据传输 TCP, UDP 网络层: 源主机到目的主机的数据分组路由与转发 IP协议、路由协议等 链路层…

C语言入门篇(六)

前言   C 语言支持数组数据结构&#xff0c;数组是用来存储一系列数据&#xff0c;而且是一系列相同类型的变量。 数组 1. 一维数组1.1 数组的创建1.2 数组的初始化1.3 数组的使用1.4 数组在内存中的存储 2. 二维数组1.1 数组的创建1.2 数组的初始化1.3 数组的使用1.4 数组在…

23款奔驰GLS400升级柏林之声音响系统+HUD抬头显示系统

奔驰GLS400升级柏林之声的音响效果自然非同凡响&#xff0c;在人声、交响乐音乐厅感受方面都有非常逼真的现场感受&#xff0c;结合柏林之声的界面调整&#xff0c;可以在不同方位体验的高保真的音乐之享&#xff01; 强悍的显示效果&#xff0c;让您在动感中驾驭乐趣&#xff…

MinIO简单安装及使用

MinIO简介 MinIO是一个开源的、云原生的对象存储服务器&#xff0c;它提供了简单、高性能、安全、可扩展的存储服务。MinIO最初是作为一个Amazon S3兼容的对象存储服务器开发的&#xff0c;可以通过S3 API与其他应用程序和服务进行交互。MinIO支持分布式部署&#xff0c;可以在…

[HFCTF 2021] final web复现

我坐着什么都没做&#xff0c;因为我有太多事情要做.......&#x1f62d; (bushi) (1) tinypng(Laravel rce phar反序列化) 是一个laravel框架项目 看一下路由 <?phpuse Illuminate\Support\Facades\Route;/* |-----------------------------------------------------…

Jpa列表查询@OneToOne,@OneToMany出现多条sql(N+1)解决办法

最近用了jpa的OneToOne&#xff0c;OneToMany管理对象&#xff0c;但是在查询分页列表&#xff0c;列表的过程中触发了N1的sql查询&#xff0c;这里我用了NamedEntityGraphs去解决 实体关系 1.父实体 /*** 规则配置** author lyj* date 2023-07-06*/ Getter Setter Entity T…

计算机体系结构基础知识介绍之缓存性能的十大进阶优化之减少命中时间和流水线访问和多组缓存增加带宽(三)

优化二&#xff1a;减少命中时间的方式预测 路预测是一种高速缓存优化技术&#xff0c;它在高速缓存中保存额外的位来预测下一次高速缓存访问的路&#xff08;或者组内的块&#xff09;。这种预测可以提前设置多路选择器来选择期望的块&#xff0c;并且在那个时钟周期内&#…

ModaHub魔搭社区:ChatGLM 集成进LangChain的教程

目录 接入自己的LLM 搭建ChatGLM的api 封装ChatGLM的LLM 测试 总结 参考 最新一段时间一直在学习LangChain相关的文档&#xff0c;发现LangChain提供了非常丰富的生态&#xff0c;并且也可以让业务非常方便的封装自己的工具&#xff0c;接入到LangcChain的生态中&#xf…

Hystrix前言--什么是服务雪崩

什么是服务雪崩 这是在高并发的前提下&#xff0c;比如A、B只有100个线程&#xff0c;都在做这样一个操作&#xff0c;100个线程不能回收&#xff0c;当第101个客户来访问的时候直接报503。 服务雪崩的本质&#xff1a;线程没有及时回收。 不管是调用成功还是失败&#xff0c;只…

干货整理,Selenium 自动化测试常见异常问题 +解决方法(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 异常1&#xff1a…