openlayers 入门教程(六):controls 篇

devtools/2024/11/14 20:18:46/

目录

一、常用的控件

二、使用控件方法

三、添加删除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.ppmy.cn/devtools/4035.html

相关文章

C++:引用

C中的引用是一种别名,允许开发者在程序中使用已存在的变量名称来引用另一个变量。引用提供了一种简洁的方法来操作变量,而不需要复制数据本身。引用使用&符号声明,并在初始化时绑定到另一个变量。引用一旦初始化后,就不能再绑…

海外住宅IP如何助力国外问卷调查?

在数字化时代,国外问卷调查不仅是了解市场需求的重要手段,还成为了一项能够赚取额外收入的方式。随着全球范围内消费者行为的多样化,各类企业和机构越来越需要了解不同地区的用户观点和偏好,以优化产品和服务。 一、国外问卷调查…

C/C++ C/C++ 入门(6)模板初阶

个人主页:仍有未知等待探索-CSDN博客 专题分栏:C 多多指教! 一、泛型编程 在之前,我们进行编程的时候,总是针对于某一个具体的问题。就比如说,如何实现一个int类型的swap函数呢?大家肯定会写。…

关于新版本selenium定位元素报错:‘WebDriver‘ object has no attribute ‘find_element_by_id‘等问题

旧版本模式: # 以下inputTag任选其一,其他注释掉 inputTag driver.find_element_by_id("value") # 利用ID查找inputTags driver.find_element_by_class_name("value") # 利用类名查找inputTag driver.find_element_by_name(&q…

BCLinux8U6系统部署oceanbase分布式数据库社区版之三、分布式数据库部署

本文是在完成步骤一、准备 OBD 中控机,步骤二3台数据库服务器准备后,正式开始oceanbase分布式数据库安装。 前序步骤:BCLinux8U6系统部署oceanbase分布式数据库社区版之一、准备 OBD 中控机 BCLinux8U6系统部署oceanbase分布式数据库社区版…

英伟达一系列高质量公开课来了!

B站:啥都会一点的研究生公众号:啥都会一点的研究生 英伟达免费提供许多自学课程,评价肥肠高,有专为初学者设计的也有更进阶的内容(提供证书),若实验室/单位基于NVIDIA Jetson进行开发&#xff…

IPv6改造:反向代理技术的原理和优缺点分析

在前面几篇文章中,我们介绍了目前行业中三种比较常见的IPv6改造技术,分别是隧道技术、双栈技术和翻译技术,这三种改造方式采用不同的技术方案实现了IPv4向IPv6网络的过渡,然而每种改造技术在改造周期和成本、业务连续性、协议兼容…

windows Webrtc +VS2019 (M124)下载编译以及调通测试demo

下载depot tools 设置梯子 git config --global http.proxy 127.0.0.1:10000 git config --global https.proxy 127.0.0.1:10000 下载 $ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git 设置depot_tools目录为环境变量 下载webrtc # 设置系统代…