openlayers：实现自定义控件 (附完整源码）

最新推荐文章于 2024-05-21 08:30:00 发布

源代码大师

最新推荐文章于 2024-05-21 08:30:00 发布

阅读量302

点赞数

CC 4.0 BY-SA版权

分类专栏： openlayers实战教程文章标签： openlayers

不予转载，严禁转载，违者必纠。

本文链接：https://blog.csdn.net/it_xiangqiang/article/details/135896095

openlayers实战教程专栏收录该内容

417 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

这篇原创博客详细介绍了如何在OpenLayers中实现自定义控件，包括`main.js`中的关键代码实现，`index.html`的结构布局以及`package.json`的配置。通过本文，读者可以学习到OpenLayers的扩展方法并获取完整的源码示例。

openlayers：实现自定义控件

main.js
index.html
package.json

这个例子创建了一个“向北旋转”按钮。

main.js

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {
   
   Control, defaults as defaultControls} from 'ol/control.js'

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

源代码大师

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Openlayers 教程 11 - 创建自定义控件（图例、行政区划组件等）

非科班Java出身GISer的博客

07-10

2935

自定义控件是 Openlayers 的特色功能之一，主要用于实现自定义的功能，比如：美化版的缩放按钮、美化版的全屏按钮等；还有像图层控制、底图控制、标绘控制等。

OpenLayers自定义GIS控件

ChDevops的博客

09-26

280

在OpenLayers中，控件是地图上的可视化元素，用于执行特定的功能或显示相关信息。在上面的代码中，我们创建了一个名为CustomZoomControl的自定义控件。在构造函数中，我们创建了一个包含放大和缩小按钮的DOM元素，并添加了相应的CSS类名。在上面的代码中，我们创建了一个地图对象，并使用addControl方法将CustomZoomControl添加到地图的控件列表中。通过上述代码，我们可以在地图上看到一个自定义的缩放控件，用户可以使用该控件来放大或缩小地图。如果你有任何疑问，请随时提问！

参与评论您还未登录，请先登录后发表或查看评论

Openlayers：自定义Controls

席木木的博客

11-12

633

Openlayers是一款优秀的二维开源地图框架，支持矢量/栅格图层，支持移动端，并且易于自定义和拓展，本文主要讲述如何自定义Control，实现ol定制化拓展的基本思路。

Openlayers 自定义控件

a313469292的博客

08-25

1025

OpenLayers.Control.YourControl = OpenLayers.Class(OpenLayers.Control, { // may private properties here ... initialize: function(options) { OpenLayers.Cont...

angularjs与openlayers3自定义控件

01-16

实现对angularjs 与openlayer3自定义控件，对于地图服务。

openlayers：实现自定义总览图 (附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

01-28

150

openlayers：实现自定义总览图 (附完整源码）

openlayers：实现自定义工具提示 (附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

01-28

144

openlayers：实现自定义工具提示 (附完整源码）

openlayers：实现自定义小窗口显示小地图（附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

01-31

198

openlayers：实现自定义小窗口显示小地图（附完整源码）

openlayers：实现图层切换控件（附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

02-06

338

openlayers：实现图层切换控件（附完整源码）

二十一、openlayers官网示例Custom Controls解析——自定义控件扩展Control类

最新发布

aaa_div的博客

05-21

520

首先创建了一个新的类继承了原本的Control，新增了一个button元素，然后调用了super方法将参数传给了父类。在点击事件里调用了openlayers的setRotation()方法控制视图倾斜角度。可以在node_moudles里面找到Control类的源码，看到父类需要的参数。如果style里面设置了scoped，样式代码这里需要使用样式穿透，否则不会生效。然后调了super方法将参数传递给父类。这个示例讲的是如何自定义控件。

openlayers中自定义工具条

07-16

openlayers中自定义工具条，有需要的自己下载，16年刚玩openlayers的时候做的，一些东西已经过时了

OpenLayer3自定义测量控件MeasureTool

01-18

一直苦恼于OpenLayer3没有现成的测量工具，看了歪果仁做的图层控件，于是自己结合了官网上的measure实例和歪果仁的模板鼓捣出了一个测量工具控件。下载地址描述基于Openlayers3所做的自定义控件，支持测量距离（line）和测量面积（area）以及geodesic测量加载css和js文件后直接引用即可使用JavaScript原生编写，不需要引入JQuery 使用效果如图：使用方式在html页面中引入OpenLayer3的css和js文件后再加入下载的measuretool.css和measuretool.js <link rel=stylesheet

openlayers 中自定义扩展简单引用

05-27

openlayers 自定义相关内容以及对定义内容的引用

openlayer自定义鹰眼

09-22

实现openlayer自定义鹰眼，用于代替openlayer原来自带的鹰眼。

OpenLayers加载缩放控件使用方法详解

10-14

主要为大家详细介绍了OpenLayers加载缩放控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

OpenLayer 学习之自定义测量控件（目前ol3的版本不会抛异常）

weixin_30908649的博客

06-25

269

一、自定义控件是在继承基类空间基础上实现的，控件不是我写的（毕竟技术有限）最近也在一直在研究源码进行模仿想写出自己的功能更为强大的控件。二、控件源码 1、css样式设置 .tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: whit...

OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例

GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid

03-15

611

本章介绍如何使用OpenLayers创建自定义控件。以创建一个地图复位控件为例，讲解如何创建自定义控件来调整地图为默认的中心点、缩放等级和方向。

OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式

GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid

03-18

548

本章讲解OpenLayers6如何创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小和文字和按钮等自定义样式的功能。

openlayers实现自定义绘图控件实现类似ArcGIS绘图工具条

此爱如少年

07-13

2450

接前一篇《》，绘图功能虽然实现了，但是仅仅开发到这里，做Demo还行，如果要应用到项目中，显然是不太灵活，因此，将绘图功能封装到控件中，作为工具，将更有利于我们来使用。文章目录1、ol.control.Control类2、需求3、代码实现1）、继承2）属性方法3）按钮样式4、结果先来看下openlayers自带的控件。 1、ol.control.Control类 openlayers中所有控...