openlayer 移除map.on(click,地图点击事件

原创 已于 2025-07-11 08:40:53 修改 · 1.1w 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#openlayer

于 2019-01-07 18:15:09 首次发布
本文记录了在OpenLayers API中实现地图点击事件的方法及如何移除已设置的点击事件，通过具体代码示例展示了事件绑定与取消绑定的技巧。

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

在openlayer API里找了好久也没找到，最后问老同学才解决这个问题，今天记录下来

key = map.on('click', function (e) {
...
}.bind(this));
//移除click

ol.Observable.unByKey(key);

Vue2+OpenLayers添加/删除点、点击事件功能实现（提供Gitee源码）
黄团团的个人博客
01-13 734
在OpenLayers中，Feature（要素）是地图上表示一个空间实体的对象，它包含的类型有： Point（点） LineString（线段） Polygon（多边形）。首先新增一个图层，我们所有的点信息都存放在这个图层上，你也可以添加一个点就新增一个图层，看各自需求，然后初始化经纬度变量。VectorLayer是一个用于在地图上渲染矢量数据的层，支持显示点、线和面等几何图形。可以新增/删除标记点，点击标记点可以获取到当前标记点的经纬度信息（绑定了点击事件）。
Vue2+OpenLayers地图常用监听事件
黄团团的个人博客
01-18 494
本篇博客列举了地图开发中常见的地图事件：缩放、单击、双击、拖动等事件。
openlayers启动和取消map监听事件
larea的博客
03-05 1332
在map中启动“点击事件”监听。在map中取消“点击事件”监听。
OpenLayers 地图事件探究
GIS之路
06-17 1033
注：当前使用的是 ol版本，天地图使用的key请到天地图官网申请，并替换为自己的key地图事件贯穿于WebGIS开发的始终，用于实现地图与用户的交互操作。地图缩放、移动使用MapEvent事件；图层渲染、状态使用事件；要素绘制、选择使用事件。
Openlayers 关闭指定的地图点击事件
大橙子的博客
11-04 2265
//定义地图的点击事件 lin= mapLine.on('click', function(evt) { 业务逻辑代码............. }.bind(this)); //关闭指定的方法 ol.Observable.unByKey(lin);
OpenLayers基础教程——地图事件的注册和取消
HerryDong的博客
10-14 3624
1、前言 在OpenLayers的开发中，事件的身影随处可见。例如，用户点击地图后弹出了一个对话框，这就是事件的典型应用。下面就来介绍一下如何在OpenLayers中注册事件和取消注册事件。 2、注册事件 事件的注册方式很简单，遵循如下模板即可。其中，事件名称可以是click、dblclick、pointermove等等，后面的function(event)负责编写该事件的处理逻辑。 map.on('事件名称', function (event) {}); 下面就来实现一个小功能：点击地图后显示鼠标点击位
openlayers3在地图上定义feature的鼠标移入移出事件
Wxq666666的博客
08-01 6129
ol3提供了鼠标在feature上的鼠标移入事件，但是并没有提供移出事件所以移出事件是要自定义的，具体思路如下： 1、绘制一个点、线、面的时候会得到一个feature对象使用这个feauture对象注册mousein监听 obj_feature.on('mousein',function (event) { //=====写自己想做事 }) 2、监听地图上的鼠标移动事件： ma...
Openlayers点击事件多次触发问题
weixin_60823046的博客
12-28 1835
Openlayers点击事件多次触发问题
Openlayer中的事件
09-02 1301
绑定事件：map.on(type, listener) 取消绑定：map.un(type, listener) type:事件类型 listener：执行得函数体 //事件类型 let type = { click:'click',//单击 dblclick:'dblclick',//双击，双击会触发click singleclick:'singleclick',//单击，延迟250毫秒，就算双击不会触发 moveend:'moveend',//鼠标滚动事件
vue+openlayer加载geojson通过地图的singleclick事件实现要素的选中高亮以及再次点击取消选中
weixin_43747076的博客
07-01 2146
思考： 选中： 通过singleclick事件可以获取坐标点，openlayer中Feature有个getGeometry().getClosestPoint§方法，就是feature根据这个p坐标可以获取到里这个点最近的坐标点，然后咱们通过这个点和点击的点的距离进行比较，并且咱们也可以进一步的进行限定（判定点击的坐标在feature的边界内），这样做还是有问题，就是你还有可能选中不相关的点或者线，咱们可以做一个工具，也是使用openlayer加载geojson，然后通过选中你想要进行标定的要素，将这些块的
三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件
aaa_div的博客
05-28 887
interactions属性用来设置地图上的交互，DblClickDragZoom就是第二次按下鼠标拖拽缩放的类。这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。
openlayer绑定click事件，去掉click事件
最新发布
07-11
OpenLayers 提供了 `map.on()` 方法用于监听地图上的各种事件，其中包括 `click` 事件。通过该方法可以将回调函数与事件绑定[^2]。 ```javascript // 绑定 click 事件 const key = map.on('click', function (event...
Openlayers 教程 22 - 介绍演示地图监听事件（单击双击、地图平移、地图缩放、鼠标悬浮等）
非科班Java出身GISer的博客
04-01 6638
地图中的监听事件，也是经常用的功能，一般用于点击获取坐标点，进而查询数据，还有其他事件，比如双击事件、缩放事件等。
openlayers3学习-创建地图，添加、移除监听事件
zforler的博客
04-22 7273
一、入门实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../ol.css" rel="stylesheet"/> <script src="....
Openlayers的交互功能（五）——删除图斑
m0_46410110的博客
09-19 913
本文对图斑的删除进行了简单的介绍，后续将继续更新Feature的平移、框选平移等操作。如有错误，请批评指正！欢迎关注星林社区文章将同步更新在星林社区中！
Map点击地图要素获取要素信息
Sakura1998gis的博客
03-12 923
Map点击地图要素获取要素信息
OpenLayers的点击事件
超频化石鱼的博客
10-07 1万+
OpenLayers的点击事件是附加在整个ol.Map对象上的： var selectSingleClick = new ol.interaction.Select(); map.addInteraction(selectSingleClick); selectSingleClick.on('select', function(e) { var features = e.target.get...
OpenLayers Draw绘制时操作结束绘制
Gary Leong
05-13 4330
this.draw.finishDrawing() Stop drawing and add the sketch feature to the target layer. The module:ol/interaction/Draw~DrawEventType.DRAWEND event is dispatched before inserting the feature. 使用方法： 可以通过键盘快捷键操作，结束draw绘制，将当前绘制的图形添加到目标图层中。 ...
OpenLayers教程一：OpenLayers概述
热门推荐
不睡觉的怪叔叔的博客
05-30 10万+
目录 一、OpenLayers简介 二、OpenLayers的特征 三、OpenLayers的框架结构 一、OpenLayers简介 OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。 OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机...
openlayer移除图层
09-05
在OpenLayers中，移除图层有多种方法取决于你想要移除的图层数量。如果你只想移除一个图层，你可以使用`map.removeLayer()`方法，并指定要移除的图层作为参数。例如，`map.removeLayer(ELCLTB)`将移除名为ELCLTB的图层。 然而，当你想要移除多个图层时，直接使用`map.removeLayer()`方法并指定多个图层作为参数会导致错误。这是因为OpenLayers 2中没有提供一次性移除多个图层的方法。 一个解决办法是在一个处理函数中，使用多个`map.removeLayer()`语句来逐个移除图层。例如，你可以创建一个处理函数，其中包含移除多个图层的操作，类似于以下代码： ```javascript handler: function() { map.removeLayer(ELCLTB); map.removeLayer(LWss); } ``` 这样，当你调用这个处理函数时，它将依次移除ELCLTB和LWss两个图层。 另一种可能的解决办法是使用OpenLayers 2的`getLayersByName()`方法来获取要移除的图层，并使用`map.removeLayer()`逐个移除它们。但是需要注意的是，OpenLayers 2中没有提供一次性移除所有图层的方法。 综上所述，如果你只需要移除一个图层，可以直接使用`map.removeLayer()`方法。如果你需要移除多个图层，你可以创建一个处理函数，其中包含多个`map.removeLayer()`语句，或者使用`getLayersByName()`方法来获取要移除的图层并逐个移除它们。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【openlayer2】清理图层OpenLayers.Layer.WMS](https://blog.csdn.net/qq_37219845/article/details/105557335)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值