OpenLayers 3 之 扩展自定义控件--以切换图层控件为例

最新推荐文章于 2025-04-07 17:28:49 发布
最新推荐文章于 2025-04-07 17:28:49 发布
阅读量1w 收藏 9
点赞数 3
分类专栏： OpenLayers WebGIS OpenLayers 文章标签： openlayers 切换图层控件 webgis 扩展控件 ol3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingyafan/article/details/50034461
版权
本文介绍了如何在OpenLayers 3中扩展自定义控件，以图层切换控件为例，详细讲解了继承ol.control.Control基类创建控件的过程，包括定义基类、对外方法以及具体实现。通过需求分析和代码实现，展示了如何在地图上添加一个可切换图层的DOM元素，并实现图层的显示与隐藏功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

      openlayers 中的控件，是一个固定在页面某个位置的可见的DOM元素，它们可能包含可操作的按钮，也可能只是单纯的展示信息，它们的位置及其样式是由与其关联的CSS样式决定的。默认情况下，它们都位于一个CSS 类（class）为ol.overlaycontainer-stopevent的元素内，当然也可以使用其他的自定义的DOM容器元素。

      在openlayers 的结构中，控件有很多，比如左上角的缩放控件、右下角的属性控件，这些控件都是继承一个基类 ol.control.Control，基类主要为它的子类提供统一的“阻止事件传播机制”，并且 ol.control.Control继承了 ol.Object，并且控件都放于一个统一的容器 ol.Collection，所以如果继承ol.control.Control基类，自定义的控件不仅可以得益于其“阻止事件传播机制”，也可以使用 ol.Object和ol.Collection的方法和事件。

ol.control.Control 简介

      ol.control.Control是openlayers的控件基类，我们的自定义控件可以继承该基类（在上边我们也讲了继承该基类的好处），在类中使用 javascript 动态创建DOM元素，指定DOM元素对应的CSS样式类（class），并对DOM元素绑定相应的事件，来完成自定义控件。openlayers3 使用了google 的 closure 库来进行开发，要使用 closure 的语法来进行继承，比如我们定义我们的切换图层控件类为 ol. control.LayerSwitcher，那么使用closure实现继承的语句如下：

ol.inherits(ol.control.LayerSwitcher, ol.control.Control)
最低0.47元/天 解锁文章
Openlayers 教程 11 - 创建自定义控件（图例、行政区划组件等）
linzi19900517的博客
07-10 2709
自定义控件是 Openlayers 的特色功能之一，主要用于实现自定义的功能，比如：美化版的缩放按钮、美化版的全屏按钮等；还有像图层控制、底图控制、标绘控制等。
Openlayers：自定义Controls
席木木的博客
11-12 479
Openlayers是一款优秀的二维开源地图框架，支持矢量/栅格图层，支持移动端，并且易于自定义和拓展，本文主要讲述如何自定义Control，实现ol定制化拓展的基本思路。
vue+Openlayers加载和切换OSM，高德，谷歌等地图（一）
最新发布
qq19191109的博客
04-07 416
初始化项目这些就不讲了，可以根据其他帖子配置vue项目以及openlayers，之前也是，发现有些未能运行出来，后面做了一些修改。比如，改变OpenLayers 地图的挂载方式，Map初始化时使用了绑定。
OpenLayers实现图层切换控件
01-18
OpenLayers并没有封装图层切换的控件，所以我们需要自己来实现图层控件。 自定义图层切换控件的原理很简单：显示某个图层时，将其他图层隐藏。 完整代码： layerSwitch.html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA-Compatible content=ie=edge> <title>图层切
openlayer 扩展自定义组件(图层管理器,图例控件)
u012453032的博客
07-19 445
最近看了下网上一些对于openlayer的封装，抽取了两个比较好的案例封装了下,封装了图例和图层管理器 图层选择器代码封装 .hxMap-layer-switcher.shown.ol-control { background-color: transparent; } .hxMap-layer-switcher.shown.ol-control:hover { background-color: transparent; } .hxMap-layer-switcher { position
Vue+OpenLayers6扩展插件进阶系列汇总目录：常用OpenLayers地图扩展组件ol-ext、ol-cesium、ol-layerswitcher、ol-geocoder和ol-wind
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-19 1547
OpenLayers 是一个开源的 JavaScript 库，用于在 Web 上创建交互式地图。它本身提供了丰富的功能和组件，但也有一些扩展库可以为其增加更多功能或简化特定任务的实现。以下是一些常见的 OpenLayers 扩展库：ol-ext、ol-cesium、ol-layerswitcher、ol-popup、ol-geocoder和ol-wind等常见扩展库。
OpenLayers3实现图层控件功能
10-14
虽然OpenLayers 3没有直接提供内置的图层控件，但通过其丰富的API，我们可以自定义实现这一功能。下面我们将详细讲解如何使用OpenLayers 3来创建一个图层控件。 1. **前言** 在地图应用中，图层控件通常用于展示...
openlayers自定义控件 ---仿百度地图指南针
weixin_30914981的博客
12-17 1680
看图说话。 顺时针按钮点击之后。地图会以当前center为圆心顺时针转动90度。 逆时针按钮点击之后。地图会以当前center为中心点逆时针转动90度 //自定义控件ol.control.Compass = function(opt_options){ var options = opt_options || {}; //参数 ...
openlayers自定义图层控制的实现
weixin_30278237的博客
09-20 899
好久没写博文了，今天出来冒个泡。 最近一直在考虑一件事情，那就是openlayers中自定义wms的图层控制。用过openlayers的人都知道，在openlayers中有自带的图层控制的控件，调用方法也很简单： map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));//图层控制 但是...
二十一、openlayers官网示例Custom Controls解析——自定义控件扩展Control类
aaa_div的博客
05-21 391
首先创建了一个新的类继承了原本的Control，新增了一个button元素，然后调用了super方法将参数传给了父类。在点击事件里调用了openlayers的setRotation()方法控制视图倾斜角度。可以在node_moudles里面找到Control类的源码，看到父类需要的参数。如果style里面设置了scoped，样式代码这里需要使用样式穿透，否则不会生效。然后调了super方法将参数传递给父类。这个示例讲的是如何自定义控件。
ol-layerswitcher:OpenLayers的图层控制
04-27
OpenLayers LayerSwitcher OpenLayer地图的分组图层列表控件。 要显示在LayerSwitcher图层中，应具有title属性； 基本层应将type属性设置为base 。 LayerGroup层（ LayerGroup ）可用于将图层可视地分组在一起； fold属性设置为“ open或“ close将显示为带有切换开关。 有关用法，请参见和。 与OpenLayers版本3、4、5和6兼容（有关安装适用于OpenLayers的ol-layerswitcher版本的信息请参阅中ol-layerswitcher ）。 例子 这些示例演示了用法，并且可以通过在线查看这些示例： 创建一个图层切换器控件。 图层切换器中要显示的每个图层都具有title属性，每个组也是如此。 每个基础地图图层都有一个type: &#39;base&#39;属性。 见评价其他层/组选择，包括combi
Openlayers 自定义控件
a313469292的博客
08-25 998
OpenLayers.Control.YourControl = OpenLayers.Class(OpenLayers.Control, { // may private properties here ... initialize: function(options) { OpenLayers.Cont...
openlayers添加按钮_OpenLayers 之 控件（control）详解
weixin_39963287的博客
01-28 2605
每一个地图应用都应该有一些工具方便用户控制地图的行为，比如缩放，全屏，坐标控件等等，在 OpenLayers 中怎么添加这些工具呢？下面我给大家介绍一下 OpenLayers 中包含的控件种类，并介绍其使用方法。对控件的定制化，和对 OpenLayers 增加控件和优化控件等超出了本文范围。一、control 类OpenLayers 中的控件是由 control 类定义的，这是一个虚基类，不负责实...
OpenLayers - control简介 （六）
小小的前端
02-20 1490
control是什么 Controls是用来控制地图的。如通过按钮控制地图大小，在地图map上添加修饰等。 在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏）。第二类是需要放在Div元素中才能用。第三类需要放置在panel（面板）中的操作类似于网页HTML中button按钮，需要点击或绑定才能起作用。最后一类就是自定义类型的。 常用的控件 controldefaults，地图默认包含的控件。 fullscreen，全屏控件，用于全屏幕查看地图。 mou
OpenLayers 3 的 图层控制控件
weixin_33949359的博客
04-17 477
　　openlayers3的control中没有提供默认的图层控制控件。 　　但是git上已经有造好的轮子，直接拿来用就可以了。地址 https://github.com/walkermatt/ol3-layerswitcher 　　直接引用下载的js文件和css文件 <link rel="stylesheet" type="text/css" href="../static/c...
OpenLayers 3 之 切换图层控件
热门推荐
研究与专注
11-27 1万+
在 openlayers 2中，是默认有切换图层控件的，但是由于某种原因，openlayers 3中并没有默认实现，但却给我们很容易扩展的基类（ol.control.Control），我们可以自定义实现，并不是很难，这我会在其他文章中讲解。这篇文章中，我利用一个 GitHub 中的一个开源项目（这个项目就是扩展了`ol.control.Control`，自定义了切换图层控件），添加切换图层控件，并探索其用法。
OpenLayers图层切换器——ol-layerswitcher项目推荐
gitblog_00748的博客
01-10 328
OpenLayers图层切换器——ol-layerswitcher项目推荐 ol-layerswitcher Layer control for OpenLayers 项目地址: https://gitcode.com/gh_mi...
openlayers的一些简单控件 使用语法：controls： ol.control.defaults().extend([ ])
AY
05-17 1052
效果图如上 代码具体实现如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值