openlayers 入门教程(六):controls 篇

news2024/11/27 4:29:48

目录

一、常用的控件

二、使用控件方法

三、添加删除control 的基本方法

四、control示例

1 比例尺 - ScaleLine

2 鹰眼/缩小图 - OverviewMap

3 全屏 - FullScreen

4 版权信息 - Attribution

5 旋转地图 - Rotate

6 放大缩小 - Zoom

7 缩放滑块控件 - ZoomSlider

8 鼠标位置 - MousePosition

示例: 显示鼠标经纬度信息

9 ZoomToExtent

10 清除所有控件

五、Openlayers 入门教程 -系列文章列表


控件是一个可见的小部件,其 DOM 元素位于屏幕上的固定位置。 它们可以涉及用户输入(按钮),或者仅提供信息; 位置是使用 CSS 确定的。 默认情况下,它们放置在 CSS 类名为 ol-overlay container-stop event 的容器中,但可以使用任何外部 DOM 元素。

.在Openlayers中多数Controls直接可以在地图上添加,比如Navigation(导航栏)。第二类是需要放在Div元素中才能用。第三类需要放置在panel(面板)中的操作类似于网页HTML中button按钮,需要点击或绑定才能起作用。最后一类就是自定义类型的。

一、常用的控件

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


二、使用控件方法

实例化地图map,通过参数control传入,不传值默认 control defaults 中的控件。
也可以利用map对象的**addControl()addControls()**方法在地图上添加Controls对象
需要在默认控件基础上继续添加控件,可以使用 ol.control.defaults().extend([new ol.control.FullScreen()]) 方法传入。

三、添加删除control 的基本方法

addControl(control) 将给定的控件添加到地图中
removeControl(control) 从地图中移除已给定的控件

四、control示例

1 比例尺 - ScaleLine


示例:添加比例尺功能

2 鹰眼/缩小图 - OverviewMap


示例:添加鹰眼功能

3 全屏 - FullScreen


示例:添加全屏显示功能

4 版权信息 - Attribution


示例:修改自定义地图版权信息

5 旋转地图 - Rotate


示例:添加旋转地图功能

6 放大缩小 - Zoom


示例:自定义地图放大缩小按钮功能

7 缩放滑块控件 - ZoomSlider


示例: 添加缩放滑块控件

8 鼠标位置 - MousePosition


示例: 显示鼠标经纬度信息

9 ZoomToExtent


示例: ZoomToExtent

10 清除所有控件


示例: 清除所有控件,按需添加Control

五、Openlayers 入门教程 -系列文章列表


openlayers 入门教程(一):openlayers简介
openlayers 入门教程(二):Map 篇
openlayers 入门教程(三):View 篇
openlayers 入门教程(四):Layers 篇
openlayers 入门教程(五):Sources 篇
openlayers 入门教程(六):Controls篇
openlayers 入门教程(七):Interactions篇
openlayers 入门教程(八):Geom 篇
openlayers 入门教程(九):Overlay 篇
openlayers 入门教程(十):Style 篇
openlayers 入门教程(十一):Formats篇
openlayers 入门教程(十二):定位与轨迹
openlayers 入门教程(十三):动画
openlayers 入门教程(十四):第三方插件
openlayers 入门教程(十五):与 canvas、echart,turf 等交互

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

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

相关文章

数据库服务的运行与登录

打开数据库服务 数据库服务: SQL Server(MSSQLServer) 运行在服务器端的应用程序, 提供数据的存储 / 处理和事务等在使用DBMS的客户端之前必须首先打开该服务 客户端连接到服务器 关于客户端 / 服务器端的说明 客户端 : 数据库管理系统(DBMS), 应用程序服务器端 : 安装的数据…

MyEclipse 2019安装包(亲测可用)

目录 一、软件简介 二、软件下载 一、软件简介 MyEclipse是一款功能强大的企业级集成开发环境(IDE),它是在Eclipse的基础上通过添加自己的插件开发而成的。MyEclipse主要用于Java、Java EE以及移动应用的开发,并提供了对多种语言…

23 种设计模式

设计模式 1、工厂方法 消费者任何时候需要某种产品,只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时,工厂类也要做相应的修改。如:如何创建及如何向客户端提供。 2、建造者模式 建造模式:将产品的内部表象和产品的生成过程分割开来,从而使一…

云服务器安装Mysql、MariaDB、Redis、tomcat、nginx

前置工作 进入根目录 cd / 都在/usr/local/src文件夹) 上传压缩包 rz 压缩包 Mysql 1.下载并安装MySQL官方的 Yum Repository wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noarch.rpm yum…

什么是Spring Security?具有哪些功能?

本篇将带你快速了解什么是Spring Security,通过入门案例以及相关原理和类的分析让你快速入门。 一、概述 官网:https://spring.io/projects/spring-security Spring Security是一个Java框架,用于保护应用程序的安全性。它提供了一套全面的安全…

【洛谷 P3366】【模板】最小生成树 题解(无向图+边集数组+Kruskal算法+最小生成树+并查集+路径压缩)

【模板】最小生成树 题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出 orz。 输入格式 第一行包含两个整数 N , M N,M N,M,表示该图共有 N N N 个结点和 M M M 条无向边。 接下来 M M M 行…

每日学习笔记:C++ STL算法之容器赋值与替换元素

本文API 赋值 fill(beg, end, newValue) fill_n(beg, num, newValue) generate(beg, end, op) generate_n(beg, num, op) iota(beg, end, startValue) 替换元素 replace(beg, end, oldValue, newValue) replace_if(beg, end, op, newValue) replace_copy(sourceBeg, sourceEnd,…

3个最常用的游戏资产优化技巧【BLENDER】

创建视频游戏资产既具有挑战性又富有回报。 经过一些研究并根据我的经验,这里有三个技巧可以帮助你使用 Blender 优化游戏资产。 在 Blender 中优化游戏资源的三种技术可以归结为拥有高效的 3D 模型拓扑、通过烘焙优化纹理,以及最后通过 Blender 节点的…

恢复回收站删除的文件?5个恢复技巧收藏好!

电脑回收站是一个重要的系统工具,它为用户提供了便捷的文件和文件夹管理功能,主要功能有存储临时删除的文件、恢复已删除的文件等。它能帮助用户更好地管理和控制电脑文件和文件夹。 在使用电脑的过程中,我们难免会遇到误删文件的情况&#…

使用python进行网站答题操作

介绍: 使用Python和DrissionPage模块编写自动化脚本,以模拟人的行为访问网站并获取题目答案进行自动答题。这个脚本似乎是为答题网站设计的,通过监控特定数据包地址来获取题目答案,并模拟点击正确答案进行答题。 代码中的逻辑包…

美格智能出席紫光展锐第三届泛金融支付生态论坛,引领智慧金融变革向新

4月16日,以“融智创新,共塑支付产业新生态”为主题的紫光展锐第三届泛金融支付生态论坛在福州举办,来自金融服务机构、分析师机构、终端厂商、模组厂商等行业各领域生态伙伴汇聚一堂,探讨金融支付产业的机遇与挑战。作为紫光展锐重…

基于SpringBoot的“网上商城购物系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“网上商城购物系统”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:SpringBoot 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 网上商城购物系统结构图 管理员登录界面图 个…

JAVAEE—UDP协议TCP协议/三次握手四次挥手

文章目录 UDP协议UDP协议的段格式UDP的传输过程校验和无连接 TCP协议TCP报文的格式段有连接可靠性确认应答超时重传如果ACK丢了呢? 序号和确认序号 连接的构建和断开连接的构建(三次握手)三次握手的作用为什么握手是三次,而不是四…

Java面试题笔记(持续更新)

Java基础 java中的Math.round(-1.5)等于多少? Math的round方法是四舍五入,如果参数是负数,则往大的数如,Math.round(-1.5)-1,如果是Math.round(1.5)则结果为2 JDK和JRE的区别? JDK 是 Java Development ToolKit 的简称,也就是…

网络协议——IS-IS协议详解

1. IS-IS是什么 IS-IS是一种基于链路状态并使用最短路径优先算法进行路由计算的一种IGP协议。IS-IS属于内部网关协议,用于自治系统内部。IS-IS是一种链路状态协议,使用最短路径优先算法进行路由计算。 2. 应用场景(园区网和骨干网&#xff0…

IPAguard--iOS代码混淆工具(免费)

IPAguard是一款为iOS开发者设计的代码混淆工具,旨在为开发者提供方便制作和分析马甲包的解决方案。通过高效的匹配算法,IPAguard可以在保证代码混淆的同时,保证编译后的代码质量,减少了因混淆引起的bug,使得开发者能够…

Java学习-详述main方法、可变参数、数组的工具类、二维数组

详述main方法 【1】main方法:程序的入口,在同一个类中,如果有多个方法,那么虚拟机就会识别main方法,从这个方法作为程序的入口 【2】main方法格式严格要求: public static void main(String[] args){} p…

C#版Facefusion:让你的脸与世界融为一体!-01 人脸检测

C#版Facefusion:让你的脸与世界融为一体!-01 人脸检测 目录 说明 效果 模型信息 项目 代码 下载 说明 C#版Facefusion一共有如下5个步骤: 1、使用yoloface_8n.onnx进行人脸检测 2、使用2dfan4.onnx获取人脸关键点 3、使用arcface_w60…

Java——继承的初步认识

目录 一.为什么需要继承 二.继承概念 三.继承的语法 四.父类成员访问 1.子类中访问父类的成员变量 1.1子类和父类不存在同名成员变量 1.2子类和父类成员变量同名 2.子类中访问父类的成员方法 2.1成员方法名字不同 2.2成员方法名字相同 五.super关键字 六.子类构造…

【QT进阶】Qt Web混合编程之VS2019 CEF的编译与使用(图文并茂超详细介绍)

往期回顾 【QT入门】Qt自定义控件与样式设计之自定义QLineEdit实现搜索编辑框-CSDN博客 【QT入门】Qt自定义控件与样式设计之自定义QTabWidget实现tab在左,文本水平的效果-CSDN博客【QT进阶】Qt Web混合编程之CEF、QCefView简单介绍-CSDN博客 【QT进阶】Qt Web混合编…