Openlayers：自定义Controls

最新推荐文章于 2024-03-25 00:00:00 发布
最新推荐文章于 2024-03-25 00:00:00 发布
阅读量329 收藏
点赞数
分类专栏： WebGIS 文章标签： Openlayers WebGIS 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43524214/article/details/134359776
版权

        Openlayers是一款优秀的二维开源地图框架，支持矢量/栅格图层，支持移动端，并且易于自定义和拓展。下面来讲述一下自定义Control的基本思路。

openlayers-features

问题描述

        最近在做个人项目时，遇到了一个小问题，就是在地图中心添加一个十字针形状的符号，用来表示地图中心位置，效果如下，

实现思路

        其实很容易解决，

思路1：DOM+CSS定位

直接通过DOM定位的方式，给出一个类似于这样的符号即可；

        优点在于：易于实现；缺点也十分明显，加入后期要为这个十字针添加一些额外的交互性效果，就要去为其添加交互事件，并且代码的可复用性也不高。

思路2：自定义ol.Control

        参考openlayers官网的“指北N”control控件，我们

了解本专栏 订阅专栏 解锁全文 超级会员免费看
是席木木啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
openlayers controls基础知识
大剑师兰特的GIS世界
06-30 619
控件是一个可见的小部件，其 DOM 元素位于屏幕上的固定位置。它们可以涉及用户输入（按钮），或者仅提供信息；位置是使用 CSS 确定的。默认情况下，它们放置在 CSS 类名为 ol-overlaycontainer-stopevent 的容器中，但可以使用任何外部 DOM 元素。.在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏）。第二类是需要放在Div元素中才能用。
OpenLayers 3 之 扩展自定义控件--以切换图层控件为例
研究与专注
12-21 1万+
openlayers 中的控件，是一个固定在页面某个位置的可见的DOM元素，它们可能包含可操作的按钮，也可能只是单纯的展示信息，它们的位置及其样式是由与其关联的CSS样式决定的。默认情况下，它们都位于一个CSS 类（class）为`ol.overlaycontainer-stopevent`的元素内，当然也可以使用其他的自定义的DOM容器元素。
Using OpenLayers to develop a WebGIS Client
classicning的专栏
02-06 121
OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayers提供了非常多的选择。要使用OpenLayers，您可以到它的官方网站http://www.openlayers.org...
openlayers 入门教程（六）：controls 篇
大剑师兰特的GIS世界
03-25 2215
控件是一个可见的小部件，其 DOM 元素位于屏幕上的固定位置。 它们可以涉及用户输入（按钮），或者仅提供信息； 位置是使用 CSS 确定的。 默认情况下，它们放置在 CSS 类名为 ol-overlay container-stop event 的容器中，但可以使用任何外部 DOM 元素。
OpenLayers - control简介 （六）
小小的前端
02-20 1310
control是什么 Controls是用来控制地图的。如通过按钮控制地图大小，在地图map上添加修饰等。 在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏）。第二类是需要放在Div元素中才能用。第三类需要放置在panel（面板）中的操作类似于网页HTML中button按钮，需要点击或绑定才能起作用。最后一类就是自定义类型的。 常用的控件 controldefaults，地图默认包含的控件。 fullscreen，全屏控件，用于全屏幕查看地图。 mou
OpenLayers3基础教程——OL3 介绍control
weixin_30586257的博客
07-05 185
概述： 本文讲述的是Ol3中的control的介绍和应用。 OL2和OL3 control比较： 相比较Ol2的control，OL3显得特别少，下图分别为Ol2和Ol3的control： Ol2的control Ol3的control 相比较Ol2，OL3保留了mouseposition，scaleline，zoom，zoomslider，而将很多东西...
openlayers [七] 地图控件controls详解
爱玩亚索的程序员
01-18 1199
更多请见官网。
openlayers：OpenLayers
02-04
OpenLayers 是一个高性能，功能丰富的库，用于在Web上创建交互式地图。 它可以显示从任何网页上的任何来源加载的地图图块，矢量数据和标记。 OpenLayers的开发旨在进一步利用各种地理信息。 它是完全免费的开源...
ol-contextmenu:OpenLayers的自定义上下文菜单
05-14
OpenLayers自定义上下文菜单 的contextmenu扩展。 需要OpenLayers v3.11.0或更高版本。演示版您可以看到或 。如何使用它？NPM npm install ol-contextmenu CDN托管 加载CSS和Javascript：< link href =" ...
openlayers中自定义工具条
05-22
openlayers中自定义工具条，有需要的自己下载，16年刚玩openlayers的时候做的，一些东西已经过时了
angular-openlayers:Openlayers AngularJS模块
05-14
角开放层Openlayers AngularJS模块构建与openlayers 2配合使用的入门要安装模块： bower install angular-Openlayers
openlayers : ol.js、ol.css 下载
07-23
openlayer ol.js ol.css
openlayers添加按钮_OpenLayers 之 控件（control）详解
weixin_39963287的博客
01-28 2473
每一个地图应用都应该有一些工具方便用户控制地图的行为，比如缩放，全屏，坐标控件等等，在 OpenLayers 中怎么添加这些工具呢？下面我给大家介绍一下 OpenLayers 中包含的控件种类，并介绍其使用方法。对控件的定制化，和对 OpenLayers 增加控件和优化控件等超出了本文范围。一、control 类OpenLayers 中的控件是由 control 类定义的，这是一个虚基类，不负责实...
openlayers6【七】地图控件controls详解
@必意玲
05-27 6977
文章目录1. controls 简述2. 常见的 controls 控件3. 控件的使用3.1 fullscreen 全屏控件3.2 mouseposition 鼠标位置控件3.3 overviewmap 地图全局视图（鹰眼图）控件3.4 scaleline 比例尺控件3.5 zoom 缩放控件3.6 zoomslider 缩放滑块刻度控件4. 总结 1. controls 简述 上篇文章我们将了在地图上的交互(interaction)，那些都是一些隐性的需要去使用才能知道存在有这样一个东西，就像彩蛋一样。
OpenLayers 3 之 地图控件（control）详解
热门推荐
研究与专注
05-14 2万+
每一个地图应用都应该有一些工具方便用户控制地图的行为，比如缩放，全屏，坐标控件等等，在 OpenLayers 中怎么添加这些工具呢？下面我给大家介绍一下 OpenLayers 中包含的控件种类，并介绍其使用方法。对控件的定制化，和对 OpenLayers 增加控件和优化控件等超出了本文范围。
OpenLayers中移除默认控件，添加其他控件
Moon Star
08-16 1015
OpenLayers中移除、添加控件
Openlayers学习笔记——Controls类
隔壁老瓦的专栏
03-09 531
Controls affect the display or behavior of the map. They allow everything from panning and zooming to displaying a scale indicator. Controls by default are added to the map they are contained within...
openlayers3添加地图控件
weixin_33929309的博客
07-16 291
//添加属性控件 map.addControl(new ol.control.Attribution()); //添加鼠标定位控件 map.addControl(new ol.control.MousePosition({ undefinedHTML: 'outside', projection: 'EPSG:4326', ...
基于多种编程语言的卡拉音乐播放器设计源码
最新发布
05-28
本项目是基于多种编程语言的卡拉音乐播放器设计源码，包含625个文件，其中包括389个JavaScript文件、70个TypeScript文件、52个PNG图像文件、22个JSON配置文件、19个Vue文件、12个MAP文件、11个WXSS样式文件、9个WXML模板文件、7个SVG文件和5个EOT字体文件。系统专注于提供卡拉音乐播放器功能，支持歌曲播放、播放列表管理等功能，为用户提供了一个稳定、高效的卡拉音乐播放器。
vue openlayers实现自定义绘图控件
05-31
要实现自定义绘图控件，需要使用Vue和OpenLayers的组件。首先，在Vue组件中引入OpenLayers库： ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import { Draw, Modify, Snap } from 'ol/interaction'; import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; import { OSM, Vector as VectorSource } from 'ol/source'; import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'; ``` 然后，在Vue组件中定义一个地图容器和一个绘图控件容器： ```html <template> <div> <div ref="map" class="map"></div> <div ref="draw" class="draw"></div> </div> </template> ``` 接下来，在Vue组件的mounted钩子函数中初始化地图和绘图控件： ```javascript mounted() { // 初始化地图 const map = new Map({ target: this.$refs.map, layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }); // 初始化绘图控件 const source = new VectorSource(); const vector = new VectorLayer({ source: source, style: new Style({ fill: new Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new Stroke({ color: '#ffcc33', width: 2 }), image: new CircleStyle({ radius: 7, fill: new Fill({ color: '#ffcc33' }) }) }) }); map.addLayer(vector); const draw = new Draw({ source: source, type: 'Circle' }); this.draw = draw; map.addInteraction(draw); const modify = new Modify({ source: source }); map.addInteraction(modify); const snap = new Snap({ source: source }); map.addInteraction(snap); } ``` 在这个例子中，绘图控件使用了一个圆形绘图，通过Draw交互器实现，使用Modify和Snap交互器进行修改和捕捉。 最后，可以通过Vue的方法来控制绘图控件的启停，例如在一个按钮的点击事件中： ```javascript methods: { startDraw() { this.draw.setActive(true); }, stopDraw() { this.draw.setActive(false); } } ``` 这样就可以实现一个自定义绘图控件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是席木木啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值