openlayers [七] 地图控件controls详解

文章目录

    • controls 简述
    • 常见的 controls 控件
    • 使用方法
      • fullscreen 全屏
      • mouseposition 鼠标位置控件
      • overviewmap 鹰眼图
      • scaleline 比例尺控件
      • zoomslider 缩放滑块刻度控件
    • 总结

controls 简述

上篇文章我们将了在地图上的交互(interaction),那些都是一些隐性的需要去使用才能知道存在有这样一个东西,就像彩蛋一样。这篇我们主要讲地图上的控件(controls),这些可以说都是显性的东西,如果设置了,打开地图页面就能够看到的东西
属性 不是必须存在 的,默认使用的是 control~defaults 内容,并且是已 Array数组形式存在,也就是说可以像图层和交互一样,可以多个控件功能承载在地图上。

常见的 controls 控件

  • controldefaults,地图默认包含的控件,包含缩放控件和旋转控件;
  • fullscreen,全屏控件,用于全屏幕查看地图;
  • mouseposition,鼠标位置控件,显示鼠标所在地图位置的坐标,可以自定义投影;
  • overviewmap,地图全局视图控件(鹰眼图)
  • scaleline,比例尺控件;
  • zoom,缩放控件;
  • zoomslider,缩放滑块刻度控件;

使用方法

fullscreen 全屏

在这里插入图片描述

import { defaults as defaultControls, FullScreen } from "ol/control";map.value.addControl(new FullScreen());

mouseposition 鼠标位置控件

请添加图片描述


import { createStringXY } from "ol/coordinate";
import MousePosition from "ol/control/MousePosition";
// 向地图添加 MousePosition
var mousePositionControl = new MousePosition({//坐标格式coordinateFormat: createStringXY(5),//地图投影坐标系(若未设置则输出为默认投影坐标系下的坐标)projection: "EPSG:4326",//坐标信息显示样式类名,默认是'ol-mouse-position'className: "custom-mouse-position",//显示鼠标位置信息的目标容器target: document.getElementById("vue-openlayers"),//未定义坐标的标记undefinedHTML: " ",
});map.value.addControl(mousePositionControl);

overviewmap 鹰眼图

参数:以下参数都为可选,添加如下代码
collapsed,收缩选项,默认为true,收缩;
collapseLabel,收缩后的图标按钮;
collapsible,是否可以收缩为图标按钮,默认为 true;
label,当 overviewmapcontrol 收缩为图标按钮时,显示在图标按钮上的文字或者符号,默认为 »;
layers,overviewmapcontrol针对的图层,默认情况下为所有图层,一般这里设置的图层和map图层数据一致;
render,当 overviewmapcontrol 重新绘制时,调用的函数;
target,放置的 HTML 元素;
tipLabel,鼠标放置在图标按钮上的提示文字。

在这里插入图片描述

import OverviewMap from "ol/control/OverviewMap";var overviewMapControl = new OverviewMap({layers: [new TileLayer({source: new OSM(),}),],collapsed: false,
});controls: defaultControls({ zoom: true }).extend([overviewMapControl]),

scaleline 比例尺控件

import { defaults as defaultControls,ScaleLine} from "ol/control";
map.value.addControl(new ScaleLine());

在这里插入图片描述

zoomslider 缩放滑块刻度控件

在这里插入图片描述

import { defaults as defaultControls, ZoomSlider } from "ol/control";
map.value.addControl(new ZoomSlider());

总结

更多请见官网

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

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

相关文章

css3轮播图案例

轮播图案例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>…

SIFT 算法和SURF(Speeded Up Robust Features)算法的全称是什么,分别是什么意思,分别是用来干什么的?

问题描述&#xff1a;SIFT 算法和SURF(Speeded Up Robust Features)算法的全称是什么&#xff0c;分别是什么意思&#xff0c;分别是用来干什么的&#xff1f; 问题解答&#xff1a; SIFT 算法: 全称&#xff1a; 尺度不变特征变换&#xff08;Scale-Invariant Feature Transf…

AIGC笔记--特征线性调制(FiLM)层的实现

目录 1--特征线性调制层的作用 2--特征线性调制层的实现 3--论文实例 1--特征线性调制层的作用 特征线性调制&#xff08;Feature-wise Linear Modulation&#xff0c;FiLM&#xff09;层是一种神经网络模块&#xff0c;它可以用来实现特征的条件调整。FiLM层的主要功能是对…

数据结构——二叉树的遍历与应用

目录 一.前言 二. 二叉树链式结构的实现 2.1 前置说明 2.2 二叉树的遍历 2.2.1 前序、中序以及后序遍历 前序遍历&#xff1a; 中序遍历递归图&#xff1a; 后序遍历&#xff1a; 2.3节点个数 2.4叶子节点个数 2.5第K层的节点个数 2.6 二叉树查找值为x的节点 2.7 …

[M数学] lc2171. 拿出最少数目的魔法豆(数学+前缀和)

文章目录 1. 题目来源2. 题目解析 1. 题目来源 链接&#xff1a;2171. 拿出最少数目的魔法豆 2. 题目解析 比较简单直接的思路吧&#xff0c;会发现最终的转换成的数组&#xff0c;每个元素要么是 0&#xff0c;不参与结果判断&#xff0c;要么大家都一样。想一想这个都一样…

【计算机网络】子网划分(经典基础练习题)

一、某主机IP地址为110.35.2.68&#xff0c;子网掩码为255.255.255.128&#xff0c;求网络地址&#xff1f; 二、有A类网络18.0.0.0的子网掩码为255.128.0.0&#xff0c;请问可以划分为多少个子网&#xff1f; 并写出每个子网的子网号&#xff1f; 三、将C类网119.181.25.0划分…

.NetCore Flurl.Http 4.0.0 以上管理客户端

参考原文地址&#xff1a;Managing Clients - Flurl 管理客户端 Flurl.Http 构建在堆栈之上System.Net.Http。如果您熟悉HttpClient&#xff0c;那么您可能听说过这个建议&#xff1a;不要为每个请求创建一个新客户端&#xff1b;重复使用它们&#xff0c;否则将面临后…

MySQL篇—性能压测工具mysqlslap介绍

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

oracle rac 12.2.0.1CPU使用率100%

oracle rac 12.2.0.1 CPU使用率100% 查看是集群的java进程"oracle.ops.opsctl.OPSCTLDriver config database"占用cpu 根据进程号查找父进程,发现是/oracle/GRID/122/perl/bin/perl /oracle/GRID/122/tfa/gcmproddb01/tfa_home/bin/tfactl.pl rediscover -mode full …

JUnit 5 单元测试框架

依赖安装 <!-- https://mvnrepository.com/artifact/junit/junit --> <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version><scope>test</scope> </dependency>…

Docker 安装 MongoDb4

Docker 安装mongoDb 获取mongodb安装参考 获取mongodb 注意&#xff1a; WARNING: MongoDB 5.0 requires a CPU with AVX support, and your current system does not appear to have that! **hub官网&#xff08;需要梯子&#xff09;&#xff1a;**https://hub.docker.com/_…

WAF攻防相关知识点总结1--信息收集中的WAF触发及解决方案

什么是WAF WAF可以通过对Web应用程序的流量进行过滤和监控&#xff0c;识别并阻止潜在的安全威胁。WAF可以检测Web应用程序中的各种攻击&#xff0c;例如SQL注入、跨站点脚本攻击&#xff08;XSS&#xff09;、跨站请求伪造&#xff08;CSRF&#xff09;等&#xff0c;并采取相…

Node.js基础---fs文件系统 读取和写入

什么是nodejs? 脚本语言需要一个解析器才能运行&#xff0c;JavaScript是脚本语言&#xff0c;在不同的位置有不一样的解析器&#xff0c;如写入html的js语言&#xff0c;浏览器是它的解析器角色。而对于需要独立运行的JS&#xff0c;nodejs就是一个解析器。 每一种解析器都是…

华为认证云计算专家(HCIE-Cloud Computing)--练习题

华为认证云计算专家&#xff08;HCIE-Cloud Computing&#xff09;–练习题 1.(判断题)华为云stack支持鲲鹏架构&#xff0c;业务可从X86过渡到鲲鹏。 正确答案&#xff1a;正确 2.(判断题)业务上云以后&#xff0c;安全方面由云服务商负责&#xff0c;客户自己不需要做任何防…

Mysql核心知识命令汇总

Mysql核心知识命令汇总 1、索引key和index 索引被用来快速找出一个列上用一特定值的行。所有的MySQL索引(PRIMARY、UNIQUE和INDEX)在B树中存储。字符串是自动地压缩前缀和结尾空间。作用&#xff1a; 快速找出匹配一个where子句的行执行联结时&#xff0c;从其他表检索行对特定…

详细介绍IP 地址、网络号和主机号、ABC三类、ip地址可分配问题、子网掩码、子网划分

1、 IP 地址: 网络之间互连的协议&#xff0c;是由4个字节(32位二进制)组成的逻辑上的地址。 将32位二进制进行分组&#xff0c;分成4组&#xff0c;每组8位(1个字节)。【ip地址通常使用十进制表示】ip地址分成四组之后&#xff0c;在逻辑上&#xff0c;分成网络号和主机号 2…

适合初学者的机器学习开源项目合集(已加入Github加速计划)

目录 开源项目合集[>> 机器学习路线图&#xff1a;mrdbourke/machine-learning-roadmap](https://gitcode.com/mrdbourke/machine-learning-roadmap)[>> 机器学习资源的汇总&#xff1a;johnmyleswhite/ML_for_Hackers](https://gitcode.com/johnmyleswhite/ML_for…

vue+elementUI el-select 中 没有加clearable出现一个或者多个×清除图标问题

1、现象&#xff1a;下方截图多清除图标了 2、在全局common.scss文件中加一个下方的全局样式noClear 3、在多清除图标的组件上层div加noClear样式 4、清除图标去除成功

第四讲_ArkTS装饰器(一)

ArkTS装饰器&#xff08;一&#xff09; 1. Builder装饰器1.1 在组件内定义构建函数1.2 全局定义构建函数 2. BuilderParam装饰器 1. Builder装饰器 Builder是一种更轻量的 UI 元素复用机制&#xff0c;可以将重复使用的 UI 元素抽象成一个方法&#xff0c;并用Builder修饰该方…

Linux centos中find命令的多种用途:按照具体应用来详细说明find的用法举例

目录 一、find命令 二、find命令的语法 &#xff08;一&#xff09;语法格式 &#xff08;二&#xff09;选项 1、选项(option)介绍 2、控制符号链接的option 3、调试选项debugopts 4、优化选项 &#xff08;三&#xff09;表达式expression 1、选项options 2、测试…