openlayers 入门教程(六):controls 篇

这篇具有很好参考价值的文章主要介绍了openlayers 入门教程(六):controls 篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。

openlayers 入门教程(六):controls 篇,# GIS入门教程,control,大剑师,openlayers入门教程

No. 内容链接
1 Openlayers 【入门教程】 - 【源代码+示例300+】
2 Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3 Cesium 【入门教程】 - 【源代码+图文示例200+】
4 MapboxGL【入门教程】 - 【源代码+图文示例150+】
5 前端就业宝典 【面试题+详细答案 1000+】

openlayers 入门教程(六):controls 篇,# GIS入门教程,control,大剑师,openlayers入门教程


openlayers 入门教程(六):controls 篇,# GIS入门教程,control,大剑师,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 文章来源地址https://www.toymoban.com/news/detail-851789.html

五、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 等交互

到了这里,关于openlayers 入门教程(六):controls 篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot(入门)三层架构Controller、Service、Dao

    SpringB是一个基于Java的开源框架,用于创建微服务。它由Pivotal Team开发,用于构建独立的生产就绪Spring应用。 SpringBoot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件,简化开发。 Controller层:(顾名思义 控制层)控制并处理http请求,将其不

    2024年02月07日
    浏览(45)
  • SpringBoot教程(五) | SpringBoot中Controller详解

    SpringBoot整合SpringMvc其实千面一直讲的都是。只需要我们在pom文件中引入 web的starter就可以了,然后我们就可以正常使用springMvc中的功能了。所以本篇文章可能更多的是回顾,回顾一下springMVC中的一些常用的功能。 按照正常的流程,我们应该先讲一讲怎么配置视图解析器,但是

    2024年01月16日
    浏览(44)
  • AI绘画王炸功能Control Net安装教程

    原文:AI绘画王炸功能Control Net安装教程 - 知乎 AI绘画,最近两大王炸功能出圈了。 一个就是超真实超细节的美女图片,已经快和照片无异了,甚至有人用AI绘画的“女仆照片”开始招募游艇会了,具体教程可以查看Lora这篇文章。 另一个王炸功能,则是本文要教大家安装和使

    2024年02月04日
    浏览(23)
  • OpenLayers 开源的Web GIS引擎

    介绍:开源的Web GIS引擎,使用了JavaScript、最新的HTML5技术及CSS技术,支持dom,canvas和webgl三种渲染方式。除了支持网页端,还支持移动端。在地图数据源方面,支持各种类型的瓦片地图,既支持在线的,也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等;还支持各种矢量地

    2024年02月03日
    浏览(48)
  • Angular 17+ 高级教程 – Component 组件 の Control Flow

      Control Flow 是 Angular v17 版本后推出的新模板语法,用来取代 NgIf、NgForOf、NgSwitch 这 3 个 Structure Directive。 Structure Directive 的好处是比较灵活,原理简单,但是即便用了微语法,它看上去还是相当繁琐,而且不够优雅。 Conrol Flow 的好处是它的语法够美,缺点是不必 Structure Di

    2024年03月11日
    浏览(52)
  • 【GIS开发】OpenLayers在线瓦片数据源汇总

    瓦片地图(切片地图)源于一种大地图解决方案,针对一整块非常大的地图进行切片,分成很多相同大小的小块地图,在用户访问的时候,再一块一块小地图加载,拼接在一起,从而还原成一整块大的地图,如果要提高Web地图的访问速度,使用瓦片地图是非常有效的方法。

    2023年04月24日
    浏览(45)
  • Kafka篇——Kafka集群Controller、Rebalance和HW的详细介绍,保姆级教程!

    一、概念 在Kafka中,Controller是Kafka集群中的一个角色, 负责管理集群的元数据、分区分配、副本管理等功能。 Controller的主要职责包括: 1. 元数据管理:Controller负责维护Kafka集群的元数据,包括broker的存活状态、分区的分配情况、副本的分配情况等。它通过与Zookeeper进行交互

    2024年01月19日
    浏览(37)
  • vue3结合openlayers,geoserver实现GIS一张图(WebGIS)

            不知不觉一年又要过去了,接触开发也就是这几个月的事情,感觉时间过的真快,今天就是除夕了,祝各位新年快乐呀,话说回来,其实在接触学习WebGIS的过程中还是蛮迷茫的,自己虽然是地信的学生,对于地理方面还有有一些自己的理解,但平时专业课学习的就是

    2024年02月19日
    浏览(52)
  • nginx教程:配置项add_header Access-Control-Allow-Origin *的含义

    使用 add_header 指令来添加 Access-Control-Allow-Origin 头部,以允许跨域访问。具体来说, add_header Access-Control-Allow-Origin *; 表示将在响应中添加一个名为 Access-Control-Allow-Origin 的头部,并将其值设置为 * ,表示允许来自任何域的跨域请求。 这个配置对于处理跨域请求非常有用,但需

    2024年02月06日
    浏览(42)
  • idea配置SpringBoot+MybatisPlus的Controller模板,一键生成Controller

    本质是idea使用velocity生成代码 我用的MybatisX-Generator生成了entity和service等,但是他没有controller,还得自己创建好麻烦,于是写了模板。 我的格式(以t_user_info表为例): com.xx.entity.UserInfoEntity com.xx.service.UserInfoService 我想在com.xx.controller中输入UserInfoController,让他给我创建基本的

    2024年04月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包