Openlayer【四】—— 控件

控件

控件是一个可见的小部件,其 DOM 元素位于 屏幕。它们可以涉及用户输入(按钮),也可以仅供参考; 位置是使用 CSS 确定的。默认情况下,它们位于 容器,但可以使用 任何外部 DOM 元素。

其中ol/control是所有控件的基类,这里直接在vue3里面来实现了,前面的文章是基于vue2实现的,后续有时间的话会将其更新到vue3

import 'ol/ol.css'; // 注意要导入ol对应的样式文件,避免无样式导致控件位置不对而排查问题浪费时间
import {OverviewMap, ZoomSlider} from 'ol/control'

1、OverviewMap 概览地图

在创建了图层之后再通过OverviewMap控件添加到图层当中,由于所有的控件都是一个个的div元素加到页面上的,所以我们可以轻松的找到对应控件的类名进行样式覆盖

  const overviewMapControl = new OverviewMap({layers: [new TileLayer({source: new XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg'})})],// Unicode collapseLabel: '\u00AB', // 收起概览地图时的标签label: '\u00BB', // 展开概览地图时的标签collapsed: false, // true为收起来collapsible: true, // 是否可收起tipLabel: '这是一个提示'})map.addControl(overviewMapControl)

这里对OverviewMap 控件的属性进行简要说明

属性说明
className类名,默认类名是ol-overviewmap。使用了该属性将替换该类名,要考虑到新类名的样式
layers概览的图层,默认和初始化地图的layer保持一致即可
collapseLabel收起概览地图时的标签(都是Unicode编码的字符)
label展开概览地图时的标签
collapsed是否可收起
tipLabelcollapseLabel和label的提示文本
rotateWithView控件视图是否应随主地图视图一起旋转

2、ZoomSlider 缩放滑块

用于缩放的滑块类型的控件。

  map.addControl(new ZoomSlider({// className: 'demo-zoom-slider',duration: 1000	// 动画持续时间,默认为200 ms}))

3、FullScreen 全屏

提供一个按钮,单击该按钮时,地图将填满整个屏幕。 默认情况下,全屏源元素是包含地图视口的元素,除非 通过提供选项进行覆盖。在这种情况下,dom 使用此参数引入的元素将全屏显示。在全屏模式下,将显示一个关闭按钮以退出全屏模式。

  map.addControl(new FullScreen({label: '\u0046', // 默认展示为FlabelActive: '\u0047', // 全屏时展示为GactiveClassName: 'text-blue', // 全屏时展示G的css类名inactiveClassName: 'text-red', // 默认展示F的css类名tipLabel: '全屏 -- 文本' // 按钮的tip}))

4、MousePosition 鼠标位置

用于显示鼠标光标的 2D 坐标的控件。默认情况下,这些 位于视图投影中,但可以位于任何受支持的投影中。 默认情况下,该控件显示在地图的右上角,但 可以使用 CSS 选择器(ol-mouse-position)进行更改。

其中coordinateFormat指定一个回调函数用来对经纬度进行格式化处理

  map.addControl(new MousePosition({coordinateFormat: function (coordinate: any) {const [x, y] = coordinatereturn x.toFixed(2) + ' , ' + y.toFixed(2);},placeholder: '等待鼠标移入', // 当鼠标不在地图上时展示这个projection: 'EPSG:4326',}))

5、Zoom 缩放

具有 2 个按钮的控件,一个用于放大,一个用于缩小。 此控件是地图的默认控件之一。所以即使你未添加任何控件的时候这个控件还是会添加到页面上,那么如何处理掉这个控件呢?

  map = new Map({target: 'map',layers: [XXXXX],view: new View(XXXX),// 在地图上添加控件 默认会加上zoom控件,这里设置为[] 表示不加任何控件上去controls: [],})

6、ZoomToExtent 缩放到范围

一个按钮控件,按下该按钮时,会将地图视图更改为特定的 程度。

  map.addControl(new ZoomToExtent({label: '\u0057',tipLabel: '缩放到特定等级',// minX, minY, maxX, maxYextent: [115, 20, 120, 30]}))

7、ScaleLine 比例尺

针对视窗显示粗略 y 轴距离的控件。默认情况下,比例线将显示在地图的左下角。可以通过使用 CSS 选择器(ol-scale-line、ol-scale-bar)来更改

  map.addControl(new ScaleLine({bar: true,steps: 2}))

在这里插入图片描述

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

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

相关文章

GO基础进阶篇 (十二)、反射

什么是反射 Go语言中的反射是指在程序运行时检查程序的结构,比如变量的类型、方法的签名等。Go语言的反射包是reflect。通过反射,你可以动态地检查类型信息、获取字段和方法、调用方法等。 反射可以在运行时动态获取变量的各种信息,比如变量…

linux系统nginx工具的一些应用

nginx高级应用 虚拟目录监控模块配置文件创建用户名密码客户端访问 限制传输速度(服务层) nginx配置文件中的每个语句要以 ; 结尾 虚拟目录 配置文件中的server块中编辑:location /test {alias /usr/share/nginx/html; //映射的是/usr…

定时器中断控制的独立式键盘扫描实验

#include<reg51.h> //包含51单片机寄存器定义的头文件 sbit S1P1^4; //将S1位定义为P1.4引脚 sbit S2P1^5; //将S2位定义为P1.5引脚 sbit S3P1^6; //将S3位定义为P1.6引脚 sbit S4P1^7; //将S4位定义为P1.7引脚 unsigned char keyval; /…

知识笔记(八十)———链式语句中join用法

join通常有下面几种类型&#xff0c;不同类型的join操作会影响返回的数据结果。 INNER JOIN: 等同于 JOIN&#xff08;默认的JOIN类型&#xff09;,如果表中有至少一个匹配&#xff0c;则返回行LEFT JOIN: 即使右表中没有匹配&#xff0c;也从左表返回所有的行RIGHT JOIN: 即使…

50天精通Golang(第18天)

web开发介绍、iris框架安装、HTTP请求和返回、Iris路由处理 一 Web项目开发介绍及实战项目介绍 1.1 引言 本系列课程我们将学些Golang语言中的Web开发框架Iris的相关知识和用法。通过本系列视频课程&#xff0c;大家能够从零到一经历一个完整项目的开发&#xff0c;并在课程…

[树莓派]给树莓派装pyinstaller环境

安装&#xff1a; sudo pip3 install pyinstaller 但是打包后会发现报错&#xff1a; Fatal error: PyInstaller does not include a pre-compiled bootloader for your platform. For more details and instructions how to build the bootloader see https://pyinstaller.…

Golang语言switch case

Golang语言使用switch语句可方便地对大量的值进行条件判断。 练习&#xff1a;判断文件类型,如果后缀名是.html输入text/html, 如果后缀名.css 输出text/css ,如果后缀名是.js 输出text/javascript Go语言规定每个switch只能有一个default分支。 extname : ".a"swit…

【栈】Leetcode 496 下一个更大元素I

【栈】Leetcode 496 下一个更大元素I 解法1 两个单调栈解法2 ---------------&#x1f388;&#x1f388;题目链接&#x1f388;&#x1f388;------------------- 解法1 两个单调栈 两个栈进行操作&#xff0c;一个栈用来遍历寻找&#xff0c;一个栈用来保留 将nums2中的元素…

NLP论文阅读记录 - 2021 | WOS 利用 ParsBERT 和预训练 mT5 进行波斯语抽象文本摘要

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.前提三.本文方法A. 序列到序列 ParsBERTB、mT5 四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结思考 前言 Leveraging ParsBERT and Pretrained …

1.6 面试经典150题 - 买卖股票的最佳时机

买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易…

鸿蒙开发之组合手势

当我们需要支持多个手势的时候&#xff0c;可以通过GestureGroup来实现&#xff0c;如下实现了同时支持Tap和Pan手势 import Prompt from system.prompt Entry Component struct OfficialGestureGroupPage {State message: string Hello Worldbuild() {Column() {Column() {T…

STM32WL用户手册学习

介绍 STM32Cube是意法半导体的原创产品&#xff0c;通过减少开发工作量、时间和成本来显著提高开发人员的生产力。STM32Cube涵盖了整个STM32产品组合。 STM32Cube包括&#xff1a; 一套用户友好的软件开发工具&#xff0c;涵盖项目开发从设计到生产&#xff0c;其中&#xf…

算法第十九天-二叉搜索树节点最小距离

二叉搜索树节点最小距离 题目要求 解题思路 今天题目重点&#xff1a; 1.二叉搜索树&#xff08;BST&#xff09; 2.任意两个不同节点 遇到二叉搜索树&#xff0c;立即想到这句话&#xff1a;[二叉搜索树&#xff08;BST&#xff09;的中序遍历是有序的]。这是解决所有二叉搜…

1.1 面试经典 150 题-合并两个有序数组

合并两个有序数组 方法一&#xff1a;先合并再排序 class Solution:def merge(self, nums1: List[int], m: int, nums2: List[int], n: int) -> None:"""Do not return anything, modify nums1 in-place instead."""# 先合并for i in range…

全网最细RocketMQ源码四:消息存储

看完上一章之后&#xff0c;有没有很好奇&#xff0c;生产者发送完消息之后&#xff0c;server是如何存储&#xff0c;这一章节就来学习 入口 SendMessageProcessor.processRequest private CompletableFuture<RemotingCommand> asyncSendMessage(ChannelHandlerCont…

【现代密码学】笔记5--伪随机置换(分组加密)《introduction to modern cryphtography》

【现代密码学】笔记5--伪随机置换&#xff08;分组加密&#xff09;《introduction to modern cryphtography》 写在最前面5 伪随机排列实践构造&#xff08;块密码/分组密码&#xff09; 写在最前面 主要在 哈工大密码学课程 张宇老师课件 的基础上学习记录笔记。 内容补充&…

pve虚拟机的改名和修改ID

PVE的虚拟机名字在web界面是无法修改id和名字的。要注意id和名字不能重。 在使用备份时就发现虚拟机是以虚拟机id作为维一标识&#xff0c;如果有多台pve节点&#xff0c;但共用同一个nfs目录备份或使用同一个pbs进行备份时就必须保障id的唯一性。这时可以使用这个方法来进行补…

MySQL使用通配符进行数据搜索以及过滤

目录 1.什么是通配符&#xff1f; 2.通配符之→百分号(%) 3.通配符之→下划线(_) 4.通配符使用注意事项 *本文涉及概念来源于图灵程序设计丛书&#xff0c;数据库系列——《MySQL必知必会》 1.什么是通配符&#xff1f; 通配符(wildcard) &#xff1a;用来匹配值的一部分…

返利机器人详细解读,纯属个人观点

返利机器人详细解读&#xff0c;纯属个人观点 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我将为你详细解读返利机器人的发展历程、争议焦点以及…

scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果,结合animation与@keyframes实现标题左右闪动更换颜色效果。

scrollTop 是一个属性&#xff0c;它表示元素的滚动内容垂直滚动条的位置。对于可滚动元素&#xff0c;scrollTop 属性返回垂直滚动条滚动的像素数&#xff0c;即元素顶部被隐藏的像素数。 offsetTop 是一个属性&#xff0c;用于获取一个元素相对于其父元素的垂直偏移量&…